Afficher la pageAnciennes révisionsLiens de retourHaut de page 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> web/jquery/css.txt Dernière modification : 2026/04/01 17:40de mno