问题 $(selector)[0]在jQuery中意味着什么?


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

$("#profilePhotoFileUpload")[0]

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

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


8553
2017-09-25 13:57


起源

它直接访问DOM元素,没有jQuery包装器。 - Blender
接下来,此函数能够处理类和ID,因此可以生成元素数组或一个元素。因为一个函数具有多个返回类型是违反每个约定的,所以它总是返回一个数组,因为数组也只能包含一个匹配。 - Stephan Bijzitter
与...密切相关 - Jashwant
关于您(现已删除)的段落,我们不鼓励成员在此处删除他们提出的问题。 Stack Overflow的一个重点是提出其他人可以学习的问题。因此,如果您有一个想要稍后删除的问题,则无法在此处询问。 - halfer


答案:


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

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

jQuery文档

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

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


10
2017-09-25 13:58



我明白了......所以 [0] 不代表数组或类似的东西。 - Jae Kim
应该说会退货 第一 集合中的元素 - charlietfl
@JaeKim:对。括号表示法可用于任何对象。所有这一切都是访问该属性 0 那个对象。例: ({0: 42}[0]) 返回42。 - Felix Kling
@Jae, 。得到() 用于相同的。但这涉及功能开销,应该避免。 - Jashwant
谢谢大家的回复! - Jae Kim


好吧,不要混淆 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/


3
2018-03-31 06:02





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


0
2017-09-25 14:03





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


0
2017-09-25 14:45



错误。仅仅因为标准说你不能拥有多个具有相同ID的元素并不意味着浏览器会对此感到恐慌。事实上,我所知道的大多数浏览器都会允许这样的动作和id选择器可以返回多个元 - Steve
jquery使用document.getElementById(id)(参见: api.jquery.com/id-selector)返回对元素的引用(如果你有多个具有相同id的元素,则返回第一个元素)(参见: developer.mozilla.org/en-US/docs/Web/API/Document/...) 也可以看看 : stackoverflow.com/questions/14408891/... - Zakaria Ra