jquery选择器$('#names')和$('input#names')的差异

Question

我在html中声明了一个复选框，如下所示：

<input id="names" name="names" type="checkbox" value="1">One</input>
<input id="names" name="names" type="checkbox" value="2">One</input>
<input id="names" name="names" type="checkbox" value="3">One</input>

我以为$('#names')会给我处理所有的checkbox元素，但它不会，但是$('input#names')会。

$('#names').length is 1.

和

$('input#names').length is 3

为什么会有所不同？jsfiddle：http://jsfiddle.net/Urbw5/8/

谢谢，克里斯。

Answer 1

区别是无关紧要的id values be unique within a document如果需要对输入进行分组，则必须使用id以外的其他方法(class在这方面经常被过度使用，但您也可以在结构上这样做-例如，给定容器中的所有input元素)。

您看到的结果不同的原因在于jQuery的选择器引擎(Sizzle)的优化方式。如果你传入一个简单的基于ID的选择器，Sizzle将使用document.getElementById (然后检查它返回的内容是否真的具有该id，因为在IE8之前IE中存在错误)。所以它返回一个元素。

但是，如果传入input#names这样的复合选择器，它就不会遵循这种优化路径，而是实际执行DOM搜索(直接在它自己的代码中搜索，或者在浏览器支持的情况下通过document.querySelectorAll搜索)。这通常涉及首先搜索所有匹配的元素(例如，所有input元素)，然后根据其他限定符过滤列表。因此，在您的测试浏览器上，Sizzle或浏览器的选择器引擎不会使选择器短路，即使它应该知道找到了一个匹配的元素，这就是它需要做的全部工作。

Answer 2

原因之一是这不是有效的HTML。id元素必须是唯一的。所以，当jQuery给你一个奇怪的结果时，我并不感到惊讶。如果您想要所有的“名称”复选框，您可能需要：

$("input[name='names']")

Answer 3

$('#names')导致jquery使用getElementById，这显然会返回单个元素，而$('input#names')将执行以下操作：getElementsByTagName，然后使用循环查找那些id为names的元素