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面向对象编程入门教程
Apr 16 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
jQuery中delegate()方法的用法详解
Oct 13 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
vue一步步实现alert功能
Jul 05 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
jQuery实现本地存储
Dec 22 jQuery
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
php常用ODBC函数集(详细)
2013/06/24 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
javascript实现炫酷的拖动分页
2015/05/11 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
js数组实现权重概率分配
2017/09/12 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
python实现代码行数统计示例分享
2014/02/10 Python
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
Python中is与==判断的区别
2017/03/28 Python
Python Flask-web表单使用详解
2017/11/18 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
Python中itertools的用法详解
2020/02/07 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
苹果中国官方网站:Apple中国
2016/07/22 全球购物
墨西哥网上购物:Linio墨西哥
2016/10/20 全球购物
党校培训自我鉴定
2014/02/01 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
五年级下册复习计划
2015/01/19 职场文书
学生会个人总结范文
2015/02/15 职场文书
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB