• Facile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Sélection d'éléments

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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'objet window : 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élection repré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, h2 représente les balises HTML <h2>, ou encore p repré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 CSS div sélectionne toutes ces balises.

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

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

  • Pour différencier les balises <h2> de classe rouge des balises <p> de classe rouge, vous utiliserez les sélecteurs h2.rouge et p.rouge. Ce cas particulier s'applique à toutes les balises et toutes les classes. Ainsi, le sélecteur nom_balise.nom_classe permet de sélectionner les balises nom_balise de classe nom_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électeur ul li s'adresse à tous les éléments <li> de la liste à puces <ul>, et le sélecteur ol li s'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, width et height. Pour sélectionner toutes les balises qui contiennent un attribut src, 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'attribut width a 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 classe bleu

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'attribut class vaut pair

li[class]

$('li[class]')

Les balises <li> qui possèdent un attribut class

li[class="impair"]

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

Les balises <li> qui possèdent un attribut class de 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é length et les éléments sélectionnés peuvent être accédés par un indice. Par exemple :

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

  • $('ul.bleu').length retourne le nombre de balises <ul> de classe bleu.

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

  • $('body').length retourne « 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 classe bleu.

  • $('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 et action effectue un traitement sur les éléments sélectionnés. Par exemple, pour écrire un message dans une balise <span> d'identifiant resultat, 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 classe rouge :

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

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

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 jQuery css(), 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 classe rouge ($('.rouge')). L'instruction $('.rouge').css('color','yellow');, quant à elle, affecte la couleur jaune (yellow) aux balises de classe rouge.

En chaînant ces deux instructions, les balises de classe rouge ont 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çant sel par 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 classe rouge ;

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

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

    • $('[width="40"]') sélectionne tous les éléments qui ont un attribut width é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 classe rouge : $('.rouge').css('background','red').css('color','yellow');.

Exemple de certificat de réussite
Exemple de certificat de réussite