Atelier 1 jQuery : Evénements et sélecteurs

Exercice 1
Ecrire un code jQuery qui lorsqu’on clique sur un bouton « btn » affiche l’alerte « Vous avez cliqué ! »
puis le message « Vous avez relâché le clic ! » quand on relâche le bouton. Le code HTML
correspondant est le suivant :

<form>
<input id="btn" type="button" value="Cliquer ici"/>
</form>

Exercice 2
Ecrire un code jQuery qui lorsqu’on clique sur l’un des paragraphes du document affiche « Les
paragraphes créés peuvent être cliqués ! ». Le code HTML correspondant est le suivant :

<p>Un premier paragraphe</p>

<p>Un deuxième paragraphe avec un lien : <a class="lien" href="#">lien</a></p>
<p>Un troisième paragraphe</p>

Exercice 3
Modifier le code de l’exercice 2 de telle sorte que le message ne s’affichera que lorsqu’on clique sur
une balise ayant la classe « lien ». Le message deviendra « Seuls les balises ayant la classe lien
peuvent être cliqués ! ».

Exercice 4
Modifier le code de l’exercice 2 de telle sorte que le message ne s’affichera que lorsqu’on clique sur
le deuxième paragraphe. Le message deviendra « Seul le deuxième paragraphe peut être cliqué ! ».

Exercice 5
Modifier le code de l’exercice 2 de telle sorte que le message ne s’affichera que lorsqu’on clique sur
le dernier paragraphe et ce en utilisant la fonction « length ». Le message deviendra « Le dernier
paragraphe créé peut être cliqué ! ».

Exercice 6
Ecrire un code jQuery qui permet d’ajouter un cadre rouge de 3px de largeur en trait contenu à la
zone « div » du code HTML suivant, une fois on passe le curseur de la souris dessus. Puis retourner à
l’état initial une fois on éloigne le curseur.

<div>Il s'agit d'une zone div</div>

Page 1
Exercice 7
Soient les codes CSS et HTML suivants :
<style>
.li_hover {
border:1px solid red;
background:black;
color:white
}
</style>

<ul id="liste">
<li>texte1</li>
<li>texte2</li>
<li>texte3</li>
</ul>

Ecrire un code jQuery qui permet de changer le style des éléments de la liste identifiée par "liste".
Dans le gestionnaire d'événements hover(), la première fonction est déclenchée lorsque le curseur
entre dans l'élément, la seconde lorsque le curseur sort de l'élément.

Exemple :
Etat 1 (initial) Etat 2 (avec hover) Etat 3 (le curseur sort)

Exercice 8
Soit les codes CSS et HTML suivants :

<style>
#liste{display: inline;
decoration:none;}
.li_hover { border:1px solid blue;
background:aqua;
color:blue ;
width:100px;
}
#zone1,#zone2,#zone3 {
position: fixed;
top:30px;
left:110px;
border:1px solid red;
color:black ;
width:300px;

Page 2
height:300px;
visibility: hidden;
}
#zone1{
background:pink;
}
#zone2{
background:green;
}
#zone3{
background:yellow;
}
</style>

<ul id="liste">
<li id="l1">Menu 1</li>
<li id="l2">Menu 2</li>
<li id="l3">Menu 3</li>
</ul>
<div id="zone1">Espace Menu 1</div>
<div id="zone2">Espace Menu 2</div>
<div id="zone3">Espace Menu 3</div>

Ecrire un code jQuery qui permet de changer le style des éléments de la liste identifiée par "liste".
Dans le gestionnaire d'événements hover(), la première fonction est déclenchée lorsque le curseur
entre dans l'élément, la seconde lorsque le curseur sort de l'élément. De plus chaque élément de
liste doit faire apparaître sa zone correspondante (Menu 1 rend visible Espace Menu 1, etc.).

Exemple :

Page 3