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 document.referrer 用法
Apr 30 Javascript
js的2种继承方式详解
Mar 04 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
基于JS判断对象是否是数组
Jan 10 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
基于mysql的论坛(7)
2006/10/09 PHP
基于jquery的滚动新闻列表
2010/06/19 Javascript
js控制table合并具体实现
2014/02/20 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
Bootstrap基础学习
2015/06/16 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
Vue父组件监听子组件生命周期
2020/09/03 Javascript
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
python基于ID3思想的决策树
2018/01/03 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
Flask使用Pyecharts在单个页面展示多个图表的方法
2019/08/05 Python
Python  Django 母版和继承解析
2019/08/09 Python
python修改文件内容的3种方法详解
2019/11/15 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
yy生日主持词
2014/03/20 职场文书
商铺门前三包责任书
2014/07/25 职场文书
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android