$(selector)在jQuery中意味着什么?

我不理解的语法是这样的:

$("#profilePhotoFileUpload")[0] 

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

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

通过将[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()

好吧,不要将jQuery ObjectDOM节点/元素混淆。

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]; 

虽然logo1logo2以相同的方式创建(并包装相同的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/

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

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