web:jquery:css [WebGEPEM]

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
[[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).

\\
<callout icon="fa fa-hand-stop-o" color="red" title="Télécharger">Télécharger <html><a href="https://webge.fr//doc/projets/tsin/00_Ressources_communes/Selection et decoration des elements du DOM Eleve.zip"><strong>ici</strong></a></html> le dossier contenant les exercices proposés dans ce document. Ouvrez-le dans VSCode.</callout>

==== 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 $() ===
<callout type="info" icon="true" title="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.</callout>

//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 ===
<callout type="info" icon="true" title="Rôle">La méthode **.html()** permet de lire ou modifier le contenu HTML d'un élément.</callout>
{{ :web:jquery:htmlnoir.png?nolink|}}
  * //Exemple - Affichage d'un texte (à tester dans **ex1.html**)//
<code html5 ex1.html>
  <div id="val1"></div> <!-- création d'un bloc val1 vide sur la page web -->
</code>

<code javascript *.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
</code>

\\

=== 1.3  La méthode .css de la bibliothèque jQuery ===
<callout type="info" icon="true" title="Rôle">La méthode **.css** applique une **déclaration de style** sur l'élément sélectionné.</callout>
{{ :web:jquery:htmlnoir.png?nolink|}}
  * //Exemple 1 - Changer la couleur d'un texte (compléter ex1.html)// : 
<code html5 *.html>
  <!-- Fichier ex1.html -->
  <div id="val1"></div> <!-- création d'un bloc val1 vide sur la page web -->
</code>

<code javascript *.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 
</code>

  * //Exemple 2 - Changer la couleur d'un bloc (à tester dans ex2.html)// : 
{{ :web:jquery:css1.png?nolink&100|}}
<code html5 ex2.html>
  <!-- Fichier ex2.html -->
  <div id="cel_a">Cel_a <br> A cliquer</div> <!-- création d'un bloc cel_a à cliquer -->
</code>

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

<code javascript *.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 
</code>

\\

=== 1.4 La méthode .addClass de la bibliothèque jQuery ===
<callout type="info" icon="true" title="Rôle">Ajoute une **classe CSS** à l'élément, dont les styles sont définis dans une feuille de style externe.</callout>  

  * //Exemple - Afficher un bloc de couleur (à tester dans ex3.html)// : 
{{ :web:jquery:css2.png?nolink&200|}}
<code html5 *.html>
  <!-- Fichier ex3.html -->
  <div id="cel_b">Cel_b</div> <!-- création d'un bloc cel_b -->
</code>

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

<code javascript *.js>
  /* A placer dans ex3.html */
  $("#cel_b").addClass('cel_b') // Affichage du bloc cel_b en gris
</code>

\\

==== 2. Applications ====

=== 2.1 Changer la couleur d'un bloc en fonction d'un entier N ===
  * **Algorithme partiel proposé**
<code>
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
</code>

<callout type="primary" icon="true" title="Codage">**A coder** dans le fichier **ex4.html**</callout>

\\

=== 2.1 Changer la couleur de n blocs en fonction d'une liste d'entier Ni ===
  * **Algorithme partiel proposé**
<code>
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
</code>

<callout type="primary" icon="true" title="Codage">**A coder** dans le fichier **ex5.html**</callout>