What does $(selector)[0] mean in jQuery?

By appending [0] to the jQuery object will return the first DOM element.

As you're using id selector here, there will be only one element in the array so using [0] makes sense. If you are selecting multiple elements you can also use any number which is between 0 and number of elements you can get corresponding DOM element.

From jQuery Docs

A jQuery object contains a collection of Document Object Model (DOM) elements that have been created from an HTML string or selected from a document. Since jQuery methods often use CSS selectors to match elements from a document, the set of elements in a jQuery object is often called a set of "matched elements" or "selected elements".

The jQuery object itself behaves much like an array; it has a length property and the elements in the object can be accessed by their numeric indices [0] to [length-1]. Note that a jQuery object is not actually a Javascript Array object, so it does not have all the methods of a true Array object such as join().

Well, don't confuse jQuery Object with DOM node/element.

this should be as simple as

$(this)[0] === this

and

$("#target")[0] === document.getElementById("target");

e.g.

// 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 elementalert($(target)[0] === $(target).eq(0)); // alerts "false"

We must keep in mind that both $(target)[0] and $(target).get(0) return the same DOM element which has DOM properties like .innerHTML and methods like .appendChild(), but not jQuery methods like .html() or .after() whereas $(target).eq(0) returns a jQuery object which has useful methods like .html() and .after().

what's more

var logo1 = $("#logo");var logo1Elem = logo1.get(0);var logo2 = $("#logo");var logo2Elem = $("#logo")[0];

Although logo1 and logo2 are created in the same way (and wrap the same DOM element), they are not the same object.

// Comparing jQuery objects. alert($("#logo") === $("#logo")); // alerts "false"// Comparing DOM elements.     alert(logo1Elem === logo2Elem); // alerts "true"

Ref: https://learn.jquery.com/using-jquery-core/jquery-object/

According to the jQuery documentation the $() returns a collection of matched elements either found in the DOM based on passed argument(s) or created by passing an HTML string. By adding the [0] you take the collection wrapper off the element and just return the actual DOM element when dealing with an id. When dealing with a class you would return the element at the arrays position passed in through the bracket notation (in this case the first, since arrays are 0 based in JavaScript).