Prototype使用指南之selector.js


Posted in Javascript onJanuary 10, 2007

Selector是利用css selector来匹配选择页面元素的,所以要理解Selector首先应该对css selector有所理解,下面是css2 selector的语法,当然很多浏览器只是支持其中的一部分,Prototype 中的Selector主要支持tag选择器、class选择器和id选择器,还有属性(attribute)选择器,基本上包含我们平时所用的所有类型

The following table summarizes CSS2 selector syntax, 详细的可以看http://www.w3.org/TR/REC-CSS2/selector.html:

Pattern Meaning Described in section
* Matches any element. Universal selector
E Matches any E element (i.e., an element of type E). Type selectors
E F Matches any F element that is a descendant of an E element. Descendant selectors
E > F Matches any F element that is a child of an element E. Child selectors
E:first-child Matches element E when E is the first child of its parent. The :first-child pseudo-class
E:link E:visited Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). The link pseudo-classes
E:active E:hover E:focus Matches E during certain user actions. The dynamic pseudo-classes
E:lang(c) Matches element of type E if it is in (human) language c (the document language specifies how language is determined). The :lang() pseudo-class
E + F Matches any F element immediately preceded by an element E. Adjacent selectors
E[foo] Matches any E element with the “foo” attribute set (whatever the value). Attribute selectors
E[foo=”warning”] Matches any E element whose “foo” attribute value is exactly equal to “warning”. Attribute selectors
E[foo~=”warning”] Matches any E element whose “foo” attribute value is a list of space-separated values, one of which is exactly equal to “warning”. Attribute selectors
E[lang|=”en”] Matches any E element whose “lang” attribute has a hyphen-separated list of values beginning (from the left) with “en”. Attribute selectors
DIV.warning HTML only. The same as DIV[class~=”warning”]. Class selectors
E#myid Matches any E element ID equal to “myid”. ID selectors

Selector中包含Selector对象和类,

Selector对象具有下面两个方法:

match(element):元素是否与本selector匹配,在Element中已经介绍了
findElements(parentNode):parentNode中所有匹配本selector的子孙元素列表

使用方法也很简单 var s=new Selector(expression); s.match(element); s.findElements($(element)),其中expression可以是如下方式 "div"、"#id"、".class"、"div#id"、"div[attribute]"、"div[attribute=fff]"、"div[attribute!=sdf]"

其中Selector也有几个静态方法,它们分别是:

matchElements(elements, expression):返回elements中符合expression的元素列表
findElement(elements, expression, index):返回elements中符合expression的元素列表中索引为index的元素
findChildElements(element, expressions):找出element的子孙元素中符合expressions的元素列表,其中expressions是一个expression数组,其中的expression支持"div li.#id"形式

$$方法:只是简单的调用return Selector.findChildElements(document, $A(arguments))

虽然Selector有这么多方法,但是大部分都是内部调用的,我们一般都很少使用,因为我们有个一个方便的方法$$,对于绝大部分情况已经足够了
Javascript 相关文章推荐
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
JavaScript数组方法大全(推荐)
Jul 05 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
JS框架之vue.js(深入三:组件1)
Sep 29 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
Prototype使用指南之dom.js
Jan 10 #Javascript
Prototype使用指南之ajax
Jan 10 #Javascript
Prototype使用指南之range.js
Jan 10 #Javascript
Prototype使用指南之hash.js
Jan 10 #Javascript
Prototype使用指南之array.js
Jan 10 #Javascript
Prototype使用指南之enumerable.js
Jan 10 #Javascript
Prototype使用指南之base.js
Jan 10 #Javascript
You might like
Cannot modify header information错误解决方法
2008/10/08 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
php intval函数用法总结
2019/04/14 PHP
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
js实时监听文本框状态的方法
2011/04/26 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
python中的闭包函数
2018/02/09 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
Python定义函数实现累计求和操作
2020/05/03 Python
python3爬虫中异步协程的用法
2020/07/10 Python
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
初中班主任评语
2014/04/24 职场文书
小学生运动会报道稿
2014/09/12 职场文书
实习护士自荐信
2015/03/25 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
红十字会救护培训简讯
2015/07/20 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL