JQuery: Master Selector

The selector can be traced back to at least "CSS selector ". A Sizzle object is embedded in jQuery's source code, which is actually a selector. On the official jQuery website, Sizzle belongs to "Other jQuery Foundation Projects". Sizzle can be a separate project, so it is not difficult to understand the importance of selector. Take a look at the following three pages. In contrast, the official jQuery selector documentation seems to be the most "messy. Http://www.w3.org/tr/css3-selectorscssselector w3cstandard documentation export character = Sizzle; import jquery. js and sizzle. js, you can see that jQuery. find and Sizzle are indeed the same thing. IJs. showObjectNames ("window. jQuery. find "); iJs. showObjectNames ("window. sizzle "); [Object] window. jQuery. find | -- [function] attr | -- [function] compile | -- [function] contains | -- [function] error | -- [function] getText | -- [function] isXML | --[ function] matches | -- [function] matchesSelector | -- [function] setDocument | -- [function] uniqueSort | -- [object] selectors [Object] window. sizzle | -- [function] att R | -- [function] compile | -- [function] contains | -- [function] error | -- [function] getText | -- [function] isXML | -- [function] matches | --[ function] matchesSelector | -- [function] setDocument | -- [function] uniqueSort | -- [object] selectors since Sizzle claims to be "supports virtually all CSS 3 Selectors ", for more information, see the W3C description below (click the link to view the syntax details). Isn't it? Schema meaning link version * any element Universal selector 2E an element of type E Type selector 1E [foo] an E element with a "foo" attribute Attribute selectors 2E [foo = "bar"] an E element whose "foo" attribute value is exactly equal to "bar" Attribute selectors 2E [foo ~ = "Bar"] an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar" Attribute selectors 2E [foo ^ = "bar"] an E element whose "foo" attribute value begins exactly with the string "bar" Attribute selectors 3E [foo $ = "bar"] an E element whose "foo" attribute value ends exactly with the string "bar" Attribute selectors 3E [foo * = "bar"] an E element Whose "foo" attribute value contains the substring "bar" Attribute selectors 3E [foo | = "en"] an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en" Attribute selectors 2E: root an E element, root of the document Structural pseudo-classes 3E: nth-child (n) an E element, the n-th child of its parent Structural pseudo-classes 3E: nth-last-child (n) an E Element, the n-th child of its parent, counting from the last one Structural pseudo-classes 3E: nth-of-type (n) an E element, the n-th sibling of its type Structural pseudo-classes 3E: nth-last-of-type (n) an E element, the n-th sibling of its type, counting from the last one Structural pseudo-classes 3E: first-child an E element, first child of its parent Structural pseudo-classes 2E: last-child an E Element, last child of its parent Structural pseudo-classes 3E: first-of-type an E element, first sibling of its type Structural pseudo-classes 3E: last-of-type an E element, last sibling of its type Structural pseudo-classes 3E: only-child an E element, only child of its parent Structural pseudo-classes 3E: only-of-type an E element, only sibling of its type Structural pseudo-classes 3E: empty an E el Ement that has no children (including text nodes) Structural pseudo-classes 3E: link an E element being the source anchor of a hyperlink of which the target is not yet visited (: link) or already visited (: visited) The link pseudo-classes 1E: visitedE: active an E element during certain user actions The user action pseudo-classes 1 and 2E: hoverE: focusE: target an E element being the target of the refer Ring URI The target pseudo-class 3E: lang (fr) an element of type E in language "fr" (the document language specifies how language is determined) The: lang () pseudo-class 2E: enabled a user interface element E which is enabled or disabled The UI element states pseudo-classes 3E: disabledE: checked a user interface element E which is checked (for instance a radio-button or checkbox) The UI element state S pseudo-classes 3E: first-line the first formatted line of an E element The: first-line pseudo-element 1E :: first-letter the first formatted letter of an E element The: first-letter pseudo-element 1E: before generated content before an E element The: before pseudo-element 2E :: after generated content after an E element The: after pseudo-element 2E. warning an E element whose class is "warning "( The document language specifies how class is determined ). class selectors 1E # myid an E element with ID equal to "myid ". ID selectors 1E: not (s) an E element that does not match simple selector s Negation pseudo do-class 3E F an F element descendant of an E element Descendant combinator 1E> F an F element child of an E element Child combinator 2E + F an F element immediately preceded by an E element Djacent sibling combinator 2E ~ F an F element preceded by an E element General sibling combinator 3 Note that jQuery () and jQuery. the object types returned by find () are different. The former is jQuery. fn, Which is Sizzle. For example, jQuery ('html body div # dbg'); and jQuery. find ('html body div # dbg'); all are "selected" div with id dbg, but the former is represented as jQuery. fn object, which is a Sizzle object. The selector syntax is standard. It is not necessary to try every writing method one by one. If you have learned it today, you may forget it tomorrow. It is better to have a document in hand and read it later. What needs to be considered is the value of the selector. Basically, the selector helps us avoid traversing the DOM (or also including XML ?). The traversal code of one or two is not difficult to write, but the interaction on the Web page is too complicated. Below is a piece of code selected by the line. It is not difficult to understand the mysteries of using selector: <div> www.2cto.com <B>... test 1... </B> <B>... test 2... </B> <B>... test 3... </B> <B>... test 4... </B> </div> <script language = "javascript"> var $ myObj = jQuery ('div B: nth-child (even )'); // selector $ myObj. each (function (I) {var tTemp = jQuery (this ). text (); iJs. put (tTemp); // output selection result}); </script> debugging information :... test 2 ...... test 4...