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 16 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
jQuery自动添加表单项的方法
Jul 13 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
Feb 26 Javascript
详解vue中localStorage的使用方法
Nov 22 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 Javascript
JavaScript实现单点登录的示例
Sep 23 Javascript
Vue多选列表组件深入详解
Mar 02 Vue.js
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
一个ftp类(ini.php)
2006/10/09 PHP
一个程序下载的管理程序(二)
2006/10/09 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
深入探讨javascript函数式编程
2015/10/11 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
python 进程池pool使用详解
2020/10/15 Python
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
自我鉴定范文
2013/11/10 职场文书
生物科学专业个人求职信范文
2013/12/07 职场文书
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
爱国主义演讲稿
2014/05/07 职场文书
谢师宴答谢词
2015/01/05 职场文书
计生个人工作总结
2015/02/28 职场文书
新闻发布会新闻稿
2015/07/17 职场文书