[[web:accueilweb|{{ :iconemaison.jpg?nolink&25|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 ici le dossier contenant les exercices proposés dans ce document. Ouvrez-le dans VSCode. ==== 1. Présentation ==== La bibliothèque **jQuery**((jQuery- Simplifiez et enrichissez vos développements JavaScript - Pearson - J. Chaffer)) se fonde sur la puissance des [[..:basescss|sélecteurs CSS]]((Les sélecteurs CSS permettent de cibler des éléments HTML auxquels appliquer des styles.)) pour que nous puissions accéder rapidement t facilement ou à des groupes d'éléments du [[..:javascript:avance:dom|DOM]]((Le DOM est la représentation en mémoire d'une page HTML sous forme d'arbre d'objets manipulables par JavaScript.)). \\ === 1.1 La fonction $() === 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 === La méthode **.html()** permet de lire ou modifier le contenu HTML d'un élément. {{ :web:jquery:htmlnoir.png?nolink|}} * //Exemple - Affichage d'un texte (à tester dans **ex1.html**)//


  // 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 === La méthode **.css** applique une **déclaration de style** sur l'élément sélectionné. {{ :web:jquery:htmlnoir.png?nolink|}} * //Exemple 1 - Changer la couleur d'un texte (compléter ex1.html)// :


  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

* //Exemple 2 - Changer la couleur d'un bloc (à tester dans ex2.html)// : {{ :web:jquery:css1.png?nolink&100|}}


  
  Cel_a 
 A cliquer


  /* 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;
  }


  /* 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 === Ajoute une **classe CSS** à l'élément, dont les styles sont définis dans une feuille de style externe. * //Exemple - Afficher un bloc de couleur (à tester dans ex3.html)// : {{ :web:jquery:css2.png?nolink&200|}}


  
  Cel_b


  /* 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;
  }


  /* 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 === * **Algorithme partiel proposé**


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

**A coder** dans le fichier **ex4.html** \\ === 2.1 Changer la couleur de n blocs en fonction d'une liste d'entier Ni === * **Algorithme partiel proposé**


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

**A coder** dans le fichier **ex5.html**