Université Ibn Tofail Année Universitaire 2023/2024
Faculté des sciences de Kenitra LUS
Département d’Informatique
JQuery
Exercice1 :
1. Créer un document HTML du nom « Ex1_JQuery.htm » contenant :
Dans la partie body :
<h1>Jouons avec jQuery</h1>
<h2>Petits tests préalables</h2>
<p id="demo1">Du texte manipulé avec Jquery !</p>
Dans la partie head :
Appel à la bibliothèque JQuery,
Appel à votre script du nom « Ex1_JQuery.js »
2. Créer le script « Ex1_JQuery.js » sous la syntaxe JQuery permettant de :
Sélectionner l'élément #demo1
Appliquer la méthode .text pour remplacer le contenu du paragraphe par « Salut tout
le monde »
Appliquer la méthode .css pour agrandir sa taille de police
Appliquer la méthode .css pour le colorer en rouge
Appliquer la méthode .append pour ajouter *** à « Salut tout le monde »
Appliquer la méthode .after pour créer un nouveau paragraphe <p>Test
réussi...</p>
Exercice 2 :
Vous allez créer une boite qui s'ouvre et se ferme au clic sur les boutons correspondants dans
le fichier "Ex1_JQuery.htm" à la suite du précédent exercice.
Page : 1
Résultat à obtenir :
Travail à faire :
Ajouter le code suivant à la fin du document « Ex1_JQuery.htm » et le renommer
« Ex2_JQuery.htm » :
<h2>2- Afficher / Masquer texte (2 boutons)</h2>
<div class="boite">
<p>Ceci est le texte à afficher/masquer.</p>
</div>
<button class="afficher">Afficher le texte</button> |
<button class="masquer">Masquer le texte</button>
Créer une feuille du style du nom « Ex2_JQuery.css » et l’appeler dans le document
« Ex2_JQuery.htm ». Ajouter ce code à cette feuille de style :
.boite {
padding: 10px;
background-color: blue;
border: 1px solid blue;
font-style: italic;
color : yellow ;
}
Créer un fichier script du nom « Ex2_JQuery.js », copier-coller dedans le code du
script « Ex1_JQuery.js », ajouter à la fin de ce code les instructions permettant de :
o Masquer par défaut la boite :
Sélectionner la boite et appliquer lui la méthode hide(),
o Afficher la boite au clic sur le bouton Afficher :
Sélectionner le bouton afficher et appliquer lui la méthode click(),
Le clic lance une fonction
A l'intérieur de cette fonction, sélectionnez l'élément boite et appliquer
lui la méthode show()
o Suivre la même démarche pour masquer la boite au clic sur le bouton Masquer.
Page : 2
Exercice 3 :
Vous allez créer maintenant une boite qui s'ouvre et se ferme au clic sur un seul bouton dans
le fichier "Ex2_JQuery.htm" à la suite du précédent exercice.
Résultat à obtenir :
Travail à faire :
Ajouter le code suivant à la fin du document « Ex2_JQuery.htm » et le renommer
« Ex3_JQuery.htm » :
<h2>3- Afficher/Masquer texte (1 bouton)</h2>
<div class="boite2">
<p>Ceci est le texte à afficher/masquer.</p>
</div>
<button class="afficher2">Afficher/Masquer</button>
Modifier le script « Ex2_JQuery.js » en appelant la méthode toggle() qui permet de
faire cela.
Exercice 4 :
Vous allez maintenant colorer la page en rouge au clic sur le bouton «rouge» et la faire
revenir en couleur normale au clic sur le bouton «reset».
Résultat à obtenir :
Page : 3
Travail à faire :
Ajouter le code suivant à la fin du document « Ex3_JQuery.htm » et le renommer
« Ex4_JQuery.htm » :
<h2>4- Colorer la page en rouge au clic</h2>
<button class="bg-rouge">rouge</button>
<button class="reset">reset</button>
Modifier le script « Ex3_JQuery.js » en appelant :
o La méthode addClass() qui permet d’ajouter une classe rouge qui change la
couleur d’arrière-plan en rouge.
o La méthode removeClass() qui permet de retirer cette classe.
Exercice 5 :
Vous allez ajouter maintenant une animation à votre site. Choisir dans une liste déroulante les
éléments qui vont changer de hauteur ou d’opacité avec le clic sur un bouton.
Résultat à obtenir :
Travail à faire :
Ajouter le code suivant à la fin du document « Ex4_JQuery.htm » et le renommer
« Ex5_JQuery.htm » :
<h2>Animation via jQuery</h2> <hr />
<label>Elément HTML à marquer :
<select name="zelem" id="zelem">
<option>h1</option> <option>p</option>
<option>label</option> <option>address</option>
</select>
</label>
<input type="button" value="Marquer" id="bouton" />
Page : 4
Modifier le script « Ex4_JQuery.js » en appelant :
o Les méthodes slideDown() et slideUp() qui permettent respectivement de
changer la hauteur des éléments sélectionnés afin de rendre visible ou invisible
dans la page.
o Les méthodes fadeIn() et fadeOut() qui permettent respectivement de changer
l’opacité des éléments sélectionnés afin de rendre visible ou invisible dans la
page.
Exercice 6 :
Créer sous la syntaxe du JQuery un script permettant de :
1. Au clic sur le titre «Développeurs d’Applications Web et Mobile » de la page « Entê[Link] » de
l’exercice 1 du 1er TP, l’opacité du titre est changé avec une vitesse de 1000ms.
2. Lors d’un double clic sur le corps du document « Entê[Link] », la couleur d’arrière-plan du
document prend le jaune.
Double Cliquer pour changer la couleur d’arrière-plan en jaune
Exercice 7 :
Reprendre l’exercice 9 de la série précédente (table de multiplication), et supprimer les
classes formTable et formEnt de l’élément Table du document HTML, puis créer sous la
syntaxe du JQuery :
1. Un script permettant d’ajouter ces classes CSS : formTable et formEnt lorsque la
souris passe au-dessus du tableau.
2. Un script permettant d’enchainer 2 animations personnalisées sur le tableau une fois la
souris quitte la zone du texte :
Page : 5
a. La 1ère animation augmente la largeur du tableau à 60% en 2 secondes,
b. La 2ème animation modifie l’épaisseur de la bordure du tableau à 20px en
2secondes.
Exercice 8 :
Reprendre l’exercice 10 de la série précédente (Inscription), et enlever les classes formTable
et formH1 des éléments Table et H1 du document HTML, puis ajouter deux boutons des noms
« Formater » et « Animer » à côté du bouton « valider », ensuite créer sous la syntaxe du
JQuery :
1. Un script permettant d’ajouter ces classes CSS : formTable et formH1 aux éléments
respectivement Table et H1 lorsqu’on clique par la souris sur le bouton « Formater ».
2. Un script permettant d’enchainer 2 animations personnalisées sur le tableau de
l’exercice1 lorsque la souris est sur le bouton Animer :
a. La 1ère animation augmente la largeur du titre H1 de 200px en 2 secondes,
b. La 2ème animation augmente la taille du texte du titre H1 de 20px en 2secondes.
Page : 6
