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

Plus loin dans la sélection d'éléments

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

Vous avez appris à sélectionner des balises, des identifiants et des classes dans le code HTML d'une page Web. Ces types de sélections sont très utiles et vous les utiliserez fréquemment lors de vos développements jQuery.

Cependant, il est possible d'aller plus loin en sélectionnant encore plus finement les éléments du DOM. Ce chapitre va vous montrer comment sélectionner des éléments HTML en fonction de leurs attributs, comment limiter les éléments retournés en utilisant des pseudo-sélecteurs ou encore comment utiliser des sélecteurs spécialisés pour certains types d'éléments.

Vous apprendrez également à parcourir les éléments sélectionnés pour appliquer à chacun d'entre eux un traitement spécifique. Cette technique est très importante. Elle sera souvent utilisée dans les autres chapitres de ce cours.

Sélecteurs d'attributs

Arrivés à ce point dans la lecture du cours, vous savez sélectionner les éléments qui contiennent :

  • un attribut donné, en utilisant le sélecteur$('[nom]');

  • un attribut donné qui a une certaine valeur, en utilisant le sélecteur$('[nom=valeur]').

Le tableau suivant dresse la liste des sélecteurs d'attributs évolués auxquels nous allons nous intéresser.

Sélecteur

Éléments sélectionnés

['nom*="valeur"']

Éléments qui possèdent un attributnomqui contient (partiellement ou totalement) la valeur spécifiée.

['nom~="valeur"']

Éléments qui possèdent un attributnomqui contient la valeur spécifiée, délimité par des espaces.

['nom$="valeur"']

Éléments qui possèdent un attributnomqui se termine par la valeur spécifiée.

['nom!="valeur"']

Éléments qui ne possèdent pas l'attributnom, ou qui possèdent un attributnomdifférent de la valeur spécifiée.

['nom^="valeur"']

Éléments qui possèdent un attributnomqui commence par la valeur spécifiée.

Pour bien comprendre comment fonctionnent ces sélecteurs, nous allons travailler avec le code suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <img src="canard.jpg" title="animal canard" border="11">
    <img src="chat.jpg" title="animal chat" border="4">
    <img src="cheval.jpg" title="cheval" border="2">
    <img src="chien.jpg" title="animal chien"  border="8">
    <img src="girafe.jpg" title="girafe" border="4">

    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Le code jQuery sera inséré ici
      }); 
    </script>
  </body>
</html>

Le corps du document contient cinq balises<img>. Chacune d'entre elles a trois attributs :src,titleetborder. Nous allons utiliser plusieurs sélecteurs d'attribut évolués pour modifier la couleur de certaines bordures d'images. Après que les images ont été définies, une balise<script>fait référence à la bibliothèque jQuery et une autre délimite le code jQuery que nous allons écrire. L'instruction$(function() {attend la disponibilité du DOM. Les instructions jQuery seront placées à la place du commentaire.

L'image suivante est le résultat lorsqu'on exécute ce code dans Internet Explorer.

Le code exécuté dans Internet Explorer
Le code exécuté dans Internet Explorer

Nous allons tracer une bordure rouge autour de certaines images en utilisant la méthode jQuerycss()suivante :

$('selecteur').css('border-color','red');

… oùselecteurest un des sélecteur CSS du tableau suivant :

Critère

Sélecteur

Image modifiée

Image dont l'attributbordercontient partiellement ou totalement la valeur « 1 ».

$('[border*="1"]')

1

Image dont l'attributtitlecontient le mot « animal » délimité par une espace.

$('[title~="animal"]')

1, 2, 4

Image dont l'attributsrcse termine par « e.jpg ».

$('[src$="e.jpg"]')

5

Image qui ne possède pas un attributborderégal à « 15 ».

$('[border!="15"]')

1, 2, 3, 4, 5

Image dont l'attributsrccommence par « ch ».

$('[src^="ch"]')

2, 3, 4

Sélecteurs hiérarchiques

Dans l'arborescence DOM, à l'exception dehtml, tous les éléments ont un parent, et certains éléments ont un ou plusieurs enfants. Cette section s'intéresse aux sélecteurs hiérarchiques, avec lesquels vous pourrez sélectionner les enfants d'un certain parent, l'énième enfant d'un parent, les enfants uniques, etc.

Sélecteur

Éléments sélectionnés

('p > e')

Élémentsedirectement descendants d'élémentsp

('p + e')

Élémentsedirectement précédés d'un élémentp

('p ~ e')

Élémentseprécédés d'un élémentp

:empty

Éléments qui n'ont pas d'enfant

:first-child

Premier enfant

:first

Premier élément

:last-child

Dernier enfant

:last

Le dernier élément de la sélection

:nth-child()

Élément qui est l'énième enfant de son parent

:only-child

Éléments qui sont enfants uniques de leur parent

Rien de tel qu'un peu de code pour bien comprendre comment fonctionnent ces sélecteurs. Ici, nous utiliserons des listes imbriquées :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <div id="listes">
      <ul id="ul1">
        <li> Elément de liste 1
          <ul id="ul2">
            <li> Enfant 1</li>
            <li> Enfant 2</li>
          </ul>
        </li>
        <li> Elément de liste 2</li>
        <li> Elément de liste 3</li>
        <li> Elément de liste 4</li>
      </ul>
    </div>
  
    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Le code jQuery sera inséré ici
      }); 
    </script>
  </body>
</html>

L'image suivante représente ce code exécuté dans Internet Explorer.

Le code précédent exécuté dans Internet Explorer
Le code précédent exécuté dans Internet Explorer

Nous allons afficher en rouge certains éléments de ces listes imbriquées en utilisant la méthode jQuerycss()suivante :

$(function() {
    $('sel').css('color','red');
});

… oùselest un des sélecteur CSS du tableau suivant :

Critère

Sélecteur

Élément modifié

Élémentsuldirectement descendants d'élémentsli

$('li > ul')

2, 3

Élémentslidirectement précédés d'un élémentli

$('li + li')

3, 4, 5, 6

Premier élémentlienfant

$('li:first-child')

1, 2, 3

Premier élémentli

$('li:first')

1, 2, 3

Dernier élémentli

$('li:last')

6

Dernier élémentlienfant

$('li:last-child')

3, 6

Élémentslienfants uniques de leur parent

$('li:only-child')

aucun

Deuxième enfantli

$('li:nth-child(2)')

3, 4

Pseudo-sélecteurs d'éléments sélectionnés

Lorsque vous utilisez un sélecteur CSS, un ou plusieurs éléments sont sélectionnés dans le DOM. En ajoutant un pseudo-sélecteur au sélecteur, vous allez pouvoir filtrer la sélection en ne conservant que les éléments pairs, impairs, ayant un certain index, etc. Regardez le tableau suivant :

Sélecteur

Éléments sélectionnés

:even

Éléments pairs

:odd

Éléments impairs

:eq()

Élément dont l'index est spécifié

:gt()

Éléments dont l'index est supérieur à (greater than) l'index spécifié

:lt()

Éléments dont l'index est inférieur à (lower than) l'index spécifié

Pour varier les plaisirs, nous allons effectuer des sélections dans une série de paragraphes. Voici le code HTML utilisé :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <p>Paragraphe 1</p>
    <p>Paragraphe 2</p>
    <p>Paragraphe 3</p>
    <p>Paragraphe 4</p>
    <p>Paragraphe 5</p>

    <script src="jquery.js"></script>
    <script>
      $(function() {
        //Le code jQuery sera inséré ici
      }); 
    </script>
  </body>
</html>

Nous allons afficher en rouge certains éléments de ces listes imbriquées en utilisant la méthode jQuerycss().

Critère

Sélecteur

Paragraphe modifié

Élémentsppairs

$('p:even')

1, 3, 5

Élémentspimpairs

$('p:odd')

2, 4

Élémentspaprès le deuxième

$('p:gt(1)')

3, 4, 5

Élémentpd'index 4

$('p:eq(3)')

4

Élémentspavant le quatrième

$('p:lt(3)')

1, 2, 3

Sélecteurs d'éléments particuliers

Cette section s'intéresse à des sélecteurs propres à certaines balises ou difficilement classables dans les autres catégories. Regardez le tableau suivant :

Sélecteur

Éléments sélectionnés

:header

Tous les titres<h1>à<h6>

:hidden

Éléments cachés

:visible

Éléments visibles

:not()

Éléments qui ne correspondent pas au sélecteur spécifié

Voici le code utilisé pour tester ces sélecteurs :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <h1>Titre de niveau 1</h1>
    <h2>Titre de niveau 2</h2>
    <h3>Titre de niveau 3</h3>
    <p>Un paragraphe de texte</p>
    <div>Texte dans une balise div</div>

    <script src="jquery.js"></script>
    <script>
      $(function() {
        $('div').hide();
        //Le code jQuery sera inséré ici
      }); 
    </script>
  </body>
</html>

Ligne 17, l'instruction jQuery dissimule la balise<div>à l'aide de la méthodehide(). Testez tour à tour les trois instructions jQuery suivantes :

Critère

Instruction jQuery

Effet

Sélection de tous les titres

$(':header').css('color','red');

Les titres<h1>,<h2>et<h3>sont affichés en rouge.

Affichage des éléments cachés

$('div:hidden').show();

L'élémentdivqui avait été caché à la ligne 17 est affiché.

Dissimulation de tous les titres sauf le titre<h1>

$(':header:not(h1)').hide();

Toutes les balises de titre sont cachées, à l'exception de la balise <h1>.

Pseudo-sélecteurs spécifiques aux formulaires

Les formulaires ont leur propre jeu de pseudo-sélecteurs CSS. En les utilisant, il est très simple de s'adresser à un élément ou un type d'élément en particulier. Regardez le tableau suivant :

Pseudo-sélecteur

Éléments sélectionnés

:input

Tous les éléments de typeinput,textarea,selectetbutton

:button

Éléments de typebutton

:checkbox

Éléments de typecheckbox

:checked

Éléments qui sont cochés

:radio

Éléments de typeradio

:reset

Éléments de typereset

:image

Tous les boutons de typeimage

:submit

Éléments de typesubmit

:text

Éléments de typetext

:password

Éléments de typepassword

:selected

Éléments sélectionnés

:focus

Sélectionne l'élément s'il a le focus

:enabled

Éléments validés

Pour illustrer ces pseudo-sélecteurs, nous allons utiliser un formulaire très classique contenant :

  • une zone de texte ;

  • un mot de passe ;

  • deux boutons radio ;

  • une zone de texte multiligne ;

  • un bouton submit et un bouton reset ;

  • un bouton image.

Voici le code :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <form>
      Nom d'utilisateur
      <input type="text" name="nom"><br />

      Mot de passe
      <input type="password" name="pass"><br />

      Sexe
      Homme <input type="radio" name="sexe" value="H">
      Femme <input type="radio" name="sexe" value="F"><br />

      Commentaires
      <textarea rows="3" name="commentaires">Tapez vos commentaires ici</textarea><br />

      <input type="image" src="chat.jpg"><br />

      <input type="submit" value="Envoyer">
      <input type="reset" value="Annuler">
    </form> 

    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Le code jQuery sera tapé ici
      }); 
    </script>
  </body>
</html>

Exécuté, ce code ressemble à l'image suivante :

Le code précédent exécuté dans Internet Explorer
Le code précédent exécuté dans Internet Explorer

Nous allons modifier la couleur d'arrière-plan de certains éléments du formulaire et modifier la taille du bouton image en utilisant quelques lignes de jQuery, comme au tableau suivant :

Action à accomplir

Instruction jQuery/JavaScript

Effet

Coloration de tous les champs de saisie

$(':input').css('background','yellow');

Les zones de texte, boutons radio et boutons ont un arrière-plan de couleur jaune.

Coloration d'un champ de saisie particulier

$(':password').css('background','yellow');

Le champ de typepassworda un arrière-plan de couleur jaune.

Redimensionnement d'un champ de typeimage

$(':image').css('width','100px');

Le champinputde typeimageest redimensionné pour avoir une largeur de 100 px.

Focus au premier champ de saisie et coloration en jaune

document.forms[0].nom.focus(); $(':focus').css('background','yellow');

La première instruction donne le focus au premier champ de saisie et la deuxième colore son arrière-plan en jaune.

Sélecteurs utilisés dans les tableaux

Si les tableaux n'ont pas de sélecteurs spécifiques, plusieurs des sélecteurs évoqués dans les sections précédentes sont cependant bien pratiques pour mettre en forme rapidement des tableaux HTML.

