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 相关文章推荐
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
简单的过滤字符串中的HTML标记
2006/12/25 PHP
一个捕获函数输出的函数
2007/02/14 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
Python访问纯真IP数据库脚本分享
2015/06/29 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
Scrapy框架使用的基本知识
2018/10/21 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
Django实现基于类的分页功能
2019/10/31 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
给全校老师的建议书
2014/03/13 职场文书
给孩子的新年寄语
2014/04/08 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
接收函格式
2015/01/30 职场文书
家长通知书家长意见
2015/06/03 职场文书
SQL Server 中的事务介绍
2022/05/20 SQL Server