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 相关文章推荐
jQuery 获取URL参数的插件
Mar 04 Javascript
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
jQuery动态加载css文件实现方法
Jun 15 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
微信小程序实现消息框弹出动画
Apr 18 Javascript
JS script脚本中async和defer区别详解
Jun 24 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
DIY实用性框形天线
2021/03/02 无线电
php中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
php生成动态验证码gif图片
2015/10/19 PHP
php文件上传类完整实例
2016/05/14 PHP
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
yarn的使用与升级Node.js的方法详解
2017/06/04 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
解决Python3下map函数的显示问题
2019/12/04 Python
python 错误处理 assert详解
2020/04/20 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
Django Form常用功能及代码示例
2020/10/13 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
C# Debug和Testing相关面试题
2015/10/25 面试题
男性健康日的活动方案
2014/08/18 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
2014年残联工作总结
2014/11/21 职场文书
春节晚会开场白
2015/05/29 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书