Pseudo-sélecteur

Éléments sélectionnés

:first

Premier élément

:last

Dernier élément

:eq()

Élément dont l'index est spécifié

:gt()

Éléments dont l'index est supérieur à l'index spécifié

:lt()

Éléments dont l'index est inférieur à l'index spécifié

:even

Éléments d'index pair

:odd

Éléments d'index impair

:empty

Éléments qui n'ont pas d'enfant

:not()

Éléments qui ne correspondent pas au sélecteur spécifié

Nous allons mettre en application ces pseudo-sélecteurs en les appliquant sur le tableau défini en HTML que voici :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <form>
      <table border=1>
      <tr><td></td><td>Salle 1</td><td>Salle 2</td></tr>
      <tr><td>Lundi</td><td>X</td><td>X</td></tr>
      <tr><td>Mardi</td><td></td><td></td></tr>
      <tr><td>Mercredi</td><td>X</td><td></td></tr>
      <tr><td>Jeudi</td><td></td><td>X</td></tr>
      <tr><td>Vendredi</td><td>X</td><td>X</td></tr>
      </table>
    </form> 

    <script src="jquery.js"></script>
    <script>
      $(function() {
        $('td').css('text-align','center');
        // Le code jQuery sera tapé ici
      }); 
    </script>
  </body>
</html>

Nous allons affecter la couleur jaune à l'arrière-plan de certaines cellules du tableau en utilisant la méthode jQuerycss().

Action recherchée

Sélecteur

Coloration de la première cellule

$('td:first')

Coloration de la dernière ligne

$('tr:last')

Coloration des cellules vides

$(':empty')

Coloration des lignes paires

$('tr:even')

Coloration des cellules paires

$('td:even')

Coloration des lignes d'index supérieur à 2

$('tr:gt(1)')

Coloration des lignes d'index supérieur à 1, et, dans le sous-ensemble correspondant, des lignes d'index inférieur à 5

$('tr:gt(0):lt(4)')

Coloration des cellules d'index supérieur à 5, et, dans le sous-ensemble correspondant, des cellules d'index inférieur à 11

$('td:gt(4):lt(10)')

Coloration de toutes les lignes à l'exception de la dernière

$('tr:not(tr:last)')

Parcourir les éléments sélectionnés

Tout au long de ce chapitre, vous avez vu qu'il suffisait d'appliquer une méthode jQuery aux éléments sélectionnés pour agir immédiatement sur ces éléments. Dans cette section, je vais vous montrer une autre façon d'interagir plus finement sur la sélection, en utilisant la méthodeeach().

Supposons par exemple que trois images soient affichées dans une page Web. Ces images sont repérées par leur chemin :images1/i1.jpg,images1/i2.jpgetimages1/i3.jpg. Comment feriez-vous en jQuery pour que ces images soient lues dans le dossierimages2et non dans le dossierimages1? Au risque de vous décevoir, c'est tout bonnement impossible avec vos connaissances actuelles en jQuery ! Pour résoudre cet exercice, il faudrait pouvoir agir de façon individuelle sur l'attributsrcde chaque balise<img>.

Pour arriver à nos fins, nous allons utiliser la méthodeeach(), qui passe en revue les éléments sélectionnés par une requête jQuery et permet de les modifier en utilisant des instructions JavaScript. La syntaxe de la méthodeeach()est la suivante :

$('sel').each(function(index){
  //Une ou plusieurs instructions JavaScript
});

… où :

  • selest un sélecteur CSS, comme ceux que nous avons utilisés jusqu'ici ;

  • indexest une variable JavaScript qui représente la position de l'élément dans la sélection. Il aura pour valeurs consécutives 0, 1, 2, etc. jusqu'à ce que tous les éléments aient été passés en revue ;

Jusqu'ici, rien de bien méchant ! Cependant, une question se pose : comment accéder à l'élément courant, c'est-à-dire à l'élément à modifier ? Pour cela, vous devez utiliser le motthis. Si vous avez suivi ce que j'ai dit un peu plus haut, la modification se fera via l'attributsrcde la balise<img>. Eh bien, dans ce cas, vous utiliserez l'expressionthis.src.

