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定义函数的方法
Dec 06 Javascript
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 Javascript
openlayers实现地图测距测面
Sep 25 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
转换中文日期的PHP程序
2006/10/09 PHP
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
django实现日志按日期分割
2020/05/21 Python
Python如何给你的程序做性能测试
2020/07/29 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
英国行业制服供应商:Alexandra
2019/09/14 全球购物
怎样从/向数据文件读/写结构
2014/11/23 面试题
测绘工程系学生的自我评价
2013/11/30 职场文书
经理秘书找工作求职信
2013/12/19 职场文书
舞出我人生观后感
2015/06/16 职场文书
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL