Gestione degli eventi in jQuery

Praticamente ogni evento JavaScript ha un corrispondente metodo in jQuery. Ad esempio, il click sugli elementi può essere rilevato così: $(selettore).click(funzione).

Consideriamo il seguente codice HTML:

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

Per cui è definito il CSS:

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

Facciamo in modo che al click su qualsiasi li venga visualizzato un punto esclamativo. Clicca sugli elementi della lista:

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

All'interno della funzione associata è disponibile this, che fa riferimento all'elemento in cui è avvenuto l'evento (nel nostro caso il li su cui è stato cliccato). Questo this può essere usato nello stile JavaScript, ad esempio this.innerHTML o nello stile jQuery - per farlo questo this deve essere avvolto in $, in questo modo: $(this).

Prendiamo il codice HTML:

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

A questo codice sono associati i seguenti stili CSS:

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

Facciamo in modo che al click su li venga aggiunto alla fine un '!'. Per verificare il funzionamento, clicca sugli elementi della lista:

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

Fai in modo che al click su ogni li le venga aggiunto all'inizio un '?'.

Sono dati dei paragrafi. Fai in modo che al click su ogni paragrafo venga visualizzato a schermo il suo contenuto.

Sono dati dei paragrafi con numeri. Alla pressione sul paragrafo in esso deve apparire il quadrato del numero che contiene.