The following is the css2 selector syntax. Of course, many browsers only support part of the syntax. Selector in Prototype mainly supports tag selector, class Selector and id selector, and attribute Selector, it basically includes all the types we usually use
The following table summarizes CSS2 selector syntax. For details, see 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 contains Selector objects and classes,
The Selector object has the following two methods:
Match (element ):Whether the Element matches this selector.
FindElements (parentNode ):All child element lists in parentNode that match this selector
The usage is also simple var s = new Selector (expression); s. match (element); s. findElements ($ (element), where expression can be "div", "# id ",". class "," div # id "," div [attribute] "," div [attribute = fff] "," div [attribute! = Sdf]"
Selector also has several static methods, which are:
MatchElements (elements, expression ):Returns the list of elements that match the expression in elements.
FindElement (elements, expression, index ):Returns the index element in the expression-compliant element list of elements.
FindChildElements (element, expressions ):Find out the list of expressions-compliant elements in the child element of the element. expressions is an expression array, and the expression supports the form of "div li. # id ".
$ Method:Simply call return Selector. findChildElements (document, $ A (arguments ))
Although Selector has so many methods, most of them are called internally and we usually seldom use them because we have a convenient method $, which is sufficient for most cases.