Atelier 4 jQuery : Manipuler le DOM

Exercice 1
Soient le code HTML et CSS suivants générant le résultat ci-dessous :

<style>
.question { border: 3px solid black; margin: 10px; padding: 10px; background-color:#13a8a5;
position: relative; }
.question img { height: 100px;width: 100px; position: absolute; top: 50%; margin-top: -50px;
right: 10px; }
</style>
<p>Cliquez sur la réponse de votre choix</p>
<div class="question"> <p>Le code jQuery s'exécute :</p>
<ol>
<li id="r1">Dans le navigateur</li>
<li id="r2">Sur le serveur où est stocké le code</li>
<li id="r3">Tantôt dans le navigateur, tantôt sur le serveur</li>
</ol>
<img id = "img" src = "images/question.png" alt = "question"/>
</div>

Le résultat correspondant est le suivant :

Ecrire le code jQuery correspondant qui permet, lorsqu’on clique sur la réponse 1 qui est la réponse
correcte, de :
1- Supprimer les réponses 2 et 3 qui sont erronées.
2- Ajouter le détail de la réponse correcte.
3- Modifier la source de l’image en correct.png.
4- Changer la couleur de l’arrière plan en vert.
Et lorsqu’on clique sur une réponse erronées (réponse 2 ou 3), modifier la source de l’image en
faux.png. Puis changer la couleur de l’arrière plan en rouge.

Le résultat à obtenir est le suivant :

Page 1
 Lorsque la réponse est correcte Lorsque la réponse est erronée

Exercice 2
Soient le code HTML et CSS suivants générant le résultat ci-dessous :

<style>
#menu{ background-color:green; width:300px; }
#catalogue{ background-color:yellow; width:600px; padding:15px; }
</style>
<div id="menu">
<ul> <li>lien 1</li> <li>lien 2</li> <li>lien 3</li> </ul>
</div>
<div id="catalogue">
<table border="1" id="tableau">
<tr> <th>Désignation</th> <th>Quantité</th> th>Prix</th> <th><button id="supp"> Supprimer
</button> </th>
</tr>
<tr id="premLi">
<td><input type="text" id="des" value="0" /></td>
<td><input type="text" id="qt" value="0" /></td>
<td><input type="text" id="pr" value="0" /></td>
<td><button id="add">Ajouter</button></td>
</tr>
<tr> <td>P1</td> <td>2300</td> <td>4</td> <td><input type="radio" /></td> </tr>
<tr> <td>P2</td> <td>12</td> <td>8</td> <td><input type="radio" /></td> </tr>
</table>
</div>
<button id="vider">Vider le catalogue</button><button id="reaff">Réafficher le catalogue</button>

Le résultat correspondant est le suivant :

Page 2
Ecrire le code jQuery correspondant qui permet de :
1- Colorier l’arrière plan de la page en gris.
2- Vider la zone correspondante au catalogue lorsqu’on clique sur le bouton « Vider ».
3- Réafficher la zone correspondante au catalogue lorsqu’on clique sur le bouton « Réafficher ».
4- Affecter des liens hypertextes aux éléments de la liste de telle sorte que chaque lien ouvre
une page HTML ayant le même nom que le lien en question (ex : lien1 ->lien1.html).
5- Ajouter au tableau une ligne qui contient les données saisies dans le formulaire en cliquant
sur le bouton « Ajouter ».
6- Supprimer les lignes cochées du tableau, en clinquant sur le bouton « Supprimer ».

Page 3