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 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 Javascript
json的使用小结
Jun 08 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
原生javascript实现分页效果
Apr 21 Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
vue实现文件上传功能
Aug 13 Javascript
微信小程序云开发实现增删改查功能
May 17 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 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和MySql中计算时间差的方法
2011/04/22 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
JQUERY CHECKBOX全选,取消全选,反选方法三
2008/08/30 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
python下载文件记录黑名单的实现代码
2017/10/24 Python
浅析Python3爬虫登录模拟
2018/02/07 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
岗位竞聘演讲稿
2014/01/10 职场文书
2014婚礼司仪主持词
2014/03/14 职场文书
公司任命书范本
2014/06/04 职场文书
领导干部考核评语
2015/01/04 职场文书
分家协议书范本
2016/03/22 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书