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 相关文章推荐
jQuery中需要注意的细节问题小结
Dec 06 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
Three.js快速入门教程
Sep 09 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
基于JavaScript获取url参数2种方法
Apr 17 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 问卷调查结果统计
2015/10/08 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
javascript计算对象长度的方法
2017/10/25 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
Python时间戳使用和相互转换详解
2017/12/11 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
python3字符串输出常见面试题总结
2020/12/01 Python
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
澳大利亚香水在线商店:City Perfume
2020/09/02 全球购物
当当网软件测试笔试题
2015/11/24 面试题
宾馆总经理岗位职责
2014/02/14 职场文书
高中生学期学习自我评价
2014/02/24 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
党风廉设责任书
2014/04/16 职场文书
英语教育专业自荐信
2014/05/29 职场文书
运动会标语
2014/06/21 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
MySQL多表查询机制
2022/03/17 MySQL
mysql 子查询的使用
2022/04/28 MySQL