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复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
javascript实现表单验证
Jan 29 Javascript
JavaScript如何实现组合列表框中元素移动效果
Mar 01 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
vue.js的提示组件
Mar 02 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
vue forEach循环数组拿到自己想要的数据方法
Sep 21 Javascript
javascript事件监听与事件委托实例详解
Aug 16 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 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 强制下载文件实现代码
2013/10/28 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
JS 建立对象的方法
2007/04/21 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
JS实现倒计时和文字滚动的效果实例
2014/10/29 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
linux下安装easy_install的方法
2013/02/10 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
Pytorch to(device)用法
2020/01/08 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
怎样实现H5+CSS3手指滑动切换图片的示例代码
2019/05/05 HTML / CSS
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
专科毕业生学习生活的自我评价
2013/10/26 职场文书
临床医学系毕业生推荐信
2013/11/09 职场文书
数学国培研修感言
2014/02/13 职场文书
诉前财产保全担保书
2014/05/20 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
2016国培研修心得体会
2016/01/08 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL