jQuery : eq() vs get()

Question

Je suis nouveau dans l'utilisation de jQuery et je me demande quelle est la différence entre l'interface de jQuery get() y eq() fonctions. Il se peut que je comprenne mal ce que le get() mais je trouvais étrange de ne pas pouvoir appeler une fonction sur l'élément retourné sur l'élément retourné dans la même ligne.

//Doesn't work
I.e.  $("h2").get(0).fadeIn("slow");

//Works
$("h2").eq(0).fadeIn("slow");

Answer 1

.get() y .eq() renvoient toutes deux un seul "élément" à partir d'un tableau d'objets jQuery, mais elles renvoient cet élément unique sous des formes différentes.

.eq() le renvoie en tant qu'objet jQuery, ce qui signifie que l'élément DOM est enveloppé dans le wrapper jQuery, ce qui signifie qu'il accepte les fonctions jQuery.

.get() renvoie un tableau d'éléments DOM bruts. Vous pouvez manipuler chacun d'entre eux en accédant à ses attributs et en invoquant ses fonctions comme vous le feriez sur un élément DOM brut. Mais il perd son identité en tant qu'objet enveloppé par jQuery, de sorte qu'une fonction jQuery comme .fadeIn ne fonctionnera pas.

Answer 2

get() renvoie un élément DOM alors que :eq() y eq() renvoie un élément jQuery. Puisque les éléments DOM n'ont pas de méthode fadeIn() il échoue .

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

Description : Récupérer les éléments du DOM correspondant à l'objet jQuery.

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

Description : Sélectionnez l'élément à l'indice n dans l'ensemble apparié.

Answer 3

get(0) (docs) renvoie le premier élément DOM de l'ensemble.

eq(0) (docs) renvoie le premier élément DOM de l'ensemble, enveloppé dans un objet jQuery.

C'est pourquoi .fadeIn("slow"); ne fonctionne pas lorsque vous faites .get(0) . Un élément DOM n'a pas de fadeIn() mais un objet jQuery le fait.

Answer 4

Pour construire sur les autres réponses :

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

Answer 5

eq(i) récupère le ième membre de l'ensemble du récepteur en tant que jQuery tandis que get(i) retourne le membre à la ième position comme un élément DOM.

La raison pour laquelle ça ne marche pas :

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

C'est parce que le h2 L'élément DOM ne possède pas de méthode appelée fadeIn .

Vous devez utiliser eq(0) ici à la place.