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 Demo模态窗口
Dec 06 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
javascript使用prototype完成单继承
Dec 24 Javascript
js实现的页面矩阵图形变换特效
Jan 26 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
angular.js实现购物车功能
Oct 23 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 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获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
解析CodeIgniter自定义配置文件
2013/06/18 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
详解Bootstrap glyphicons字体图标
2016/01/04 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
pyqt4教程之widget使用示例分享
2014/03/07 Python
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
python根据京东商品url获取产品价格
2015/08/09 Python
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
python生成二维码的实例详解
2017/10/29 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
python计算两个地址之间的距离方法
2018/06/09 Python
python基础学习之如何对元组各个元素进行命名详解
2018/07/12 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
会计的岗位职责
2014/03/15 职场文书
先进典型事迹材料
2014/12/29 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书