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 08 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
javascipt基础内容--需要注意的细节
Apr 10 Javascript
jquery 删除字符串最后一个字符的方法解析
Feb 11 Javascript
JavaScript中对象介绍
Dec 31 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 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
使用php+xslt在windows平台上
2006/10/09 PHP
第九节--绑定
2006/11/16 PHP
php array_merge下进行数组合并的代码
2008/07/22 PHP
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
PHP对象实例化单例方法
2017/01/19 PHP
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
Flask-Mail用法实例分析
2018/07/21 Python
pycharm 安装JPype的教程
2019/08/08 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
python的flask框架难学吗
2020/07/31 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
Servlet面试题库
2015/07/18 面试题
护理专业自我鉴定
2014/01/30 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
公务员个人总结
2015/02/12 职场文书
力克胡哲观后感
2015/06/10 职场文书
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript