Objectifs
- Être capable de manipuler jQuery.
Exercice 01
Énoncé
- Soit le fichier HTML :
- Questions
- Écrire le code jQuery permettant d'afficher le contenu du div correspondant au titre sur lequel on clique.
- Écrire le code jQuery permettant de masquer le contenu de tous les listes .
- Écrire le code jQuery permettant d'afficher le contenu de tous les listes .
- Écrire le code jQuery permettant de masquer le premier paragraphe du document.
<! doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Mes cours</title> </head> <body> <fieldset style="border-radius: 10px; width:400px;padding-left:50px;"> <legend>Cours de programmation</legend> <h1>Mes cours</h1> <p>Ceci est le premier paragraphe</p> <p class="intro">Ce cour est recommandé aux personnes qui, sans être des professionnels, souhaitent apprendre à programmer et aux étudiants.</p> <div id="lesCours" > <h1 onClick="afficherCeContenu (1)">HTML5</h1> <div id="contenu1" style="display:none"> <ol id="liste"> <li>Présentation du HTML</li> <li>Les principes de base de HTML</li> </ol> </div> <h1 onClick="afficherCeContenu (2)">CSS3</h1> <div id="contenu2" style="display:none"> <ol id="liste"> <li>Présentation</li> <li>Structure et règles CSS</li> <li>Les sélecteurs CSS</li> <li>Les unités de mesure en CSS</li> </p> </div> <h1 onClick="afficherCeContenu (3)">JavaScript</h1> <div id="contenu3" style="display:none"> <ol id="liste"> <li>Historique du langage JavaScript</li> <li>Apport de JavaScript</li> <li>Les objets JavaScript</li> <li>Historique et versions</li> </ol> </div> </div> <input type="submit" name='masquer' value="Masquer les listes"/> </br></br> <input type="submit" name='afficher' value="Afficher les listes"/> </br></br> <input type="submit" name='msquer1Par' value="masquer le premier paragraphe"/> </fieldset> </body> </html>
Solution
- Essayez de faire l'exercice de votre côté avant de regarder la Solution!
Exercice 02
Énoncé
- Télécharger le fichier HTML suivant: TP1 exercice2
- Dans un fichier d'extension js écrire les fonctions jQuery qui permettant d'afficher le nombre d’occurrence de chaque élément, cité dans le texte du bouton, dans la zône de texte dédiée .
Solution
- Essayez de faire l'exercice de votre côté avant de regarder la Solution!