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 相关文章推荐
js 日期转换成中文格式的函数
Jul 07 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
javascript数组详解
Oct 22 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 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/12/13 PHP
PHP 字符串分割和比较
2009/10/06 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
JS根据年月获得当月天数的实现代码
2014/07/03 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
详解如何让Express支持async/await
2017/10/09 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
Python 读写文件的操作代码
2018/09/20 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
详解Python3中的 input() 函数
2020/03/18 Python
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
婚礼主持结束词
2014/03/13 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
爱心捐款感谢信
2015/01/20 职场文书
小鞋子观后感
2015/06/05 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
年终工作总结范文
2019/06/20 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
再谈python_tkinter弹出对话框创建
2022/03/20 Python
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS