最有效的jQuery选择器

Question

以下哪个选择器在jQuery中效率最高？或者有什么真正的区别吗？

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

当然，元素上的ID选择器最好，因为解释器可以使用getElementById()，但我试图理解上述选择器的一般差异。

Answer 1

这是我设置的快速test case（请注意，我在属性名称选择器周围添加了必要的引号）。看起来第一种方法最快，实际上是预期的（因为其他方法意味着通用的*选择器），其次是[type='text']，最后一位是:text。

实际上，差异是如此微小，你选择的并不重要。

这是一个截图（编辑 - 在看到问题的更新后我在第四种方法中添加了）：

Answer 2

打破它：

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

都是attribute selectors。第一个更快，因为属性的查找已经缩小到输入元素。

input:text
:text

是jQuery扩展。来自:text selector docs：

  

因为：text是jQuery扩展而不是CSS的一部分   规范，查询使用：文本无法利用   本机DOM querySelectorAll（）提供的性能提升   方法。为了在现代浏览器中获得更好的性能，请使用[type =“text”]   代替。

所以这些选择器速度较慢（而将其缩小到输入元素的速度也会更快）。