Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:jquery:css [2026/04/01 16:51] – mno
+++ web:jquery:css [2026/04/01 17:40] (Version actuelle) – [1. Présentation] mno
@@ Ligne 12: / Ligne 12: @@
 \\
-<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 ====
@@ Ligne 20: / Ligne 20: @@
 === 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//
@@ Ligne 31: / Ligne 31: @@
 === 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 - Affichage d'un texte (à tester dans **ex1.html**)//
@@ Ligne 47: / Ligne 47: @@
 === 1.3  La méthode .css de la bibliothèque jQuery ===
-<callout type="primary" icon="true">La méthode **.css** applique une **déclaration de style** sur l'élément sélectionné.</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 - Changer la couleur d'un texte (compléter ex1.html)// :
@@ Ligne 63: / Ligne 63: @@
   * //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 -->
@@ Ligne 90: / Ligne 91: @@
 === 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 - afficher un bloc de couleur (à tester dans ex3.html)// :
+  * //Exemple - Afficher un bloc de couleur (à tester dans ex3.html)// :
+{{ :web:jquery:css2.png?nolink&200|}}
 <code html5 *.html>
   <!-- Fichier ex3.html -->
@@ Ligne 142: / Ligne 144: @@
 fin
 </code>
+<callout type="primary" icon="true" title="Codage">**A coder** dans le fichier **ex4.html**</callout>
 \\
@@ Ligne 171: / Ligne 175: @@
 </code>
+<callout type="primary" icon="true" title="Codage">**A coder** dans le fichier **ex5.html**</callout>