Médiaforma

jQuery – Sélectionner des éléments dans le DOM

Partagez cet article sur vos réseaux

Pour sélectionner des éléments dans le DOM, il suffit de les préciser, entre apostrophes, dans les paramètres de la fonction jQuery :

$('sélecteur')

 

Le tableau suivant rassemble quelques sélecteurs qu’il faut connaître.

Sélecteur Effet
div 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.
#premier 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.
.rouge Le point fait référence à l’attribut class d’une balise. Supposons que vous ayez défini la balise <h2 >. 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.
ul li 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>.
[src] 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].
[width=”40″] 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.

 

Tapez le code suivant et sauvegardez-le sous le nom selections.htm.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <ul>
      <li>Liste à puces 1 : élément 1</li>
      <li>Liste à puces 1 : élément 2</li>
      <li>Liste à puces 1 : élément 3</li>
    </ul>
    <div>
      <ul>
        <li>Liste à puces 2 : élément 1</li>
        <li>Liste à puces 2 : élément 2</li>
        <li>Liste à puces 2 : élément 3</li>
      </ul>
    </div>
    <ol>
      <li>Liste numérotée : élément 1</li>
      <li>Liste numérotée : élément 2</li>
      <li>Liste numérotée : élément 3</li>
    </ol>
    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Insérer le code jQuery ici
      });
      </script>
  </body>
</html>

 

Exercice

Pour l’instant, admettez que l’instruction suivante affecte un arrière-plan de couleur jaune à un élément HTML quelconque :

css(‘background-color’,’yellow’);

Ajoutez les sélecteurs nécessaires pour affecter la couleur d’arrière-plan yellow :

  1. à toutes les balises <ul>
  2. aux balises ul de classe vert
  3. aux balises <ul> contenues dans une balise <div>
  4. aux balises <li> contenues dans une balise <ul> contenues dans une balise <div> et dont l’attribut class vaut impair
  5. aux balises <li> contenues dans une balise <ol>
  6. aux balises <li> qui possèdent un attribut class

Solution

  1. $('ul').css('background-color','yellow');
  2. $('ul.vert').css('background-color','yellow');
  3. $('div ul').css('background-color','yellow');
  4. $('div ul li[class="impair"]').css('background-color','yellow');
  5. $('ol li').css('background-color','yellow');
  6. $('li[class]').css('background-color','yellow');
 
Commentaires

Aucun commentaire pour l'instant.

Laissez un commentaire