Quelle différence y a-t-il entre $(...)[0] et $(...).eq(0) ?

Index

La différence est très importante et elle est souvent mal comprise.

Un sélecteur jQuery peut contenir diverses choses, il retourne un objet jQuery : var jObj = $( selector );.

Les méthodes jQuery du type "get" retournent une valeur, exemple : html().

Les autres méthodes retournent l'objet jQuery créé par le sélecteur, permettant de chaîner les instructions. Exemple : $( "div" ).css( "color", "red" ).show();.

L'objet jQuery se comporte un peu comme un tableau (array), il possède une propriété de longueur (length) et les éléments de l'objet peuvent être consulté par leurs indices numériques [ 0 ] à [ longueur - 1 ]. Notez qu'un objet jQuery n'est pas réellement un Array, donc il n'a pas toutes les méthodes d'un véritable objet Array telles que join().

Lorsqu'un objet jQuery contient un ou des éléments du DOM (1), on peut ainsi retrouver chaque élément en tant qu'objet HTMLElement (2) pour, par exemple, utiliser les propriétés et méthodes du JS qui n'ont pas d'équivalent dans la bibliothèque jQuery. Exemple : jObj[ index ] ou jObj.get( index ).

Exemple

<select id="choix">
	<option value="1" selected="selected">Choix n° 1</option>
	<option value="2">Choix n° 2</option>
	<option value="3">Choix n° 3</option>
	<option value="4">Choix n° 4</option>
	<option value="5">Choix n° 5</option>
</select>
console.log( "$(...) = " + $( "#choix" ) );
console.log( "$(...).eq( 0 ) = " + $( "#choix" ).eq( 0 ) );
console.log( "$(...)[ 0 ] = " + $( "#choix" )[ 0 ] );
console.log( '$( "#choix" ).children().eq( 2 ) = ' + $( "#choix" ).children().eq( 2 ) );
console.log( $( "#choix" ).children().eq( 2 ).val() );
console.log( '$( "#choix" ).children()[ 4 ] = ' + $( "#choix" ).children()[ 4 ] );
console.log( '$( "#choix" ).children()[ 4 ].tagName = ' + $( "#choix" ).children()[ 4 ].tagName );
console.log( '$( "#choix" ).children().eq( 4 ).tagName = ' + $( "#choix" ).children().eq( 4 ).tagName);

Pour le code ci-dessus, la console (3) de Chrome 32.017 et de Firefox 26.0 affiche les mêmes résultats : 

$(...) = [object Object]
$(...).eq( 0 ) = [object Object]
$(...)[ 0 ] = [object HTMLSelectElement]
$( "#choix" ).children().eq( 2 ) = [object Object]
3
$( "#choix" ).children()[ 4 ] = [object HTMLOptionElement]
$( "#choix" ).children()[ 4 ].tagName = OPTION
$( "#choix" ).children().eq( 4 ).tagName = undefined

Notes

  1. DOM :
  2. HTMLElement est le prototype d'objet retourné par les fonctions JS de base telles que document.getElementById() ou document.querySelector().
  3. Console :

Tests unitaires avec QUnit.