[jQuery] Quelle différence y a-t-il entre $(.)[0] et $(.).eq(0) ?
http://danielhagnoul.developpez.com/...ifference.html
Ci-dessous en évidence mes corrections/suggestions
Citation:
La différence est très importante et elle est souvent mal comprise.
Les fonctions de l'API jQueryUn sélecteur retournent toujours un objet jQuery, c'est la raison pour laquelle on peut chaîner les instructions.
Mais un sélecteur peut aussi être traité comme un tableau (array) pour retrouver
l'élément du DOMle ou les éléments du DOM sélectionnés en tant qu'objets HTMLElement. HTMLElement, c'est le prototype d'objet retourné par les fonctions JavaScript de base telles que document.getElementById ou document.querySelector. Récupérer l'objet HTMLElement à partir d'un sélecteur jQuery permet par exemple d' utiliser les propriétés et méthodes du JavaScript qui n'ont pas d'équivalent dans
le langage la bibliothèque jQuery.
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>
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| $( function(){
// Nous utiliserons Firebug pour examiner le résultat de nos codes
--> pourquoi forcer l'usage de cet outil ? Tous les navigateurs permettent de lire les logs console sans installer d'extension. On peut mettre un lien vers la FAQ JavaScript "Comment déboguer un script" si nécessaire
// $(...) = [object Object]
--> les commentaires pourraient être allégés et rendus plus lisibles. par exemple, indiquer ci-dessus "objet jQuery" ; aussi, ne pas présupposer que l'interface console de l'utilisateur cast systématiquement sous forme de String les logs
console.log( "$(...) = " + $( "#choix" ) );
// $(...).eq( 0 ) = [object Object]
console.log( "$(...).eq( 0 ) = " + $( "#choix" ).eq( 0 ) );
// $(...)[ 0 ] = [object HTMLSelectElement]
console.log( "$(...)[ 0 ] = " + $( "#choix" )[ 0 ] );
$( "#choix" ).children().eq( 2 ).css( "color", "red" );
// $( "#choix" ).children().eq( 2 ) = [object Object]
console.log( '$( "#choix" ).children().eq( 2 ) = ' + $( "#choix" ).children().eq( 2 ) );
// eq( 2 ) est la troisième option, valeur 3
console.log( $( "#choix" ).children().eq( 2 ).val() );
// $( "#choix" ).children()[ 4 ] = [object HTMLOptionElement]
console.log( '$( "#choix" ).children()[ 4 ] = ' + $( "#choix" ).children()[ 4 ] );
// $( "#choix" ).children()[ 4 ].tagName = OPTION
console.log( '$( "#choix" ).children()[ 4 ].tagName = ' + $( "#choix" ).children()[ 4 ].tagName );
// $( "#choix" ).children().eq( 4 ).tagName = undefined
// undefined car l'objet jQuery n'a pas une propriété tagName
console.log( '$( "#choix" ).children().eq( 4 ).tagName = ' + $( "#choix" ).children().eq( 4 ).tagName);
}); |
