jQuery:掌握選取器

選取器至少可以追溯到“CSS選取器”。jQuery的原始碼中內嵌了一個叫Sizzle的對象，其實就是選取器了。在jQuery官網上顯示Sizzle屬於“Other jQuery Foundation Projects”，Sizzle能夠獨立為一個單獨的項目，由此不難體會到選取器的重要性。看看下面三個頁面，相比之下，jQuery選取器官方文檔看起來是最“亂”的。http://www.w3.org/TR/css3-selectorsCSS選取器W3C標準文檔 https://github.com/jquery/sizzle/wiki/Sizzle-DocumentationSizzle文檔 http://api.jquery.com/category/selectors/jQuery選取器官方文檔jquery1.9.0原始碼有這樣一行：jQuery.find = Sizzle;  匯入jquery.js和sizzle.js，可以看到jQuery.find和Sizzle確實是一回事。 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] attr        |--[function] compile        |--[function] contains        |--[function] error        |--[function] getText        |--[function] isXML        |--[function] matches        |--[function] matchesSelector        |--[function] setDocument        |--[function] uniqueSort        |--[object] selectors 既然Sizzle自稱"supports virtually all CSS 3 Selectors"，那麼不妨就參考下面W3C描述吧，再難找到更好的文檔片斷了（點選連結可查看文法細節），不是嗎？ 模式 含義 連結 版本* 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 element 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 referring 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 states 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-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 Adjacent sibling combinator 2E ~ F an F element preceded by an E element General sibling combinator 3需注意，jQuery()和jQuery.find()返回的物件類型是不一樣的，前者是jQuery.fn，後者是Sizzle。例如，jQuery('html body div#dbg');和jQuery.find('html body div#dbg');都是“選擇”了id為dbg的div，但是前者表示為jQuery.fn對象，後者表示為Sizzle對象。選取器的文法是有標準的，逐一嘗試每一種寫法沒有必要，今天學會了也許明天就忘記，不如有文檔在手，用到時再翻閱。需要想一想的是選取器的價值所在，從根本上來講，選取器就是協助我們避免了遍曆DOM（或者也包括XML?）的麻煩。一個兩個的遍曆代碼其實也不難寫，但是網頁上的互動多了就麻煩了，下面是一個隔行選取的代碼片斷，不難體會其中運用選取器的奧妙所在：<div> www.2cto.com    <b>...測試1...</b>     <b>...測試2...</b>     <b>...測試3...</b>     <b>...測試4...</b> </div>  <script language="javascript">       var $myObj = jQuery('div b:nth-child(even)');//選取器      $myObj.each(          function(i){              var tTemp = jQuery(this).text();              iJs.put(tTemp);//輸出選擇結果          });  </script> 調試資訊:     ...測試2...    ...測試4...