Examinons le code suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <img src="images1/i1.jpg">
    <img src="images1/i2.jpg">
    <img src="images1/i3.jpg">
    
    <script src="jquery.js"></script>
    <script>
      $(function() {
        $('img').each(function(index){
          this.src = 'images2/i' + (index+1) + '.jpg';
        });  
      }); 
    </script>
  </body>
</html>

Nous retrouvons nos trois images, l'appel à jQuery ainsi que quelques instructions. Lorsque le DOM est disponible, les images du document sont sélectionnées avec le sélecteurimget les éléments sélectionnés sont parcourus avec la méthodeeach(). Une seule ligne est nécessaire pour modifier les adresses des images :

this.src = 'images2/i' + (index+1) + '.jpg';

Le termethis.srccorrespond à l'attributsrcde la balise<img>en cours de traitement. Étant donné qu'il y a trois images à traiter, la variableindexva prendre les valeurs 0, 1 puis 2. Le terme'images2/i' + (index+1) + '.jpg'aura donc pour valeurs consécutivesimages2/i1.jpg,images2/i2.jpgetimages2/i3.jpg, ce qui est exactement l'effet recherché.

Conversion jQuery/DOM

Conversion d'un élément du DOM en un objet jQuery

Si vous avez suivi attentivement ce tutoriel, vous savez que le simple fait d'utiliser un sélecteur jQuery convertit un élément (ou un ensemble d'éléments) du DOM en un objet jQuery. Ainsi par exemple, l'instruction$('div')retourne un objet jQuery qui donne accès à toutes les balises<div>du document. La première balise<div>est alors accessible avec$("div")[0];, la deuxième avec$("div")[1];, et ainsi de suite.

Conversion d'une variable JavaScript en un objet jQuery

jQuery et JavaScript font bon ménage ensemble, et il est fréquent d'entremêler des instructions jQuery et des instructions JavaScript. Fatalement, un jour ou l'autre, vous voudrez convertir une variable JavaScript en un objet jQuery pour pouvoir lui appliquer les puissantes méthodes de ce langage. Eh bien, il n'y a rien de plus simple :

var variableJS = 'un simple texte';
var variableJQ = $(variableJS);

La première ligne crée une variable JavaScript en lui affectant un simple texte. La deuxième la convertit en un objet jQuery en « l'enveloppant » avec l'alias$().

Conversion d'un objet jQuery en un élément du DOM

Il est parfois nécessaire d'appliquer un traitement JavaScript à un objet jQuery. Étant donné que seules les méthodes jQuery peuvent être appliquées aux objets jQuery, une conversion jQuery vers DOM est alors nécessaire. Pour cela, vous appliquerez la méthode.get()à un sélecteur jQuery.

Par exemple, si un document contient plusieurs balises<span>, il est possible de les convertir en un tableau JavaScript avec l'instruction suivante :

var spans = $('span').get();

Ici, le tableau est stocké dans la variable JavaScriptspans. La valeur stockée dans la première cellule du tableau est obtenue avecspans[0].innerHTML, la valeur stockée dans la deuxième cellule du tableau est obtenue avecspans[1].innerHTML, et ainsi de suite…

  • Il est possible d'affiner la sélection d'éléments grâce aux sélecteurs d'attributs, aux pseudo-sélecteurs et aux sélecteurs hiérarchiques.

  • Les formulaires ont leur propre jeu de pseudo-sélecteurs. Faciles à mémoriser, ils ont le nom des balises correspondantes et sont précédés d'un « : ».

  • En utilisant un sélecteur jQuery, on obtient un objet jQuery qui contient zéro, un ou plusieurs éléments du DOM. On peut appliquer un traitement global à ces éléments en leur appliquant une méthode jQuery. Lorsqu'un traitement global n'est pas suffisant, on utilise une boucleeach.

  • Avec une boucleeach, les différents éléments sélectionnés sont parcourus un à un. Ils sont repérés par leur index, dont le nom est spécifié en paramètre de la fonction. Le traitement est réalisé par une ou plusieurs instructions JavaScript.

  • Il est parfois utile de convertir des objets jQuery en éléments du DOM et inversement. La transformation DOM vers jQuery se fait en utilisant un sélecteur, et éventuellement en le limitant à un des éléments retournés. Quant à la transformation jQuery vers DOM, elle repose sur l'utilisation de la méthodeget().

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