• Medium

Free online content available in this course.

Paperback available in this course

course.header.alt.is_certifying

You can get support and mentoring from a private teacher via videoconference on this course.

Got it!

Last updated on 5/18/20

Sélection d'éléments

Log in or subscribe for free to enjoy all this course has to offer!

Dans ce chapitre, vous allez commencer à entrevoir la puissance de jQuery en découvrant une de ses facettes : la sélection d'éléments. Après cette lecture, vous saurez sélectionner, modifier et obtenir la valeur de la plupart des éléments qui peuvent être rencontrés dans un document HTML.

Vous connaîtrez également la nature des objets retournés par les instructions jQuery et vous verrez comment réduire la taille du code jQuery en chaînant les méthodes utilisées sur un objet.

Fonctionnement de base de jQuery

jQuery repose sur une seule et unique fonction :jQuery(), ou son alias,$(). Cette fonction accepte un ou plusieurs paramètres et retourne un objet que nous appellerons « objet jQuery ». Les paramètres peuvent être d'un des types suivants :

  • Une fonction, qui sera exécutée dès que le DOM est disponible. Cette technique est très largement utilisée par tous les programmeurs jQuery.

  • Un sélecteur CSS : l'élément (ou les éléments) qui correspondent au sélecteur sont retournés. Nous allons nous intéresser à cette technique dans ce chapitre.

  • Un élément HTML, un document ou l'objetwindow: un objet jQuery correspondant à cet élément est retourné.

  • Une (ou plusieurs) balise(s) HTML : un objet jQuery correspondant à cette (ces) balise(s) est retourné. Vous pouvez lui appliquer des méthodes jQuery, par exemple pour ajouter cette (ces) balise(s) dans un élément HTML.

Sélection d'éléments

Une des grandes forces de jQuery est d’intégrer la syntaxe des sélecteurs CSS. Par cet intermédiaire, il est élémentaire de sélectionner les nœuds DOM qui nous intéressent, en utilisant la syntaxe$(sélection)sélectionreprésente un sélecteur CSS.

En effet, jQuery est fortement lié à trois autres langages : HTML, CSS et JavaScript. CSS est un langage consacré à la mise en forme des documents écrits en HTML. Les sélecteurs CSS sont des mots et symboles qui permettent d'identifier les éléments contenus dans un document HTML. Par exemple,h2représente les balises HTML<h2>, ou encorepreprésente les balises<p>. En utilisant un sélecteur CSS dans la première partie d'une instruction jQuery, le ou les éléments HTML correspondants seront sélectionnés. Par la suite, il suffira de leur appliquer une action pour modifier leur contenu ou leur apparence.

Avant de poursuivre, voici quelques sélecteurs CSS que vous devez avoir en mémoire :

  • Un nom de balise, sans les caractères < et >, permet de sélectionner cette balise. Si plusieurs balises de même nom se trouvent dans le document, toutes ces balises sont sélectionnées. Par exemple, si le document contient plusieurs balises<div>, le sélecteur CSSdivsélectionne toutes ces balises.

  • Le signe # fait référence à l'attributid(ou identifiant) d'une balise. Par exemple, si vous définissez la balise<p id="premier">, le sélecteur#premiersélectionne cette balise. Notez que deux balises ne peuvent pas avoir le même identifiant.

  • Le point fait référence à l'attributclassd'une balise. Supposons que vous ayez défini la balise<h2 class="rouge">. Le sélecteur.rougesélectionne cette balise. Plusieurs balises peuvent avoir la même classe. Un même traitement pourra donc être appliqué à ces balises.

  • Pour différencier les balises<h2>de classerougedes balises<p>de classerouge, vous utiliserez les sélecteursh2.rougeetp.rouge. Ce cas particulier s'applique à toutes les balises et toutes les classes. Ainsi, le sélecteurnom_balise.nom_classepermet de sélectionner les balisesnom_balisede classenom_classe.

  • Supposons maintenant que vous ayez défini une liste à puces<ul></ul>et une liste numérotée<ol></ol>. Chacun des éléments des deux listes est repéré par des balises<li>. Pour différencier les éléments<li>de la liste à puces des éléments<li>de la liste numérotée, vous utiliserez un « sélecteur descendant ». Ainsi, le sélecteurul lis'adresse à tous les éléments<li>de la liste à puces<ul>, et le sélecteurol lis'adresse à tous les éléments<li>de la liste numérotée<ol>.

  • Certaines balises HTML peuvent contenir un ou plusieurs attributs. Par exemple, la balise<img src="chien.jpg" width="40" height="30">contient trois attributs :src,widthetheight. Pour sélectionner toutes les balises qui contiennent un attributsrc, vous utiliserez le sélecteur[src].

  • Vous pouvez même aller plus loin en sélectionnant les balises dont un attribut a une certaine valeur. Par exemple, pour sélectionner toutes les balises dont l'attributwidtha pour valeur 40, vous utiliserez le sélecteur[width="40"].

  • Le caractère * représente toutes les balises du document.

