Vous êtes sur la page 1sur 3

Atelier 2 jQuery : Les filtres

Exercice 1
Reprendre l’exercice n°5 de l’atelier 1 en utilisant cette fois-ci une méthode de filtrage à la place de
l’utilisation de « length ».

Exercice 2
Soient les codes CSS et HTML suivants qui donnent le résultat ci-dessous.

<style>
.style_Pg{background-color:red;}
.style_Ct{background-color:blue;}
</style>

<table border="1">
<tr><th>Marques</th><th>Modèles</th></tr>
<tr><td rowspan="2">Peugeot</td><td class="Pg">308</td></tr>
<tr><td class="Pg">301</td></tr>
<tr><td rowspan="2">Citroên</td><td class="Ct">C2</td></tr>
<tr><td class="Ct">C4</td></tr>
</table>

Ecrire un code jQuery qui permet de colorer l’arrière plan en rouge les modèles correspondants à
« Peugeot » lorsqu’on passe la souris sur cette dernière. Et de même pour « Citroën» mais en bleu.
Le code prendra en compte le retour à l’état initial lorsqu’on éloigne le curseur.

Ex :
Passage de la souris sur la cellule de « Peugeot » Passage de la souris sur la cellule de « Citroën »

Page 1
Exercice 3
Soient les codes CSS et HTML suivants qui donnent le résultat ci-dessous.

<style>
.style_c{background-color:red;}
</style>

<form>
<input id="Bp" type="button" value="Pair"/>
<input id="Bi" type="button" value="Impair"/>
</form>
<table border="1" width="150">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>

Ecrire un code jQuery qui lorsqu’on clique sur le bouton « Bp » les cellules paires deviennent rouges.
Et lorsqu’on clique sur le bouton « Bi » ce sont les cellules impaires qui deviennent rouges.

Exercice 4
Soient les codes CSS et HTML suivants qui donnent le résultat ci-dessous.

<style>
.styleArr{background-color:yellow;}
</style>

<form>
<input id="rech" type="button" value="Rechercher tous les mots jQuery dans le paragraphe" />
</form>
<p>
<span id="tex1">jQuery</span> est une bibliothèque JavaScript gratuite. Le framework
<span id="tex2">jQuery</span> est une bibliothèque logicielle, rapide et concise.
<span id="tex3">jQuery</span> facilite le développement rapide d'applications web.
<span id="tex4">jQuery</span> fournit un socle éprouvé de propriétés et de méthodes
</p>

Ecrire un code jQuery qui lorsqu’on clique sur le bouton « rech » colore tous les mots « jQuery », en
jaune, dans le paragraphe.

Exercice 5
Soient les codes CSS et HTML suivants :

Page 2
<style>
#i1{top:50px; left:20px;}
#i2{top:50px; left:120px;}
#i3{top:50px; left:220px;}
</style>

<p><a href="#">Ajuster les tailles des images</a></p>


<img id="i1" src="images/i1.jpg" width="100"/>
<img id="i2" src="images/i2.jpg" width="200"/>
<img id="i3" src="images/i3.jpg" width="100"/>

Ecrire un code jQuery qui permet, suite au clic sur le lien « Ajuster les tailles des images », de
détecter les images qui ont une largeur égale à 100 pour la modifier avec la valeur 200.

Page 3

Vous aimerez peut-être aussi