Difference between $ ("# item") and $ ("# item") [0] Jquery

In the following example you will see that no is the same.

console.log($('#contenido') === document.getElementById('contenido') ); // false

console.log($('#contenido')[0] === document.getElementById('contenido') ); // true

console.log($('#contenido').get(0) === document.getElementById('contenido') ); // true

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contenido"></div>

And it should be because jQuery returns a array .

If you use [0] or .get() you have access to DOM Node .

Practical examples:

$('#contenido1').text('si funciona 1');

$('#contenido2').get(0).innerText = 'si funciona 2';

$(document.getElementById('contenido3')).text('si funciona 3');


// los proximos ejemplos no funcionan

$('#contenido').get(0).text('no funciona');

document.getElementById('contenido4').text('no funciona');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contenido1"></div>
<div id="contenido2"></div>
<div id="contenido3"></div>
<div id="contenido4"></div>

By making a jQuery selector to an element of the DOM , the library, create a jQuery object, enclosing the [object HTML] , immediately that object exposes you an API to more friendly methods and Cross Browser .offset() , .animate() , etc ... But internally you are using the same API native Vanilla of Javascript .

This jQuery object exposes 0 , the reference to [object HTML] , in case you want to run over the API native methods Javascript .

I'll give you an example:

var canvas = $('#canvas');
// error getContext() es un método de la API nativa,
// por lo tanto el objeto jQuery no tiene este método
var context = canvas.getContext('2d'); 

Solution:

var context = canvas[0].getContext('2d'); 

The $() method of jQuery returns an object depending on the parameter passed to it. This means that if you pass an ID as a selector, it will only return an object, since the ID in HTML can not be repeated. On the other hand, if you pass a class or a label to the $() method, being selectors that can be repeated, it will return an array with all the objects that correspond to that class or label.

I'll give you an example:

index.html

<div id="header"></div>
<div class="miClase"></div>
<div class="miClase"></div>

scripts.js

$('#header').text('Hola'); // Devuelve un único objeto
$('.miClase').text('Mundo'); // Devuelve todos los objetos que tengan la clase indicada

/*
  Si quisiéramos aplicar el método text() solamente al primer elemento que tenga la clase
    miClase podríamos hacer referencia a él indicando su índice en el array que devuelve
    $('.miclase')
*/

$('.miClase')[0].text('Este es el primer div con .miClase');

The [] is always used for arrays, if you add the [0] and it does not show when you send it text it is because he is looking to assign a text to that element which does not exist in the view because you would have to work it as an array. Make a "console.debug (content)" to see the item as you are dealing with it. I do not set an example because I'm answering from my cell phone. Excuse.