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 相关文章推荐
JavaScript的Function详细
Nov 14 Javascript
javascript 建设银行登陆键盘
Jun 10 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
浅谈javascript中的闭包
May 13 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
JavaScript中日期的相关操作方法总结
Oct 24 Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
vue cli4.0项目引入typescript的方法
Jul 17 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中文件缓存转内存缓存的方法
2011/12/06 PHP
解析php中const与define的应用区别
2013/06/18 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
js树形控件脚本代码
2008/07/24 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
TypeScript入门-接口
2017/03/30 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
SVG实现时钟效果
2018/07/17 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
python生成excel的实例代码
2017/11/08 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
浅谈在JupyterNotebook下导入自己的模块的问题
2020/04/16 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
小学五一劳动节活动总结
2015/02/09 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis