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 相关文章推荐
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
javascript中关于执行环境的杂谈
Aug 14 Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
微信小程序 页面滑动事件的实例详解
Oct 12 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
vue自定义一个v-model的实现代码
Jun 21 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
php生成随机数或者字符串的代码
2008/09/05 PHP
php 在文件指定行插入数据的代码
2010/05/08 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
javascript 流畅动画实现原理
2009/09/08 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
JS继承用法实例分析
2015/02/05 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
Python中实现的RC4算法
2015/02/14 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
Python操作Excel的学习笔记
2021/02/18 Python
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
广告学专业自荐信范文
2014/02/24 职场文书
英文自荐信范文
2015/03/25 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python