jQuery 选择器是否返回 HTML 元素或 jQuery 对象数组？答案

【问题标题】：Do jQuery selectors return an array of HTML Element or jQuery Objects?jQuery 选择器是否返回 HTML 元素或 jQuery 对象数组？
【发布时间】：2011-10-23 01:24:28
【问题描述】：

Q 中存储了什么？

Q = $('div');
Q2 = document.getElementsByTagName('div');

我可以使用Q[index]访问每个HTML元素，类似于Q2[index]；这使得Q 看起来像是一个 HTML 元素数组。

另一方面，我可以做Q.filter()，但我不能做Q2.filter()；这使得Q 看起来像是一个 jQuery 对象数组。

或者两者兼而有之，Q 是一个包含一堆 HTML 元素的 jQuery 对象？如果是这种情况，console.log() 不会将Q 检测为其中包含对象集合的对象吗？这个小提琴http://jsfiddle.net/rkw79/3s7tw/ 表明它们是相同的。

注意：我知道Q.eq(index) 将返回一个可以使用jQuery 方法的对象。我只是想知道Q究竟是什么@

【问题讨论】：

标签： jquery

【解决方案1】：

结果是一个jQuery 对象，它的行为类似于使用[] 获得的HTMLElements 数组和使用eq(index) 获得的jQuery 对象的array；

【讨论】：

我还要注意，迭代器'Q.each()' 将 HTMLElement 对象传递给回调，因为它像数组一样遍历 Q。当我第一次使用 jQuery 时，这有点出乎我的意料，尽管如果你理解它把它当作一个数组来处理，那就很有意义了。

【解决方案2】：

在您的示例中，q（jQuery 对象）是一个 类数组对象，它实际上是一组选定 DOM 节点的包装器。考虑这个例子：

HTML：

<div id="example"></div>

JS：

alert($("#example")) //Alerts something like "Object"
alert($("#example")[0]) //Alerts something like "HTMLDivElement"
alert(document.getElementById("example")); //Alerts something like "HTMLDivElement"

上面的第二个示例访问集合中的第一个原始 DOM 元素（在本例中，只有一个）。使用 jQuery 的get(index) 方法也可以达到同样的效果，但是我使用了普通的数组语法来演示 jQuery 对象类似于数组。

jQuery 包装器对象允许您将其他 jQuery 方法应用于匹配的元素集。 DOM 元素本身没有这些方法，这就是为什么在您的示例中 Q2.filter() 不起作用。

Q2 是一个原始 DOM 元素。由于 jQuery 对象实际上是一组 DOM 元素的包装器，因此完全可以这样做：

alert($(document.getElementById("example"))); //Alerts something like "Object"

在该示例中，getElementById 返回 DOM 元素，然后将其传递给 jQuery 函数，该函数返回类似数组的 jQuery 对象，允许您调用其他 jQuery 方法。

【讨论】：

【解决方案3】：

Q 是一个对象。它欺骗并伪装成一个数组来实现所有常用的数组函数，所以 firebug 就是这样对待它的。（或者它可能从一个数组开始，但添加了一些东西。）

它包含一个包含所有先前选定元素的堆栈（因此您可以使用.end()）它具有匹配元素的实际数组，仅此而已。

试试：

for(i in $('body')) console.log(i)

你会看到所有的功能，等等。

【讨论】：