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 相关文章推荐
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
jQuery 操作option的实现代码
Mar 03 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 Javascript
vue2.x 对象劫持的原理实现
Apr 19 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 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
DedeCms模板安装/制作概述
2007/03/11 PHP
php简单提示框alert封装函数
2010/08/08 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
jquery ajax执行后台方法
2010/03/18 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
使用Python解析JSON数据的基本方法
2015/10/15 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
详解Python locals()的陷阱
2019/03/26 Python
django连接oracle时setting 配置方法
2019/08/29 Python
python config文件的读写操作示例
2019/09/27 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
处理textarea中的换行和空格
2019/12/12 HTML / CSS
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
设置器与访问器的定义以及各自特点
2016/01/08 面试题
国际政治个人自荐信范文
2013/11/26 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
财务管理专业求职信
2014/06/11 职场文书
学校个人对照检查材料
2014/08/26 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
2015初中团委工作总结
2015/07/28 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python
MySQL派生表联表查询实战过程
2022/03/20 MySQL