javascript $(selector)[0] 在 jQuery 中是什么意思？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32783869/
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
What does $(selector)[0] mean in jQuery?
提问by Jae Kim
The syntax that I don't understand is this:
我不明白的语法是这样的：
$("#profilePhotoFileUpload")[0]
I have been seeing this syntax pretty frequently and I've ignored it for a while because I never had to use it. But now, in order to understand the code from this post How do I upload an image using the Parse.com javascriptSDK?, I cannot ignore it any longer.
我经常看到这种语法，但我已经忽略了一段时间，因为我从来没有使用过它。但是现在，为了理解这篇文章中的代码如何使用 Parse.com javascriptSDK 上传图像？，不能再无视了。
I know that [0]this syntax is used to refer to an array usually. But it seems a little weird that a reference to an idwould generate an array of some sort.
我知道[0]这种语法通常用于引用数组。但是对 an 的引用id会生成某种类型的数组似乎有点奇怪。
采纳答案by Tushar
By appending [0]to the jQuery object will return the firstDOM element.
通过附加[0]到 jQuery 对象将返回第一个DOM 元素。
As you're using id selector here, there will be only one element in the array so using [0]makes sense. If you are selecting multiple elements you can also use any number which is between 0 and number of elements you can get corresponding DOM element.
当您在这里使用 id 选择器时，数组中将只有一个元素，因此使用[0]是有意义的。如果您选择多个元素，您还可以使用介于 0 和元素数量之间的任何数字，您可以获得相应的 DOM 元素。
From jQuery Docs
A jQuery object contains a collection of Document Object Model (DOM) elements that have been created from an HTML string or selected from a document. Since jQuery methods often use CSS selectors to match elements from a document, the set of elements in a jQuery object is often called a set of "matched elements" or "selected elements".
The jQuery object itself behaves much like an array; it has a
lengthproperty and the elements in the object can be accessed by their numeric indices[0]to[length-1]. Note that a jQuery object is not actually a Javascript Array object, so it does not have all the methods of a true Array object such asjoin().
jQuery 对象包含从 HTML 字符串创建或从文档中选择的文档对象模型 (DOM) 元素的集合。由于 jQuery 方法通常使用 CSS 选择器来匹配文档中的元素，因此 jQuery 对象中的元素集通常称为“匹配元素”或“选定元素”集。
jQuery 对象本身的行为很像一个数组；它有一个
length属性，对象中的元素可以通过它们的数字索引[0]来访问[length-1]。请注意，jQuery 对象实际上并不是 Javascript Array 对象，因此它没有真正的 Array 对象的所有方法，例如join().
回答by kolunar
Well, don't confuse jQuery Objectwith DOM node/element.
好吧，不要将jQuery Object与DOM node/element混淆。
thisshould be as simple as
this应该很简单
$(this)[0] === this
and
和
$("#target")[0] === document.getElementById("target");
e.g.
例如
// Setting the inner HTML with jQuery.
var target = document.getElementById("target");
// Comparing DOM elements.
alert($(target)[0] === target); // alerts "true"
// Comparing DOM element and jQuery element
alert($(target)[0] === $(target).eq(0)); // alerts "false"
We must keep in mind that both
$(target)[0]and$(target).get(0)return the same DOM element which has DOM properties like.innerHTMLand methods like.appendChild(), but not jQuery methods like.html()or.after()whereas$(target).eq(0)returns a jQuery object which has useful methods like.html()and.after().
我们必须牢记，无论
$(target)[0]和$(target).get(0)返回的有DOM属性，如相同的DOM元素.innerHTML以及类似的方法.appendChild()，但不是jQuery的方法，如.html()或.after()，而$(target).eq(0)回报它有像有用的方法jQuery对象.html()和.after()。
what's more
更重要的是
var logo1 = $("#logo");
var logo1Elem = logo1.get(0);
var logo2 = $("#logo");
var logo2Elem = $("#logo")[0];
Although logo1and logo2are created in the same way (and wrap the same DOM element), they are not the same object.
尽管logo1和logo2以相同的方式创建（并包装相同的 DOM 元素），但它们不是同一个对象。
// Comparing jQuery objects.
alert($("#logo") === $("#logo")); // alerts "false"
// Comparing DOM elements.
alert(logo1Elem === logo2Elem); // alerts "true"
Ref: https://learn.jquery.com/using-jquery-core/jquery-object/
参考：https: //learn.jquery.com/using-jquery-core/jquery-object/
回答by rphuber
According to the jQuery documentation the $() returns a collection of matched elements either found in the DOM based on passed argument(s) or created by passing an HTML string. By adding the [0] you take the collection wrapper off the element and just return the actual DOM element when dealing with an id. When dealing with a class you would return the element at the arrays position passed in through the bracket notation (in this case the first, since arrays are 0 based in JavaScript).
根据 jQuery 文档，$() 返回匹配元素的集合，这些元素要么基于传递的参数在 DOM 中找到，要么通过传递 HTML 字符串创建。通过添加 [0]，您可以从元素中移除集合包装器，并在处理 id 时返回实际的 DOM 元素。处理类时，您将返回通过括号表示法传入的数组位置处的元素（在本例中为第一个，因为基于 JavaScript 的数组为 0）。
回答by Zakaria Ra
In the case of an id selector, appending [0] to it has no sense because $("#theIdOfTheElement")will always return the first element.
在 id 选择器的情况下，将 [0] 附加到它是没有意义的，因为$("#theIdOfTheElement")它将始终返回第一个元素。
