Médiaforma

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

Print Friendly

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');
Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply