Vinculación de eventos en jQuery

Prácticamente cada evento de JavaScript tiene correspondencia con su método jQuery. Por ejemplo, el clic en elementos se puede capturar así: $(selector).click(función).

Consideremos el siguiente código HTML:

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

Para él está escrito el CSS:

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

Hagamos que al hacer clic en cualquier li se muestre un signo de exclamación. Haga clic en los elementos de la lista:

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

Dentro de la función vinculada está disponible this, que hace referencia a ese elemento en el que ocurrió el evento (en nuestro caso, el li en el que se hizo clic). Este this se puede usar al estilo JavaScript, por ejemplo, this.innerHTML o al estilo jQuery - para ello este this debe envolverse en $, así: $(this).

Tomemos el código HTML:

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

A este código se le han aplicado los siguientes estilos CSS:

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

Hagamos que al hacer clic en li se le añada al final un '!'. Para comprobar el funcionamiento, haga clic en los elementos de la lista:

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

Haga que al hacer clic en cada li se le añada al principio un '?'.

Se dan párrafos. Haga que al hacer clic en cada párrafo se muestre en pantalla su contenido.

Se dan párrafos con números. Al hacer clic en un párrafo, debe aparecer en él el cuadrado del número que contiene.