jQuery: eq () vs get ()

Soy nuevo en jQuery, y me pregunto cuál es la diferencia entre las funciones get() y eq() jQuery. Puede que malinterprete lo que hace la función get() , pero me pareció extraño que no pudiera llamar a una función en el elemento devuelto en la misma línea.

 //Doesn't work Ie $("h2").get(0).fadeIn("slow"); //Works $("h2").eq(0).fadeIn("slow"); 

.get() y .eq() devuelven un único “elemento” de una matriz de objetos jQuery, pero devuelven el elemento individual en diferentes formas.

.eq() devuelve como un objeto jQuery, lo que significa que el elemento DOM está envuelto en el contenedor jQuery, lo que significa que acepta funciones jQuery.

.get() devuelve una matriz de elementos DOM sin procesar. Puede manipular cada uno de ellos accediendo a sus atributos e invocando sus funciones como lo haría con un elemento DOM sin procesar. Pero pierde su identidad como un objeto envuelto jQuery, por lo que una función jQuery como .fadeIn no funcionará.

get() devuelve un elemento DOM mientras que :eq() y eq() devuelven un elemento jQuery. Como los elementos DOM no tienen método, fadeIn() falla .

http://api.jquery.com/get/

Descripción: recupera los elementos DOM que coinciden con el objeto jQuery.

http://api.jquery.com/eq-selector/

Descripción: seleccione el elemento en el índice n dentro del conjunto combinado.

get(0) (docs) devuelve el primer elemento DOM en el conjunto.

eq(0) (docs) devuelve el primer elemento DOM en el conjunto, envuelto en un objeto jQuery.

Es por eso que .fadeIn("slow"); no funciona cuando lo haces .get(0) . Un elemento DOM no tiene un método fadeIn() , pero sí un objeto jQuery.

Para construir sobre las otras respuestas:

 $('h2').get(0) === $('h2').eq(0)[0] //true $( $('h2').get(0) ) === $('h2').eq(0) //true 

eq(i) recupera el miembro i-ésimo en el conjunto del receptor como un objeto jQuery , mientras que get(i) devuelve al miembro en la posición i-ésima como un elemento DOM.

La razón por la cual esto no funciona:

 $("h2").get(0).fadeIn("slow"); 

Es porque el elemento DOM fadeIn no tiene un método llamado fadeIn .

Debería usar eq(0) aquí en su lugar.

Doy un ejemplo que explica los puntos dados por otros aquí. considere el siguiente código

 
Some text
Another div

y el código js correspondiente,

 $(document).ready(function() { var div = $("#example").get(0); console.log(typeof(div)); console.log(div); console.log("XXXXXXXXX"); var div_eq=$('#example').eq(0); console.log(typeof(div_eq)); console.log(div_eq); }); 

esto es lo que verás

  object excercise1.js (line 5) 
excercise1.js (line 6) XXXXXXXXX excercise1.js (line 7) object excercise1.js (line 9) Object[div#example]

El primero es un objeto DOM mientras que el último es un objeto envuelto en Jquery donde se pueden llamar a los métodos de Jquery

El método jQuery eq () selecciona un elemento HTML con un número de índice específico.

Aquí hay un ejemplo de eso

  
$( "body" ).find( "div" ).eq( 2 ).addClass( "red" ); // it finds the second div in the html body and change it to red color.

Fuente: http://www.snoopcode.com/JQuery/jquery-eq-selector

Las respuestas anteriores han explicado específica y correctamente. Quiero agregar algunos puntos aquí que podrían ayudar con el uso de get() .

  1. Si no pasa un argumento a .get() , devolverá una matriz de los elementos DOM.

  2. Si tienes un objeto DOM usando get() , como var s = $("#id").get(0) puedes volver a convertirlo en objeto jQuery simplemente usando esto, $(s)

  3. Puede usar $obj[i] como una alternativa si no desea usar $obj.get(i) , ver a continuación,

     var $obj = $("#ul li"); var obj1 = $obj.get(1); var obj2 = $obj[1]; //true return obj2===obj1;