IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Contributions JavaScript / AJAX Discussion :

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


Sujet :

Contributions JavaScript / AJAX

  1. #1
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    November 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : November 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut [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

    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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);
    });
    One Web to rule them all

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    February 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : February 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut
    Les fonctions de l'API jQuery retournent toujours un objet jQuery, c'est la raison pour laquelle on peut chaîner les instructions.


    jQuery est un objet avec un prototype, donc je préfère parler des méthodes de l'objet jQuery.

    Tous les sélecteurs retournent un objet jQuery (même vide, jObj.length est toujours disponible) : <code>var jObj = $( selector );</code>.

    Toutes les méthodes ne retournent pas un objet jQuery, les méthodes de type "get" retourne une valeur.

    /************************************/

    Un sélecteur peut aussi être traité comme un tableau (array) pour retrouver le ou les éléments du DOM sélectionnés en tant qu'objets HTMLElement.
    Question 1 : un sélecteur jQuery contient-il toujours un HTMLElement ?

    Question 2 : un sélecteur jQuery contient-il toujours un élément du DOM ?

    /*******************************************/

    --> 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

    --> 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
    Les deux remarques précédentes expliquent pourquoi je donnais l'exemple de ce qui était affiché dans la console d'un outil déterminé.

    Cet exemple date de la première rédaction de la FAQ, à cette époque le meilleur outil était Firebug.

    Toutes les consoles n'affichant toujours pas la même chose, je veux bien donner les sorties affichées dans une autre console que celle de Firebug, sauf IE que je n'utilise jamais.

    J'utilise généralement les outils intégrés au navigateur Chrome, mais sur Firefox j'utilise toujours Firebug. Il y a des outils du développeur de la même qualité que ceux de Chrome dans Firefox ? Comment, où ? Inconnu !

    /****************************************/

    EDIT 2014-01-06

    Firebug supprimé, en train de découvrir les outils du développeur intégré dans Firefox. https://developer.mozilla.org/fr/docs/Outils

    Résultats identiques dans la console de Chrome et de Firefox :

    /*
    Firefox console :

    "2014-01-06T10:11:41.403+0100" d3HeadBase.js:50
    10:11:41,674 "$(...) = [object Object]" SelecteurDifference.html:125
    10:11:41,674 "$(...).eq( 0 ) = [object Object]" SelecteurDifference.html:128
    10:11:41,674 "$(...)[ 0 ] = [object HTMLSelectElement]" SelecteurDifference.html:131
    10:11:41,676 "$( "#choix" ).children().eq( 2 ) = [object Object]" SelecteurDifference.html:136
    10:11:41,676 "3" SelecteurDifference.html:139
    10:11:41,676 "$( "#choix" ).children()[ 4 ] = [object HTMLOptionElement]" SelecteurDifference.html:142
    10:11:41,677 "$( "#choix" ).children()[ 4 ].tagName = OPTION" SelecteurDifference.html:145
    10:11:41,677 "$( "#choix" ).children().eq( 4 ).tagName = undefined"

    Chrome console :

    2014-01-06T10:14:46.685+0100 d3HeadBase.js:50
    $(...) = [object Object] SelecteurDifference.html:125
    $(...).eq( 0 ) = [object Object] SelecteurDifference.html:128
    $(...)[ 0 ] = [object HTMLSelectElement] SelecteurDifference.html:131
    $( "#choix" ).children().eq( 2 ) = [object Object] SelecteurDifference.html:136
    3 SelecteurDifference.html:139
    $( "#choix" ).children()[ 4 ] = [object HTMLOptionElement] SelecteurDifference.html:142
    $( "#choix" ).children()[ 4 ].tagName = OPTION SelecteurDifference.html:145
    $( "#choix" ).children().eq( 4 ).tagName = undefined
    */

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    November 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : November 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Toutes les méthodes ne retournent pas un objet jQuery, les méthodes de type "get" retourne une valeur.
    "La plupart des méthodes jQuery" alors ? C'est toujours mieux que "les sélecteurs", si on parle d'instructions chaînées juste derrière.

    Question 1 : un sélecteur jQuery contient-il toujours un HTMLElement ?

    Question 2 : un sélecteur jQuery contient-il toujours un élément du DOM ?
    1) non, il peut être vide aussi ; on peut faire une phrase pour l'expliquer, mais je crois que tu en parles déjà dans une autre section

    2) jQuery cherche dans le DOM, donc oui à moins que l'élément ait été retiré du DOM entre temps

    Il y a des outils du développeur de la même qualité que ceux de Chrome dans Firefox ? Comment, où ? Inconnu !
    Il faut pas chercher très loin F12

    Ce que je veux dire par "ne pas présupposer que l'interface console de l'utilisateur cast systématiquement sous forme de String les logs", c'est que quand on logge un élément HTML en console, il ne s'agit pas d'une simple String mais d'un élément sur lequel on peut interagir, retrouver dans le DOM, voir les propriétés etc...



    De plus la sérialisation de ces objets sous forme de String n'est pas standardisée. Donc on devrait être plus descriptif dans les commentaires. Si un visiteur ne retrouve pas les mêmes textes exactement, il pourrait se poser des questions.
    One Web to rule them all

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    February 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : February 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut
    Q/R modifié.

    • Merci pour la correction des bogues, les remarques et les suggestions. Elles sont appréciées même si elles ne figurent pas dans le Q/R modifié.
    • Attention, il faut souvent relancer la page pour voir la dernière version à cause du cache du navigateur.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  5. #5
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    March 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : March 2008
    Messages : 6 582
    Points : 79 910
    Points
    79 910
    Par défaut
    Je vous suis de loin mais merci pour ces relectures.

Discussions similaires

  1. Réponses: 67
    Dernier message: 16/12/2007, 14h41
  2. Réponses: 7
    Dernier message: 10/07/2006, 14h25
  3. Quelles différences entre TDBGrid et TJvDBGrid ?
    Par bds2006 dans le forum Delphi
    Réponses: 2
    Dernier message: 12/06/2006, 15h35
  4. [Type Sql] Quelles différences entre ces bases ?
    Par wonderboy dans le forum Décisions SGBD
    Réponses: 1
    Dernier message: 16/03/2006, 10h38
  5. Quelle différence entre "réel simple" et "déc
    Par pyxosledisciple dans le forum Access
    Réponses: 2
    Dernier message: 11/01/2006, 12h51

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo