web:jquery:css

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
web:jquery:css [2026/04/01 15:50] – mnoweb:jquery:css [2026/04/01 17:40] (Version actuelle) – [1. Présentation] mno
Ligne 3: Ligne 3:
 ===== 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]
  
 \\ \\
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 ==== ==== 1. Présentation ====
Ligne 20: Ligne 20:
  
 === 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//
Ligne 31: Ligne 31:
  
 === 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 - Affichage d'un texte (à tester dans **ex1.html**)//   * //Exemple - Affichage d'un texte (à tester dans **ex1.html**)//
 <code html5 ex1.html> <code html5 ex1.html>
Ligne 39: Ligne 39:
  
 <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>
  
Ligne 47: Ligne 47:
  
 === 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">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 : 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 -->
Ligne 56: Ligne 56:
  
 <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 -->
Ligne 84: Ligne 85:
  $('#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>
  
Ligne 90: Ligne 91:
  
 === 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 -->
Ligne 117: Ligne 119:
 \\ \\
  
-==== 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 ===
Ligne 142: Ligne 144:
 fin fin
 </code> </code>
 +
 +<callout type="primary" icon="true" title="Codage">**A coder** dans le fichier **ex4.html**</callout>
  
 \\ \\
Ligne 171: Ligne 175:
 </code> </code>
  
 +<callout type="primary" icon="true" title="Codage">**A coder** dans le fichier **ex5.html**</callout>
  
  
  
  
  • web/jquery/css.1775051455.txt.gz
  • Dernière modification : 2026/04/01 15:50
  • de mno