Les sélecteurs jQuery

Dans mon article précédent sur le DOM (Document Object Model), j'ai expliqué comment le DOM permet de manipuler les éléments HTML dynamiquement à l'aide de Javascript. jQuery permet lui aussi d'effectuer de telles manipulations. Et souvent, la syntaxe sera plus intuitive avec jQuery, pour autant que l'on comprenne bien le fonctionnement des sélecteurs jQuery.

Voici donc ce que vous devez savoir pour bien travailler avec jQuery.

▼Publicité

Lorsque vous souhaitez appliquer une fonction jQuery sur un élément de votre page Web, vous devez d'abord sélectionner cet élément. Ceci sera fait à l'aide des sélecteurs jQuery.

Par exemple, l'instruction suivante permet d'appliquer une fonction maison nommée animerAncres() à tout les liens ayant la classe lienAncre :

jQuery

$("a.lienAncre").animerAncres();

On voit que dans l'instruction servant à sélectionner un élément, on retrouve :

  • l'alias jQuery($) suivi de parenthèses. Ceci permet d'accéder à l'objet représentant un ou des éléments donnés.
  • entre les parenthèses, un sélecteur jQuery
  • le tout est suivi d'un point puis de la propriété ou la méthode désirée.

Sélecteurs jQuery vs sélecteurs CSS

À la base, les sélecteurs jQuery sont très semblables aux sélecteurs CSS. Voici les principaux sélecteurs qui vous seront utiles :

  • On peut utiliser directement le nom d'une balise.

    Ex :

    CSS

    img {

       ...

    }

    jQuery

    $(img). ...;

    On aurait pu obtenir un résultat équivalent à la sélection jQuery en utilisant le code Javascript suivant, qui manipule directement le DOM :

    Javascript

    var lesImages = document.getElementsByTagName('img');

    for (var i = 0; i < lesImages.length; i++) {

       ...

    }

  • Le point permet d'identifier les éléments auxquels une classe est appliquée

    Ex :

    CSS

    .important {

       ...

    }

    jQuery

    $(.important). ...;

    Le résultat sera le même si on utilise directement Javascript pour manipuler le DOM :

    Javascript

    var lesImportants = document.getElementsByClassName('important');

    for (var i = 0; i < lesImportants .length; i++) {

       ...

    }

  • le # permet d'identifier les éléments par leur ID
    CSS

    #contenu {

       ...

    }

    jQuery

    $(#contenu). ...;

    L'utilisation du sélecteur jQuery aurait pu être remplacée par le code Javascript suivant qui, ici encore, manipule le DOM directement. Notez que puisque getElementById() ne retourne qu'un seul élément, il n'y a pas lieu de faire une boucle comme lors de la sélection par classe ou par nom de balise.

    Javascript

    document.getElementById('contenu'). ...;

  • Pour sélectionner un élément qui est imbriqué dans un autre, on les séparera par un espace. Par exemple, si on veut sélectionner les images sur lesquelles il y a un lien (images qui sont placées dans une balise <a>) : 
    CSS

    a img {

       ...

    }

    jQuery

    $(a img). ...;

  • Pour sélectionner les éléments qui possèdent un attribut particulier :
    CSS

    input[type='text'] {

       ...

    }

    jQuery

    $(input[type='text']). ...;

  • Il est également possible d'utiliser l'étoile pour sélectionner tous les éléments.
    CSS

    * {

       ...

    }

    jQuery

    $(*). ...;

  • etc.

Il existe d'autres sélecteurs qui sont propres à jQuery :

  • :hidden pour sélectionner les éléments cachés.
    jQuery

    $(div:hidden). ...;

  • :visible pour sélectionner les éléments visibles.
    jQuery

    $(img:visible). ...;

  • :first pour sélectionner le premier élément.
    jQuery

    $(tr:first). ...;

  • :last pour sélectionner le dernier.
    jQuery

    $(tr:last). ...;

  • etc.

Pour plus d'information

« jQuery - sélecteurs ». jQuery développeur. http://jquery.developpeur-web2.com/documentation/selecteurs.php

« Découvrir jQuery ». Open Classrooms. http://fr.openclassrooms.com/informatique/cours/jquery-ecrivez-moins-pour-faire-plus/decouvrir-jquery#r-1424715

« Category: Selectors ». jQuery. http://api.jquery.com/category/selectors/

« Try jQuery selectors ». w3schools. http://www.w3schools.com/jquery/trysel.asp

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories

2 commentaires

  1. Très bon tutoriel réservé à cet excellent JQuery qui par sa simplicité (par rapport au javascript) est devenu un outil indispensable dans la création et l’animation de site web