What do [] brackets after a Jquery selector mean?

Question

I'm using this code to play a preloaded mp3 file.

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

shuffle.play();

Shuffle is my id. I got the code off the net but I CANNOT figure out what the [0] after the jquery selector does. The sound does not play if I remove it.What does it do?

thanks

Answer 1

jQuery is an array-like object that contains all of your matched elements. Often times, jQuery will by default apply its changes to the first element in the collection:

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

Even though many li elements could have been found, the jQuery object tells us about the first implicitly. We could explicitly instruct it to do so by using the $.get method:

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

We could check the nodeName to verify this:

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

If we look under the covers, we can see how $.get() is implemented:

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

From this we can see that when no argument is provided, the entire collection of element is converted to an array, and then returned. When an argument is provided, for instance 2 , we return the element as index 2. If -2 is provided, this is added to the length (suppose the length is 5, 5+(-2) is 3) and the resulting number is used as the index.

So with regards to your particular example:

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

jQuery is used to get any element that has the id value of shuffle . This returns the jQuery array-like object. But your play() method doesn't exist on the jQuery object, it exists on the #shuffle object. As such, you need to get the first element in the collection.

You could use $.get(0) , however as we just saw, this would just be adding one more step. Internally, jQuery would perform the same code you're performing above, [0] .

Answer 2

In the direct context of your question, $("#shuffle") is a selector of an id, which returns a jQuery object (not an array per-se, but it has an array-like structure), then the [0] part is actually returning a native DOMElement object of the element with id shuffle instead of the jQuery object returned by calling $('#shuffle') (without the [] ).

Essentially the same as doing document.getElementById('shuffle')

EDIT (as Matt pointed out)

this will then allow you to do your .play() call to start your audio stream.

Answer 3

$("#shuffle") will return an array of elements, according with your query, like [div,span,etc]
$("#shuffle")[n] means that you are selecting the nth element of this array
In this case, $("#shuffle")[0] selects the first element of this array

Answer 4

The brackets after the $('#shuffle') get the first element of that selector provided.

$('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

The nth element of the returned array. The same as in regular javascript or php and a good part of the programming languages which support arrays.

Answer 7

JQuery returns an array. [0] takes the first item in the array.

Answer 8

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