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 代码压缩工具小结
Feb 27 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
Mar 06 Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 Javascript
JavaScript中Require调用js的实例分享
Oct 27 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 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文件上传表单摘自drupal的代码
2011/02/15 PHP
PHP错误机制知识汇总
2016/03/24 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
js精度溢出解决方案
2012/12/02 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
js this函数调用无需再次抓获id,name或标签名
2014/03/03 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
浅谈Redux中间件的实践
2018/07/27 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
微信小程序实现图片上传
2019/05/23 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
PyQt5响应回车事件的方法
2019/06/25 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
教师岗位职责
2013/11/17 职场文书
连锁酒店店长职责范本
2014/02/13 职场文书
我的中国梦演讲稿1000字
2014/08/19 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
2015年护士节活动总结
2015/02/10 职场文书
运动会观后感
2015/06/09 职场文书
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android
Go语言编译原理之源码调试
2022/08/05 Golang
js 实现验证码输入框示例详解
2022/09/23 Javascript