$(selector)[0]在jQuery中意味着什么？

Question

我不明白的语法是这样的:

$("#profilePhotoFileUpload")[0]

我经常看到这种语法,我已经忽略了一段时间,因为我从来没有使用它.但是现在,为了理解这篇文章中的代码我如何使用Parse.com javascriptSDK上传图像？,我不能再忽视它了.

我知道[0]这个语法通常用于引用数组.但是对a的引用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 对象与DOM 节点/元素混淆。

this应该很简单

$(this)[0] === this

和

$("#target")[0] === document.getElementById("target");

例如

// 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/