Back

TP1 jQuery

TP1 jQuery

  1. Objectifs

    • Être capable de manipuler jQuery.

  2. Exercice 01

    • Énoncé
      • Soit le fichier HTML :
        • <! 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>



      • 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.
  3. Solution
    • Essayez de faire l’exercice de votre côté avant de regarder la Solution !

  4. 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 !



author avatar
Riadh HAJJI

Riadh HAJJI

Ces articles pourraient aussi vous intéresser

Correction application animate() V2
4 juillet, 2020

Animation avec jQuery La méthode animate() de jQuery (Correction des applications) La méthode animate() de jQuery v2 (Correction des applications) Animation d’images en Jquery Animation de formulaire avec Jquery TP1 Animation JQuery (Correction) La méthode animate() de jQuery Objectifs Connaitre les méthodes animate() Etre capable d’animer des modifications apportées aux propriétés CSS Application01 Énoncé Vous pouvez visualiser l’énoncé de l’application …

La méthode animate() de jQuery v2
4 juillet, 2020

Animation avec jQuery La méthode animate() de jQuery (Correction des applications) La méthode animate() de jQuery v2 (Correction des applications) Animation d’images en Jquery Animation de formulaire avec Jquery TP1 Animation JQuery (Correction) La méthode animate() de jQuery Objectifs Connaitre les méthodes animate() de deuxième variante Etre capable d’animer des modifications apportées aux propriétés CSS Présentation La méthode animate() existe …

Correction application animate()
3 juillet, 2020

Animation avec jQuery La méthode animate() de jQuery (Correction des applications) La méthode animate() de jQuery v2 (Correction des applications) Animation d’images en Jquery Animation de formulaire avec Jquery TP1 Animation JQuery (Correction) La méthode animate() de jQuery Objectifs Connaitre les méthodes animate() Etre capable d’animer des modifications apportées aux propriétés CSS Application01 Énoncé Vous pouvez visualiser l’énoncé de l’application …

Abonnez vous à notre chaîne YouTube gratuitement