jQuery程式碼優化：選擇符篇

毫無疑問，jQuery的獨到之處就是它以集合為中心的操作。為了取得DOM物件集合，jQuery利用JavaScript不僅實現了（它誕生時）很多瀏覽器不支援的CSS選擇符，還實現了不少獨到的自定義選擇符，為在文件中查詢元素提供了極大的便利。本文就從選擇符的角度簡單探討一下優化jQuery程式碼的問題。

Sizzle的執行機制

jQuery從1.3開始把根據選擇符表示式查詢元素的程式碼獨立出來，也就是Sizzle引擎。當我們把一個選擇符表示式（比如"#id"、".class"、":nth-child(2)"）傳遞給$()函式時，Sizzle在內部會優先利用瀏覽器原生支援的DOM方法來查詢元素，以求得最大的執行速度。以下就是Sizzle會優先選用的幾個標準的原生方法（各個方法的用途不再贅述）：

• getElementById()
• getElementsByTagName()
• getElementsByClassName()
• querySelectorAll()

如果瀏覽器不支援某個方法，或者傳入的選擇符表示式不是標準選擇符（如":eq()"、":odd"或其他自定義選擇符），Sizzle就會使用document.getElementsByTagName('*')來取得文件中的所有元素，然後再遍歷並測試每個元素。顯然，這是萬不得已才會用的方法；可想而知，這個最笨的方法，效率也是最低的。

優化示例

舉個例子，假設我們要取得頁面表單中的所有的文字框，即：

<input type="text">

可以使用兩個選擇符：

• $('input[type="text"]')
• $('input:text')

第一個選擇符是標準的CSS屬性選擇符，第二個選擇符是自定義選擇符。根據前面對Sizzle引擎的分析可知，在大多數現代瀏覽器（支援原生querySelectorAll()方法的瀏覽器）中，第一個選擇符的速度比第二個要快很多。

再舉一個例子。假設有下面兩個jQuery查詢：

• $('input').eq(1)
• $('input:eq(1)')

第一個查詢先通過標準的CSS元素選擇符查詢所有input元素，然後再呼叫jQuery的eq()方法取得匹配結果中的第二個元素（eq()方法的索引引數是從0開始計算的）。第二個查詢則使用了自定義的偽類選擇符:eq()。通過測試可以看出，第一種方法的速度比第二種方法快得就更多了。

結論

要儘可能使用CSS規範中規定的選擇符，除非沒有標準選擇符，才考慮使用jQuery的自定義選擇符。

（注：本文基於《jQuery基礎教程（第3版）》相關章節內容編撰而成。）

---

相關連結：

• jQuery程式碼優化：遍歷篇
• jQuery程式碼優化：基本事件篇
• jQuery程式碼優化：事件委託篇