我不理解的语法是这样的:
$("#profilePhotoFileUpload")[0]
我经常看到这种语法,我已经忽略了一段时间,因为我从来没有使用它。但是现在,为了理解这篇文章中的代码 如何使用Parse.com javascriptSDK上传图像?,我不能再忽视它了。
我知道 [0]
此语法通常用于引用数组。但是对于一个引用似乎有点奇怪 id
会生成某种数组。
我不理解的语法是这样的:
$("#profilePhotoFileUpload")[0]
我经常看到这种语法,我已经忽略了一段时间,因为我从来没有使用它。但是现在,为了理解这篇文章中的代码 如何使用Parse.com javascriptSDK上传图像?,我不能再忽视它了。
我知道 [0]
此语法通常用于引用数组。但是对于一个引用似乎有点奇怪 id
会生成某种数组。
通过附加 [0]
到jQuery对象将返回 第一 DOM元素。
当你在这里使用id选择器时,数组中只有一个元素可以使用 [0]
说得通。如果您选择多个元素,您还可以使用介于0和元素数之间的任何数字,您可以获得相应的DOM元素。
从 jQuery文档
jQuery对象包含一组文档对象模型(DOM)元素,这些元素是从HTML字符串创建的或从文档中选择的。由于jQuery方法通常使用CSS选择器来匹配文档中的元素,因此jQuery对象中的元素集通常称为“匹配元素”或“选定元素”。
jQuery对象本身就像一个数组;它有一个
length
属性和对象中的元素可以通过其数字索引访问[0]
至[length-1]
。请注意,jQuery对象实际上不是Javascript Array对象,因此它没有真正的Array对象的所有方法,例如join()
。
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/
根据jQuery文档,$()返回匹配元素的集合,这些元素可以在DOM中根据传递的参数找到,也可以通过传递HTML字符串来创建。通过添加[0],您可以从集合中获取集合包装,并在处理id时返回实际的DOM元素。处理类时,您将返回通过括号表示法传入的数组位置的元素(在本例中为第一个,因为数组在JavaScript中为0)。
在id选择器的情况下,将[0]附加到它没有任何意义,因为 $("#theIdOfTheElement")
将始终返回第一个元素。