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/03/30 19:31] – [1. Présentation] 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="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>
  
Ligne 43: 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">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{
Ligne 77: Ligne 82:
  
 <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>
  
Ligne 86: 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//+  * //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 */
Ligne 107: Ligne 113:
  
 <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>
Ligne 113: Ligne 119:
 \\ \\
  
-==== 2. Changer la couleur d'un bloc  ==== +==== 2. Applications ====
-=== 2.1 Changer la couleur d'un bloc en fonction d'un entier N === +
-  * **Objectif** : changer la couleur d'un bloc en fonction d'un entier.+
  
-  * //Algorithme partiel proposé//+=== 2.1 Changer la couleur d'un bloc en fonction d'un entier N === 
 +  * **Algorithme partiel proposé**
 <code> <code>
 +var
 + N : entier
 +
 +début
  Lire(N)  Lire(N)
- si val0 <= N < val1 alors+ si N < const0 alors 
 +   changer_couleur_bloc 
 + sinon si const0 <= N < val1 alors
    changer_couleur_bloc    changer_couleur_bloc
  sinon si val1 <= N < val2  sinon si val1 <= N < val2
Ligne 131: Ligne 142:
    changer_couleur_bloc    changer_couleur_bloc
  fin si  fin si
 +fin
 </code> </code>
  
-==== 3. Changer la couleur d'un bloc en fonction d'un entier N ====+<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> 
  
-==== 4. Changer la couleur de n bloc en fonction d'un entier N ==== 
  
  
  • web/jquery/css.1774891878.txt.gz
  • Dernière modification : 2026/03/30 19:31
  • de mno