What do the [] brackets after the jQuery selector mean?

Question

I use this code to play a pre-loaded mp3 file.

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

Shuffle is my identifier. I got the code from the network, but I CANNOT understand that [0] after the jquery selector. Sound does not play if I delete it. What is he doing?

thanks

Answer 1

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

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

Although many li elements could be found, the jQuery object tells us the first implicitly. We could directly tell him this using the $.get method:

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

We can check the nodeName to check this:

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

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

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

This shows that when the argument is not provided, the entire collection of elements is converted to an array and then returned. When an argument is provided, for example 2 , we return the element as index 2. If -2 supplied, 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, regarding your specific example:

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

jQuery is used to get any element that has an id shuffle value. This returns an object similar to a jQuery array. But your play() method does not exist in the jQuery object, it exists in the #shuffle object. So you need to get the first item in the collection.

You can use $.get(0) , however, as we just saw, this will just add one more step. Internally, jQuery would execute the same code that you are executing above, [0] .

Answer 2

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

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

EDIT (as Matt pointed out)

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

Answer 3

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

Answer 4

JQuery returns an array. [0] takes the first element of the array.

Answer 5

$("#shuffle") will return an array of elements according to your request, for example [div,span,etc]
$("#shuffle")[n] means you select the nth element of this array
In this case, $("#shuffle")[0] selects the first element of this array

Answer 6

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

 $('div.test')[0]; <div class="test"></div> <-- this one would get returned <div class="test"></div> <div class="test"></div> 

Answer 7

It returns a native javascript object containing the first element in a consistent set of elements.

Answer 8

This means that the chronological order of the object, which is always processed by the array [0], [1], [2] ..., you can check here