| 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/31 17:45] – 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=""><strong>ici</strong></a></html> le dossier contenant les exercices proposés dans ce document. Ouvrez-le dans VSCode.</callout> | <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 ==== |
| |
| === 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 === |
| <callout type="primary" icon="true">La méthode .html() permet de lire ou modifier le contenu HTML d'un élément.</callout> | <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 à tester dans ex1.html// : affichage d'un texte | * //Exemple - Affichage d'un texte (à tester dans **ex1.html**)// |
| <code html5 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 javascript *.js> | <code javascript *.js> |
| // A intégrer dans ex1.html | // A placer dans ex1.html |
| let data = 12; // création d'une variable data | let data = 12; // création d'une variable data |
| $("#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 |
| </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 : compléter ex1.html// : changer la couleur d'un texte | * //Exemple 1 - Changer la couleur d'un texte (compléter ex1.html)// : |
| <code html5 *.html> | <code html5 *.html> |
| <!-- Fichier ex1.html --> | <!-- Fichier ex1.html --> |
| |
| <code javascript *.js> | <code javascript *.js> |
| // Compléter ex1.html | |
| 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 à tester dans ex2.html// : changer la couleur d'un bloc | * //Exemple 2 - Changer la couleur d'un bloc (à tester dans ex2.html)// : |
| | {{ :web:jquery:css1.png?nolink&100|}} |
| <code html5 ex2.html> | <code html5 ex2.html> |
| <!-- Fichier ex2.html --> | <!-- Fichier 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 à tester dans ex3.html// : afficher un bloc de couleur | * //Exemple - Afficher un bloc de couleur (à tester dans ex3.html)// : |
| | {{ :web:jquery:css2.png?nolink&200|}} |
| <code html5 *.html> | <code html5 *.html> |
| <!-- Fichier ex3.html --> | <!-- Fichier ex3.html --> |
| \\ | \\ |
| |
| ==== 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> |
| |
| |
| |
| |