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 相关文章推荐
各种常用浏览器getBoundingClientRect的解析
May 21 Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
jquery实现倒计时效果
Dec 14 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
微信小程序 教程之事件
Oct 18 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 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缓存技术的使用说明
2011/08/06 PHP
解析PHP提交后跳转
2013/06/23 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
Python常用内置函数总结
2015/02/08 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
python字典一键多值实例代码分享
2019/06/14 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
倩碧英国官网:Clinique英国
2018/08/10 全球购物
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
公司综合部的成员自我评价分享
2013/11/05 职场文书
门卫岗位安全职责
2013/12/13 职场文书
租房协议书范本
2014/04/09 职场文书
请假条范文大全
2014/04/10 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
2015年父亲节寄语
2015/03/23 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技