| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
| web:jquery:css [2026/03/30 19:56] – [2. Changer la couleur d'un bloc] mno | web:jquery:css [2026/04/01 17:40] (Version actuelle) – [1. Présentation] mno |
|---|
| ===== JavaScript et jQuery - Sélection et décoration des éléments du DOM ===== | ===== JavaScript et jQuery - Sélection et décoration des éléments du DOM ===== |
| |
| [Mise à jour le 30/3/2026] | [Mise à jour le 1/4/2026] |
| |
| \\ | \\ |
| |
| \\ | \\ |
| | <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 ==== | ==== 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]] (Cascading Style Sheets) pour que nous puissions accéder rapidement t facilement ou à des groupes d'éléments du [[..:javascript:avance:dom|DOM]]. | 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 $() === | === 1.1 La fonction $() === |
| <callout type="primary" icon="true">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> | <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// | //Utilisation des trois sélecteurs de base// |
| ^ Sélecteur ^ CSS ^ jQuery ^ Description ^ | ^ Sélecteur ^ CSS ^ jQuery ^ Description ^ |
| | Nom de balise | p { } | $('p') | Sélectionne tous les paragraphes du document. | | | 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. | | | 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. | | | 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 === | === 1.2 La méthode .html de la bibliothèque jQuery === |
| * //Exemple// | <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> |
| <code html5 generic.html> | {{ :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 --> | <div id="val1"></div> <!-- création d'un bloc val1 vide sur la page web --> |
| </code> | </code> |
| |
| <code javascript generic.js> | <code javascript *.js> |
| let data = 12; | // A placer dans ex1.html |
| $("#val1").html(data); // $() sélectionne le bloc val1 et le rempli avec la valeur 12 | 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> | </code> |
| |
| |
| === 1.3 La méthode .css de la bibliothèque jQuery === | === 1.3 La méthode .css de la bibliothèque jQuery === |
| <callout type="primary" icon="true">Applique des styles directement sur l'élément à l'aide d'une **déclaration de style**.</callout> | <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// | * //Exemple 1 - Changer la couleur d'un texte (compléter ex1.html)// : |
| <code html5 *.html> | <code html5 *.html> |
| <!-- Fichier generique.html --> | <!-- Fichier ex1.html --> |
| <div id="val1"></div> <!-- création d'un bloc val1 vide sur la page web --> | <div id="val1"></div> <!-- création d'un bloc val1 vide sur la page web --> |
| </code> | </code> |
| |
| <code javascript *.js> | <code javascript *.js> |
| // fichier generic.js | |
| let data = 12; | let data = 12; |
| $("#val1").html(data); // $() sélectionne le bloc val1 et le rempli avec la valeur 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 | $("#val1").css('color','red'); // la valeur 12 est réécrite en rouge |
| </code> | </code> |
| |
| * //Exemple 2// | * //Exemple 2 - Changer la couleur d'un bloc (à tester dans ex2.html)// : |
| <code html5 *.html> | {{ :web:jquery:css1.png?nolink&100|}} |
| <!-- Fichier generique.html --> | <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 --> | <div id="cel_a">Cel_a <br> A cliquer</div> <!-- création d'un bloc cel_a à cliquer --> |
| </code> | </code> |
| |
| <code css *.css> | <code css *.css> |
| /* fichier generic.css */ | /* A placer dans ex2.html */ |
| /* Propriétés graphiques du bloc cel_a */ | /* Propriétés graphiques du bloc cel_a */ |
| #cel_a{ | #cel_a{ |
| |
| <code javascript *.js> | <code javascript *.js> |
| /* fichier generic.js */ | /* A placer dans ex2.html */ |
| $('#cel_a').click(function () { | $('#cel_a').click(function () { |
| $('#cel_a').css('background-color', 'yellow'); | $('#cel_a').css('background-color', 'yellow'); |
| }); // La couleur du bloc cel_a passe de grey à jaune | }); // La couleur du bloc cel_a passe de gris à jaune |
| </code> | </code> |
| |
| |
| === 1.4 La méthode .addClass de la bibliothèque jQuery === | === 1.4 La méthode .addClass de la bibliothèque jQuery === |
| <callout type="primary" icon="true">Ajoute une **classe CSS** à l'élément, dont les styles sont définis dans une feuille de style externe.</callout> | <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// | * //Exemple - Afficher un bloc de couleur (à tester dans ex3.html)// : |
| | {{ :web:jquery:css2.png?nolink&200|}} |
| <code html5 *.html> | <code html5 *.html> |
| <!-- Fichier generique.html --> | <!-- Fichier ex3.html --> |
| <div id="cel_b">Cel_b</div> <!-- création d'un bloc cel_b --> | <div id="cel_b">Cel_b</div> <!-- création d'un bloc cel_b --> |
| </code> | </code> |
| |
| <code css *.css> | <code css *.css> |
| /* fichier generic.css */ | /* A placer dans ex3.html */ |
| /* Propriétés graphiques du bloc cel_b */ | /* Propriétés graphiques du bloc cel_b */ |
| .cel_b{ /* classe */ | .cel_b{ /* classe */ |
| |
| <code javascript *.js> | <code javascript *.js> |
| /* fichier generic.js */ | /* A placer dans ex3.html */ |
| $("#cel_b").addClass('cel_b') // Affichage du bloc cel_b en gris | $("#cel_b").addClass('cel_b') // Affichage du bloc cel_b en gris |
| </code> | </code> |
| \\ | \\ |
| |
| ==== 2. Application : changer la couleur d'un bloc ==== | ==== 2. Applications ==== |
| |
| === 2.1 Changer la couleur d'un bloc en fonction d'un entier N === | === 2.1 Changer la couleur d'un bloc en fonction d'un entier N === |
| fin | fin |
| </code> | </code> |
| | |
| | <callout type="primary" icon="true" title="Codage">**A coder** dans le fichier **ex4.html**</callout> |
| |
| \\ | \\ |
| </code> | </code> |
| |
| | <callout type="primary" icon="true" title="Codage">**A coder** dans le fichier **ex5.html**</callout> |
| |
| |
| |
| |