Question

我不理解的语法是：

$("#profilePhotoFileUpload")[0]

我经常看到这种语法而且我已经暂时忽略了它，因为我从来没有使用它。但是现在，为了理解这篇文章How do I upload an image using the Parse.com javascriptSDK?中的代码，我不能再忽视它了。

我知道[0]此语法通常用于引用数组。但是对id的引用会生成某种数组似乎有点奇怪。

Answer 1

将[0]附加到jQuery对象将返回第一个 DOM元素。

当你在这里使用id选择器时，数组中只有一个元素，因此使用[0]是有意义的。如果您选择多个元素，您还可以使用介于0和元素数量之间的任何数字，您可以获得相应的DOM元素。

来自jQuery Docs

jQuery对象包含一组文档对象模型（DOM）元素，这些元素是从HTML字符串创建的或从文档中选择的。由于jQuery方法通常使用CSS选择器来匹配文档中的元素，因此jQuery对象中的元素集通常称为“匹配元素”或“选定元素”。

jQuery对象本身就像一个数组;它具有length属性，并且可以通过数字索引[0]到[length-1]访问对象中的元素。请注意，jQuery对象实际上不是Javascript Array对象，因此它没有真正的Array对象的所有方法，例如join()。

Answer 2

好吧，不要将 jQuery Object 与 DOM node/element 混淆。

this应该像

一样简单

$(this)[0] === this

和

$("#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"

我们必须牢记$(target)[0]和$(target).get(0) 返回具有DOM属性的相同DOM元素，如.innerHTML 和.appendChild()之类的方法，但不像jQuery方法 .html()或.after()而$(target).eq(0)返回jQuery 具有有用方法的对象，例如.html()和.after()。

更多

var logo1 = $("#logo");
var logo1Elem = logo1.get(0);

var logo2 = $("#logo");
var logo2Elem = $("#logo")[0];

虽然logo1和logo2以相同的方式创建（并包装相同的DOM元素），但它们不是同一个对象。

// Comparing jQuery objects. 
alert($("#logo") === $("#logo")); // alerts "false"

// Comparing DOM elements.     
alert(logo1Elem === logo2Elem); // alerts "true"

参考：https://learn.jquery.com/using-jquery-core/jquery-object/

Answer 3

根据jQuery文档，$（）返回匹配元素的集合，这些元素可以在DOM中根据传递的参数找到，也可以通过传递HTML字符串来创建。通过添加[0]，您可以从元素中取出集合包装，并在处理id时返回实际的DOM元素。处理类时，您将返回通过括号表示法传入的数组位置的元素（在本例中为第一个，因为数组在JavaScript中基于0）。

Answer 4

在id选择器的情况下，向它添加[0]是没有意义的，因为$("#theIdOfTheElement")将始终返回第一个元素。

$（selector）[0]在jQuery中意味着什么？

4 个答案: