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 相关文章推荐
Javascript UrlDecode函数代码
Jan 09 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
JS模拟键盘打字效果的方法
Aug 05 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
使用OPENLAYERS3实现点选的方法
Sep 24 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 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面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
Element Input组件分析小结
2018/10/11 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
Python中协程用法代码详解
2018/02/10 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
单位实习证明怎么写
2014/01/17 职场文书
中学生班主任评语
2014/01/30 职场文书
销售经理竞聘书
2014/03/31 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书
慰问信模板
2015/02/14 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android