Prototype使用指南之selector.js说明


Posted in Javascript onOctober 26, 2008

下面是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 相关文章推荐
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
jquery.tmpl JQuery模板插件
Oct 10 Javascript
jQuery UI 实现email输入提示实例
Aug 15 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
js实现可控制左右方向的无缝滚动效果
May 29 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
浅谈vue-router 路由传参的方法
Dec 27 Javascript
prototype Element学习笔记(Element篇三)
Oct 26 #Javascript
prototype Element学习笔记(篇二)
Oct 26 #Javascript
prototype Element学习笔记(篇一)
Oct 26 #Javascript
JS对URL字符串进行编码/解码分析
Oct 25 #Javascript
在html页面中包含共享页面的方法
Oct 24 #Javascript
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 #Javascript
Javascript客户端将指定区域导出到Word、Excel的代码
Oct 22 #Javascript
You might like
PHP自动更新新闻DIY
2006/10/09 PHP
MySQL时间字段究竟使用INT还是DateTime的说明
2012/02/27 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
深入理解Javascript中的this关键字
2015/03/27 Python
详解python中字典的循环遍历的两种方式
2017/02/07 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
python将字符串以utf-8格式保存在txt文件中的方法
2018/10/30 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
python二进制文件的转译详解
2019/07/03 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
乐高官方旗舰店:LEGO积木玩具
2019/04/06 全球购物
两只小狮子教学反思
2014/02/05 职场文书
小学五年级学生评语
2014/04/22 职场文书
投资入股合作协议书
2014/10/28 职场文书
心术观后感
2015/06/11 职场文书
小学感恩主题班会
2015/08/12 职场文书
mysql如何能有效防止删库跑路
2021/10/05 MySQL