Table des matières

Sommaire Web

JavaScript et jQuery - Sélection et décoration des éléments du DOM

[Mise à jour le 1/4/2026]


Prérequis

- Algorithmique (affectation, tests, boucles)
- Base de HTML, de CSS et de JavaScript (jQuery).


Télécharger

Télécharger ici le dossier contenant les exercices proposés dans ce document. Ouvrez-le dans VSCode.

1. Présentation

La bibliothèque jQuery1) se fonde sur la puissance des sélecteurs CSS2) pour que nous puissions accéder rapidement t facilement ou à des groupes d'éléments du DOM3).


1.1 La fonction $()

Rôle

Quel que soit le type de sélecteur que nous voulons employer dans jQuery, l'instruction débute toujours par la fonction $(). Cette fonction prend généralement en seul paramètre un sélecteur CSS et retourne un nouvel objet jQuery qui pointe sur les éléments correspondant dans la page.

Utilisation des trois sélecteurs de base

Sélecteur CSS jQuery Description
Nom de balise p { } $('p') Sélectionne tous les paragraphes du document.
Identifiant #un-id { } $('#un-id') Sélectionne l'élément unique du document dont l'identifiant est un-id.
Classe .une-classe { } $('.une-classe') Sélectionne tous les éléments du document ayant une-classe comme nom de classe.


1.2 La méthode .html de la bibliothèque jQuery

Rôle

La méthode .html() permet de lire ou modifier le contenu HTML d'un élément.

ex1.html
  <div id="val1"></div> <!-- création d'un bloc val1 vide sur la page web -->
*.js
  // A placer dans ex1.html
  let data = 12; // création d'une variable data
   $("#val1").html("Température = " + data  + "°C"); // $() sélectionne le bloc val1 et le rempli avec la valeur 12


1.3 La méthode .css de la bibliothèque jQuery

Rôle

La méthode .css applique une déclaration de style sur l'élément sélectionné.

*.html
  <!-- Fichier ex1.html -->
  <div id="val1"></div> <!-- création d'un bloc val1 vide sur la page web -->
*.js
  let data = 12;
   $("#val1").html("Température = " + data  + "°C"); // $() sélectionne le bloc val1 et le rempli avec la valeur 12
  // A placer dans ex1.html
  $("#val1").css('color','red'); // la valeur 12 est réécrite en rouge

ex2.html
  <!-- Fichier ex2.html -->
  <div id="cel_a">Cel_a <br> A cliquer</div> <!-- création d'un bloc cel_a à cliquer -->
*.css
  /* A placer dans ex2.html */
  /* Propriétés graphiques du bloc cel_a */
  #cel_a{
    width: 100px;
    height: 100px;
    background-color: grey;
    float: left;
    margin: 10px;
  }
*.js
  /* A placer dans ex2.html */
 $('#cel_a').click(function () {
    $('#cel_a').css('background-color', 'yellow');
  }); // La couleur du bloc cel_a passe de gris à jaune


1.4 La méthode .addClass de la bibliothèque jQuery

Rôle

Ajoute une classe CSS à l'élément, dont les styles sont définis dans une feuille de style externe.

*.html
  <!-- Fichier ex3.html -->
  <div id="cel_b">Cel_b</div> <!-- création d'un bloc cel_b -->
*.css
  /* A placer dans ex3.html */
  /* Propriétés graphiques du bloc cel_b */
  .cel_b{ /* classe */
    width: 100px;
    height: 100px;
    background-color: grey;
    float: left;
    margin: 10px;
  }
*.js
  /* A placer dans ex3.html */
  $("#cel_b").addClass('cel_b') // Affichage du bloc cel_b en gris


2. Applications

2.1 Changer la couleur d'un bloc en fonction d'un entier N

var
 N : entier

début
 Lire(N)
 si N < const0 alors
   changer_couleur_bloc
 sinon si const0 <= N < val1 alors
   changer_couleur_bloc
 sinon si val1 <= N < val2
   changer_couleur_bloc
    ...
    ...
 sinon si valn-1 <= N < valn
   changer_couleur_bloc
 sinon
   changer_couleur_bloc
 fin si
fin

Codage

A coder dans le fichier ex4.html


2.1 Changer la couleur de n blocs en fonction d'une liste d'entier Ni

Algoithme Changer_Couleur_nN
var
 tab = [N0,N1,..., Nn-1, Nn] # liste des valeurs de N

début
 Pour i de 0 à n faire
    si Tab[i] < const0 alors
      changer_couleur_bloci
    sinon si const0 <= Tab[i] < const1 alors
      changer_couleur_bloci
    sinon si const1 <= Tab[i] < const2
      changer_couleur_bloci
    ...
    ...
    sinon si constn-1 <= Tab[i] < constn
      changer_couleur_bloci
    sinon
      changer_couleur_bloci
    fin si
 fin pour
fin

Codage

A coder dans le fichier ex5.html
1)
jQuery- Simplifiez et enrichissez vos développements JavaScript - Pearson - J. Chaffer
2)
Les sélecteurs CSS permettent de cibler des éléments HTML auxquels appliquer des styles.
3)
Le DOM est la représentation en mémoire d'une page HTML sous forme d'arbre d'objets manipulables par JavaScript.