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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6993855/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 21:40:02  来源:igfitidea点击:

Do jQuery selectors return an array of HTML Element or jQuery Objects?

jquery

提问by rkw

What is stored in Q?

存储在什么中Q

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

I can access each HTML element by using Q[index], similar to Q2[index]; which makes it seem like Qis an array of HTML Elements.

我可以通过使用访问每个 HTML 元素Q[index],类似于Q2[index]; 这使它看起来像是Q一个 HTML 元素数组。

On the other hand, I can do Q.filter(), but I cannotdo Q2.filter(); which makes it seem like Qis an array of jQuery objects.

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

Or is it both, where Qis a jQuery object that holds a bunch of HTML elements? If this was the case, wouldn't console.log()detect Qas an object with a collection of objects inside it? This fiddle, http://jsfiddle.net/rkw79/3s7tw/, shows that they are the same.

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

Note: I am aware that Q.eq(index)will return an object that can use jQuery methods. I'm just wondering what exactly is Q

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

回答by Mircea Nistor

The result is a jQueryobject that behaves like both an array of HTMLElementswhich you get using []and an arrayof jQueryobjects which you get using eq(index);

其结果是一个jQuery对象,该对象像两者的阵列的行为的HTMLElements,你开始使用[]arrayjQuery,你得到使用对象eq(index);

回答by James Allardice

In your example, q(the jQuery object) is an array-like object, which is effectively a wrapper around the set of selected DOM nodes. Consider this example:

在您的示例中,q(jQuery 对象)是一个类似数组的对象,它实际上是围绕所选 DOM 节点集的包装器。考虑这个例子:

HTML:

HTML:

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

JS:

JS:

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

The second example above accesses the first raw DOM element in the collection (in this case, there is only one). You can achieve the same by using the jQuery get(index)method, but I used the normal array syntax to demonstrate that the jQuery object is similar to an array.

上面的第二个示例访问集合中的第一个原始 DOM 元素(在本例中,只有一个)。您可以使用 jQueryget(index)方法实现相同的效果,但我使用了普通的数组语法来演示 jQuery 对象类似于数组。

The jQuery wrapper object is what allows you to apply other jQuery methods to the matched set of elements. The DOM elements themselves do not have those methods, which is why in your example Q2.filter()does not work.

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

Q2is a raw DOM element. As a jQuery object is effectively a wrapper around a set of DOM elements, it's entirely possible to do this:

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

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

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

In that example, getElementByIdreturns the DOM element, which is then passed into the jQuery function, which returns the array-like jQuery object, allowing you to call other jQuery methods.

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

回答by Ariel

Q is an object. It cheats and pretends to be an array be implementing all the usual array functions so firebug treats it that way. (Or maybe it starts as an array, but with stuff added.)

Q 是一个对象。它欺骗并假装是一个实现所有常用数组函数的数组,因此 firebug 会这样对待它。(或者它可能从一个数组开始,但添加了一些东西。)

It contains a stack with all the previous selected elements (so you can use .end()) it has an actual array of the matched elements, and that's about it.

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

Try:

尝试:

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

And you will see all the functions, etc.

您将看到所有功能等。