作家
登录

Prototype使用指南之selector.js

作者: 来源:www.28hudong.com 2013-03-30 03:49:34 阅读 我要评论

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有这么多方法,但是大部分都是内部调用的,我们一般都很少使用,因为我们有个一个方便的方法$$,对于绝大部分情况已经足够了

  推荐阅读

  JScript|Event]面向事件驱动的编程(二)--实例讲解:将span模拟成超连接

作者:泣红亭 在上一篇文章《面向事件驱动的编程》中我讲了三种将事件绑定到元素的方法,而推荐使用第三种方法,即使用attachEvent/addEventListener来绑定.上一篇文章的主旨是告诉大家如何使用事件,而这一篇文章的主>>>详细阅读


本文标题:Prototype使用指南之selector.js

地址:http://www.17bianji.com/kaifa2/JS/31115.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)