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.validate1.9.0前台验证的使用介绍
Apr 26 Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
JS控制一个DIV层在指定时间内消失的方法
Feb 17 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 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 Image Resize图片大小调整的函数代码
2011/01/17 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
Python深入学习之上下文管理器
2014/08/31 Python
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
html5使用canvas画三角形
2014/12/15 HTML / CSS
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
简述数组与指针的区别
2014/01/02 面试题
中科创达面试题
2016/12/28 面试题
物业管理应届生求职信
2013/10/28 职场文书
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
怎样写好自我评价呢?
2014/02/16 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python
python套接字socket通信
2022/04/01 Python
关于Python使用turtle库画任意图的问题
2022/04/01 Python