TP4-3 jQuery

Objectifs

• Etre capable d'utiliser les sélecteurs jQuery.

Exercice 01

1. Énoncé

   1. Créez une page contenant quelques listes à puces et chargez jquery.js ou utilisez un CDN pour l'appeler.
   2. Déployez l'application, allez sur la page,puis faites apparaître FireBug. Maintenant, essayez quelques choses de manière interactive:
      • Trouver tous les éléments li
      • Trouvez tous les éléments li et faites-les disparaître. Faites-les ensuite réapparaître.
      • Faire disparaître les éléments li uniquement s'ils ont un nom de classe css de «test»
      • Faites en sorte que les éléments li deviennent bleus. Remettez-les dans leur état d'origine.
   3. Créez un bouton qui, lorsqu'il est enfoncé, transforme tous les éléments li en bleu. Faire un autre bouton qui les renvoie à leur état d'origine. Utilisez des gestionnaires onclick explicites dans le HTML.
   4. Répétez le problème ci-dessus, mais évitez tout JavaScript explicite dans la page HTML (c'est-à-dire, utilisez l'approche "discrète JavaScript" qui assigne au gestionnaire de clics par programme après que le DOM soit chargé).
   5. Faire un bouton qui, lorsqu'il est pressé, ne rend les éléments li bleus que si la liste est à l'intérieur d'un
      dont la classe CSS est colorChangeable.
   6. Créez un autre bouton qui les ramène à leur état d'origine. Faire assurez-vous que votre page HTML a au moins un <ul> à l'intérieur d'une telle div et au moins un <ul> à l'extérieur. Pour par exemple, voici du HTML qui a des éléments li qui correspondent:

   <div class = "colorChangeable">
    <ul>
        <li> Élément 1 </li>
        <li> Point 2 </li>
    </ul>
   </div>

   7. Faire un bouton qui, lorsqu'il est pressé, ne rend les éléments li bleus que si la liste est à l'intérieur d'un
      dont la classe CSS est colorChangeable, et seulement si l'élément li a une classe appelée modifiable. Faire un autre bouton qui les ramène à leur état d'origine.
   8. Créez un bouton qui, une fois enfoncé, masque lentement tous les éléments li. Faire un autre bouton qui fait ils réapparaissent.

   9. Solution

      • Essayez de faire l'exercice de votre côté avant de regarder la Solution!

   10. Exercice 02

       1. Énoncé

       2. Solution

          • Essayez de faire l'exercice de votre côté avant de regarder la Solution!
       Les sélecteurs hiérarchiques

       Travaux pratiques (TP4-2)

       ---

       Sommaire du cours jQuery