最有效的jQuery選擇器

Question

以下哪個選擇器在jQuery中最有效率？或者有什麼真正的區別？

1. input[type=text]
2. [type=text]
3. input:text
4. :text

當然，元素的ID選擇將是最好的，因爲翻譯可以使用getElementById()，但我想了解上述選擇器的一般差異。

Answer 1

下面是我設置的快速test case（注意，我已經在屬性名稱選擇器周圍添加了必要的引號）。它看起來像第一種方法是最快的，這是真正的預期（因爲其他人暗示通用*選擇器），其次是[type='text']，最後是:text。

實際上，差異非常小，選擇哪個並不重要。

下面是截圖（編輯 - 我已經在第4方法添加看到更新的問題後）：

Answer 2

其分解：

input[type=text] 
// and 
[type=text] 

都attribute selectors 。第一個更快，因爲該屬性的查找已經縮小到輸入元素。

input:text 
:text 

是jQuery擴展。從:text selector docs：

因爲：文字是一個jQuery的擴展，而不是部分的CSS 規範，使用查詢：文本不能採取由本機DOM querySelectorAll（） 方法提供的 性能提升的優勢。爲了在現代瀏覽器中獲得更好的性能，請改用[type =「text」] 。

所以這些選擇器比較慢（而縮小到輸入元素的速度也會更快）。