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 25 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
js微信支付实现代码
Dec 22 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
JS实现碰撞检测的方法分析
Jan 19 Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 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事务实例解析
2014/09/08 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
详解vue slot插槽的使用方法
2017/06/13 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
Python常用模块介绍
2014/11/21 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
python add_argument()用法解析
2020/01/29 Python
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
英国家居装饰品、户外家具和玻璃器皿购物网站:Rinkit.com
2019/11/04 全球购物
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
文明生主要事迹
2014/05/25 职场文书
委托培训协议书
2014/11/17 职场文书
董事长新年致辞
2015/07/29 职场文书