快捷導(dǎo)航

Prototype使用指南之selector.js說明

更新時(shí)間：2008年10月26日 00:43:43 作者：

Selector是利用css selector來匹配選擇頁面元素的，所以要理解Selector首先應(yīng)該對css selector有所理解

下面是css2 selector的語法，當(dāng)然很多瀏覽器只是支持其中的一部分，Prototype 中的Selector主要支持tag選擇器、class選擇器和id選擇器，還有屬性(attribute)選擇器，基本上包含我們平時(shí)所用的所有類型

The following table summarizes CSS2 selector syntax, 詳細(xì)的可以看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 “l(fā)ang” 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對象具有下面兩個(gè)方法：

match(element)：元素是否與本selector匹配，在Element中已經(jīng)介紹了
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也有幾個(gè)靜態(tài)方法，它們分別是：

matchElements(elements, expression)：返回elements中符合expression的元素列表
findElement(elements, expression, index)：返回elements中符合expression的元素列表中索引為index的元素
findChildElements(element, expressions)：找出element的子孫元素中符合expressions的元素列表，其中expressions是一個(gè)expression數(shù)組，其中的expression支持"div li.#id"形式

$$方法：只是簡單的調(diào)用return Selector.findChildElements(document, $A(arguments))

雖然Selector有這么多方法，但是大部分都是內(nèi)部調(diào)用的，我們一般都很少使用，因?yàn)槲覀冇袀€(gè)一個(gè)方便的方法$$，對于絕大部分情況已經(jīng)足夠了