Prototype使用指南之selector.js


Posted in Javascript onJanuary 10, 2007

Selector是利用css selector来匹配选择页面元素的,所以要理解Selector首先应该对css selector有所理解,下面是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编程起步(第二课)
Feb 27 Javascript
JavaScript的Cookies
Jan 16 Javascript
Javascript 调试利器 Firebug使用详解六
Jul 05 Javascript
jQuery each()小议
Mar 18 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 Javascript
Prototype使用指南之dom.js
Jan 10 #Javascript
Prototype使用指南之ajax
Jan 10 #Javascript
Prototype使用指南之range.js
Jan 10 #Javascript
Prototype使用指南之hash.js
Jan 10 #Javascript
Prototype使用指南之array.js
Jan 10 #Javascript
Prototype使用指南之enumerable.js
Jan 10 #Javascript
Prototype使用指南之base.js
Jan 10 #Javascript
You might like
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
详解python中的Turtle函数库
2018/11/19 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
python tkinter窗口最大化的实现
2019/07/15 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
西班牙在线光学:Visual-Click
2020/06/22 全球购物
城市规划毕业生求职信
2013/10/10 职场文书
团委竞选演讲稿
2014/04/24 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
意向书范本
2014/07/29 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
身份证丢失证明
2015/06/19 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书