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 相关文章推荐
JavaScript CSS修改学习第二章 样式
Feb 19 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
js获取html页面代码中图片地址的实现代码
Mar 05 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 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注入实例
2006/10/09 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
javascript模块化简单解析
2016/04/07 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
Python记录详细调用堆栈日志的方法
2015/05/05 Python
windows下python安装pip图文教程
2018/05/25 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
Python如何访问字符串中的值
2020/02/09 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
护理专业推荐信
2013/11/07 职场文书
一名毕业生的自我鉴定
2013/12/04 职场文书
运动会稿件100字
2014/02/21 职场文书
个人委托书怎么写
2014/04/04 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书