Prototype使用指南之selector.js说明


Posted in Javascript onOctober 26, 2008

下面是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 相关文章推荐
菜单效果
Oct 14 Javascript
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
Grunt入门教程(自动任务运行器)
Aug 06 Javascript
Js获取当前日期时间及格式化代码
Sep 17 Javascript
js给table赋值的实例代码
Oct 13 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
详解vue中computed 和 watch的异同
Jun 30 Javascript
使用vue2.0创建的项目的步骤方法
Sep 25 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
vue-test-utils初使用详解
May 23 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 Javascript
prototype Element学习笔记(Element篇三)
Oct 26 #Javascript
prototype Element学习笔记(篇二)
Oct 26 #Javascript
prototype Element学习笔记(篇一)
Oct 26 #Javascript
JS对URL字符串进行编码/解码分析
Oct 25 #Javascript
在html页面中包含共享页面的方法
Oct 24 #Javascript
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 #Javascript
Javascript客户端将指定区域导出到Word、Excel的代码
Oct 22 #Javascript
You might like
PHP set_time_limit(0)长连接的实现分析
2010/03/02 PHP
php通用防注入程序 推荐
2011/02/26 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
JavaScript 事件对象的实现
2009/07/13 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
python判断windows系统是32位还是64位的方法
2015/05/11 Python
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
Django 自定义分页器的实现代码
2019/11/24 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
学校办公室主任职责
2013/12/27 职场文书
上班迟到检讨书
2014/01/10 职场文书
施工质量承诺书范文
2014/05/30 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis