TP1 jQuery
TP1 jQuery
-
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.
-
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 !
<! 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>