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 o

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

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

Answer 3

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 4

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

Answer 5

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 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.