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 asjoin()
.
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 element
alert($(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/