Liaison d'événements en jQuery

Pratiquement chaque événement JavaScript a sa méthode jQuery correspondante. Par exemple, un clic sur des éléments peut être capturé comme ceci : $(sélecteur).click(fonction).

Examinons le code HTML suivant :

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Le CSS suivant lui est appliqué :

li {
	width: 100px;
	cursor: pointer;
}

Faisons en sorte qu'un clic sur n'importe quel li affiche un point d'exclamation. Cliquez sur les éléments de la liste :

$('li').click(function() {
	alert('!');
});

À l'intérieur de la fonction liée, this est accessible, référant l'élément dans lequel l'événement s'est produit (dans notre cas, le li sur lequel le clic a été effectué). Ce this peut être utilisé en style JavaScript, par exemple this.innerHTML ou en style jQuery - pour cela, ce this doit être enveloppé dans $, comme ceci : $(this).

Prenons le code HTML :

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Les styles CSS suivants sont appliqués à ce code :

li {
	width: 100px;
}
li:hover {
	color: red;
	cursor: pointer;
}

Faisons en sorte qu'un clic sur un li ajoute un '!' à sa fin. Pour tester le fonctionnement, cliquez sur les éléments de la liste :

$('li').click(function() {
	$(this).append('!');
});

Faites en sorte qu'un clic sur chaque li ajoute un '?' à son début.

Des paragraphes sont donnés. Faites en sorte qu'un clic sur chaque paragraphe affiche son contenu à l'écran.

Des paragraphes avec des nombres sont donnés. Lors d'un clic sur un paragraphe, le carré du nombre qu'il contient doit y apparaître.