当前位置：首页 > 资讯 > 技术文档

Prototype使用指南之selector.js说明

时间：2021-08-24 22:05 编辑：来源：阅读：
扫一扫，手机访问

摘要：Prototype使用指南之selector.js说明

下面是css2 selector的语法，当然很多浏览器只是支持其中的一部分，Prototype 中的Selector主要支持tag选择器、class选择器和id选择器，还有属性(attribute)选择器，基本上包含我们平时所用的所有类型 The following table summarizes CSS2 selector syntax, 详细的可以看[url=http://www.w3.org/TR/REC-CSS2/selector.html]http://www.w3.org/TR/REC-CSS2/selector.html[/url]:

Pattern	Meaning	Described in section
*	Matches any element.	[url=http://www.7tt.com.cn/perol/2006/12/01/prototype_selector_javascript/#universal-selector]Universal selector[/url]
E	Matches any E element (i.e., an element of type E).	[url=http://www.7tt.com.cn/perol/2006/12/01/prototype_selector_javascript/#type-selectors]Type selectors[/url]
E F	Matches any F element that is a descendant of an E element.	[url=http://www.7tt.com.cn/perol/2006/12/01/prototype_selector_javascript/#descendant-selectors]Descendant selectors[/url]
E > F	Matches any F element that is a child of an element E.	[url=http://www.7tt.com.cn/perol/2006/12/01/prototype_selector_javascript/#child-selectors]Child selectors[/url]
E:first-child	Matches element E when E is the first child of its parent.	[url=http://www.7tt.com.cn/perol/2006/12/01/prototype_selector_javascript/#first-child]The :first-child pseudo-class[/url]
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).	[url=http://www.7tt.com.cn/perol/2006/12/01/prototype_selector_javascript/#link-pseudo-classes]The link pseudo-classes[/url]
E:active E:hover E:focus	Matches E during certain user actions.	[url=http://www.7tt.com.cn/perol/2006/12/01/prototype_selector_javascript/#dynamic-pseudo-classes]The dynamic pseudo-classes[/url]
E:lang(c)	Matches element of type E if it is in (human) language c (the document language specifies how language is determined).	[url=http://www.7tt.com.cn/perol/2006/12/01/prototype_selector_javascript/#lang]The :lang() pseudo-class[/url]
E + F	Matches any F element immediately preceded by an element E.	[url=http://www.7tt.com.cn/perol/2006/12/01/prototype_selector_javascript/#adjacent-selectors]Adjacent selectors[/url]
E[foo]	Matches any E element with the “foo” attribute set (whatever the value).	[url=http://www.7tt.com.cn/perol/2006/12/01/prototype_selector_javascript/#attribute-selectors]Attribute selectors[/url]
E[foo=”warning”]	Matches any E element whose “foo” attribute value is exactly equal to “warning”.	[url=http://www.7tt.com.cn/perol/2006/12/01/prototype_selector_javascript/#attribute-selectors]Attribute selectors[/url]
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”.	[url=http://www.7tt.com.cn/perol/2006/12/01/prototype_selector_javascript/#attribute-selectors]Attribute selectors[/url]
E[lang\|=”en”]	Matches any E element whose “lang” attribute has a hyphen-separated list of values beginning (from the left) with “en”.	[url=http://www.7tt.com.cn/perol/2006/12/01/prototype_selector_javascript/#attribute-selectors]Attribute selectors[/url]
DIV.warning	[i]HTML only[/i]. The same as DIV[class~=”warning”].	[url=http://www.7tt.com.cn/perol/2006/12/01/prototype_selector_javascript/#class-html]Class selectors[/url]
E#myid	Matches any E element ID equal to “myid”.	[url=http://www.7tt.com.cn/perol/2006/12/01/prototype_selector_javascript/#id-selectors]ID selectors[/url]

Selector中包含Selector对象和类， Selector对象具有下面两个方法：

[b]match(element)：[/b]元素是否与本selector匹配，在Element中已经介绍了 [b]findElements(parentNode)：[/b]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也有几个静态方法，它们分别是：

[b]matchElements(elements, expression)：[/b]返回elements中符合expression的元素列表 [b]findElement(elements, expression, index)：[/b]返回elements中符合expression的元素列表中索引为index的元素 [b]findChildElements(element, expressions)：[/b]找出element的子孙元素中符合expressions的元素列表，其中expressions是一个expression数组，其中的expression支持"div li.#id"形式 [b]$$方法：[/b]只是简单的调用return Selector.findChildElements(document, $A(arguments)) 虽然Selector有这么多方法，但是大部分都是内部调用的，我们一般都很少使用，因为我们有个一个方便的方法$$，对于绝大部分情况已经足够了

全部评论(0)

上一篇：C#职责链模式实例详解
下一篇：prototype1.5 初体验第1/2页

资讯排行榜
更多>>