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 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
js运动框架_包括图片的淡入淡出效果
May 11 Javascript
AngularJS的一些基本样式初窥
Jul 27 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
jQuery+ajax的资源回收处理机制分析
Jan 07 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 Javascript
vue+elementUI实现简单日历功能
Sep 24 Javascript
JavaScript canvas实现文字时钟
Jan 10 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 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常用的小程序代码段
2015/11/14 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
node.js中的require使用详解
2014/12/15 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
详解JavaScript中的六种错误类型
2017/09/21 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
详解JavaScript的变量
2019/04/04 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
python使用turtle绘制分形树
2018/06/22 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
银行见习期自我鉴定
2014/01/29 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python