Jquery 选择器后面的 [] 括号是什么意思？

Question

我正在使用此代码播放预加载的 mp3 文件。

var shuffle = $("#shuffle")[0]; 

shuffle.play();

Shuffle是我的id。 我从网上得到了代码，但我无法弄清楚 jquery 选择器之后的 [0] 是什么。 如果我删除它，声音不会播放。它有什么作用？

谢谢

Answer 1

jQuery 是一个类似数组的对象，它包含所有匹配的元素。 通常情况下，jQuery 会默认将其更改应用于集合中的第一个元素：

$("li").css("display"); // display val of first element, not all elements.

尽管可以找到许多li元素，但 jQuery 对象隐式地告诉我们第一个元素。 我们可以使用$.get方法明确指示它这样做：

$("li").get(0); // Returns first DOM element
$("li")[0]; // Also returns first DOM element

我们可以检查nodeName来验证这一点：

$("li").get(0).nodeName; // LI
$("li")[0].nodeName; // LI

如果我们深入了解，我们可以看到$.get()是如何实现的：

get: function(num) {
  return num == null 
    ? this.toArray() 
    : ( num < 0 
          ? this[ this.length + num ] 
          : this[ num ] );
}

由此我们可以看出，当没有提供参数时，整个元素集合被转换为一个数组，然后返回。 当提供参数时，例如2 ，我们将元素作为索引 2 返回。如果提供-2 ，则将其添加到长度（假设长度为 5，5+(-2) 为 3）和结果数字用作索引。

因此，关于您的特定示例：

var shuffle = $("#shuffle")[0];
shuffle.play();

jQuery 用于获取 id 值为shuffle任何元素。 这将返回类似 jQuery 数组的对象。 但是您的play()方法不存在于 jQuery 对象中，它存在于#shuffle对象中。 因此，您需要获取集合中的第一个元素。

你可以使用$.get(0) ，但是正如我们刚刚看到的，这只是增加了一个步骤。 在内部，jQuery 将执行您在上面执行的相同代码[0] 。

Answer 2

在您的问题的直接上下文中， $("#shuffle")是一个 id 的选择器，它返回一个jQuery对象（本身不是数组，但它具有类似数组的结构），然后[0]部分实际上是返回带有 id shuffle的元素的本机DOMElement对象，而不是通过调用$('#shuffle') （没有[] ）返回的jQuery对象。

本质上和做document.getElementById('shuffle')

编辑（正如马特指出的那样）

这将允许您执行.play()调用以启动音频流。

Answer 3

$("#shuffle")将返回一个元素数组，根据您的查询，如[div,span,etc]
$("#shuffle")[n]表示您正在选择此数组的第n个元素
在这种情况下， $("#shuffle")[0]选择此数组的第一个元素

Answer 4

$('#shuffle') 后面的括号获取提供的该选择器的第一个元素。

$('div.test')[0];

<div class="test"></div> <-- this one would get returned
<div class="test"></div>
<div class="test"></div>

Answer 5

它返回包含匹配元素集中第一个元素的本机 javascript 对象。

Answer 6

返回数组的第 n 个元素。 与常规 javascript 或 php 以及支持数组的编程语言的很大一部分相同。

Answer 7

JQuery 返回一个数组。 [0] 取数组中的第一项。

Answer 8

它意味着要处理的对象的时间顺序总是在数组 [0],[1],[2] 上使用...你可以检查here