Et maintenant, nous allons raisonner sur un exemple pour mieux comprendre comment utiliser les sélecteurs CSS.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <ul class="rouge">
      <li class="impair">premier élément de la liste à puces</li>
      <li class="pair">deuxième élément de la liste à puces</li>
      <li class="impair">troisième élément de la liste à puces</li>
    </ul>
    <div>
      <ul class="bleu">
        <li class="impair">premier élément de la liste à puces</li>
        <li class="pair">deuxième élément de la liste à puces</li>
        <li class="impair">troisième élément de la liste à puces</li>
      </ul>
    </div>
    <ol class="rouge">
      <li>premier élément de la liste numérotée</li>
      <li>deuxième élément de la liste numérotée</li>
      <li>troisième élément de la liste numérotée</li>
    </ol>
    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Insérer le code jQuery ici
      });
      </script>
  </body>
</html>

Le tableau suivant donne quelques exemples significatifs de sélecteurs et indique à quoi ils correspondent.

Sélecteur CSS

Sélecteur jQuery

Signification

ul

$('ul')

Les balises<ul>

ul.bleu

$('ul.bleu')

La balise<ul>de classebleu

div ul

$('div ul')

La balise<ul>contenue dans la balise<div>

div ul li[class="pair"]

$('div ul li[class="pair"]')

La balise<li>contenue dans une balise<ul>, elle-même contenue dans une balise<div>, et dont l'attributclassvautpair

li[class]

$('li[class]')

Les balises<li>qui possèdent un attributclass

li[class="impair"]

$('li[class="impair"]')

Les balises<li>qui possèdent un attributclassde valeur impair

*

$('*')

Toutes les balises du document

Quelle est la nature de l'objet retourné ?

Le résultat retourné par la fonction$()est un objet jQuery. Cet objet ressemble à un tableau : il a une propriétélengthet les éléments sélectionnés peuvent être accédés par un indice. Par exemple :

  • $('a').lengthretourne le nombre de liens hypertextes contenus dans la page.

  • $('ul.bleu').lengthretourne le nombre de balises<ul>de classebleu.

  • $('li[class="impair"]').lengthretourne le nombre de balises<li>qui ont un attributclassde valeur impair.

  • $('body').lengthretourne « 1 » car le document contient une seule balise<body>.

Pour accéder à un des éléments sélectionnés, précisez son indice entre crochets à la suite du sélecteur. Par exemple :

  • $('a')[0]retourne le premier lien hypertexte de la page.

  • $('ul.bleu')[3]retourne la quatrième balise<ul>de classebleu.

  • $('body')[0]est équivalent àdocument.body.

Appliquer une méthode à la sélection

Une fois qu'un ou plusieurs éléments ont été sélectionnés avec une instruction$(sélecteur), vous pouvez leur appliquer un traitement en exécutant une méthode jQuery. Pour cela, ajoutez un point après la parenthèse fermante et indiquez la méthode à utiliser :

$(sélecteur).action

… où$(sélecteur)sélectionne un ou plusieurs éléments dans le document etactioneffectue un traitement sur les éléments sélectionnés. Par exemple, pour écrire un message dans une balise<span>d'identifiantresultat, vous utiliserez quelque chose comme le code suivant :

$('#resultat').html('texte à écrire dans la balise span');

Notions indispensables

Je vais ici vous parler de deux notions indispensables : les fonctions de rappel et le chaînage de méthodes.

Fonctions de rappel

Une fonction de rappel (ou callback en anglais) est une fonction exécutée lorsqu'une autre fonction a terminé de s'exécuter. En jQuery, les fonctions de rappel sont essentiellement utilisées pour réaliser des animations et des appels AJAX. Nous reviendrons sur ces deux sujets dans la partie 3 du cours.

Juste pour vous mettre l'eau à la bouche, voici un exemple de fonction de rappel, appliquée aux éléments de classerouge:

$(function() {
    $(".rouge").fadeOut("slow",function(){
      $(this).fadeIn("slow");
    }); 
});

Ce code fait disparaître puis réapparaître progressivement les balises de classerouge.

Chaînage de méthodes

Le chaînage est un concept très puissant et pourtant simple à comprendre. Étant donné que les méthodes jQuery retournent un objet jQuery, il est possible de les « chaîner », c'est-à-dire de les exécuter les unes à la suite des autres.

À titre d'exemple, les deux premières instructions sont équivalentes à la troisième :

$('.rouge').css('background','red');
$('.rouge').css('color','yellow');

$('.rouge').css('background','red').css('color','yellow');

Nous n'avons pas encore étudié la méthode jQuerycss(), mais je suis sûr qu'en observant la façon dont elle s'articule vous comprenez son fonctionnement. Cette méthode admet deux paramètres. Le premier est une propriété CSS et le deuxième, la valeur à affecter à cette propriété.

Ainsi par exemple, l'instruction$('.rouge').css('background','red');affecte un arrière-plan (background) de couleur rouge (red) aux balises de classerouge($('.rouge')). L'instruction$('.rouge').css('color','yellow');, quant à elle, affecte la couleur jaune (yellow) aux balises de classerouge.

En chaînant ces deux instructions, les balises de classerougeont un arrière-plan de couleur rouge et des caractères de couleur jaune. Et tout cela en une seule instruction !

  • Le sélecteur jQuery$('sel')utilise la syntaxe CSS. En remplaçantselpar un sélecteur CSS quelconque, les éléments correspondants (s'ils existent) seront sélectionnés dans le DOM. Par exemple :

    • $('a')sélectionne tous les liens hypertextes ;

    • $('.rouge')sélectionne les éléments de classerouge;

    • $('#e2')sélectionne l'élément d'identifiante2;

    • $('[src]')sélectionne tous les éléments qui possèdent un attributsrc;

    • $('[width="40"]')sélectionne tous les éléments qui ont un attributwidthégal à 40.

  • L'objet retourné par un sélecteur jQuery peut faire référence à plusieurs éléments. Pour accéder à un élément, vous pouvez préciser son index entre crochets, en ayant bien à l'esprit que le premier élément a un index égal à 0. Par exemple, le sélecteur$('a')[2]fait référence au troisième lien hypertexte contenu dans la page.

  • Pour appliquer une méthode à un objet jQuery obtenu en utilisant un sélecteur, il suffit d'écrire cette méthode à droite du sélecteur en la séparant de ce dernier par un point. Par exemple, l'instruction suivante écrit en jaune tous les liens hypertextes contenus dans la page :$('a').css('color', 'yellow');.

  • Pour chaîner deux méthodes jQuery, écrivez-les l'une à la suite de l'autre en les séparant par un point. Par exemple, cette instruction applique un arrière-plan de couleur rouge et un texte de couleur jaune aux éléments de classerouge:$('.rouge').css('background','red').css('color','yellow');.

Example of certificate of achievement
Example of certificate of achievement