Esempio 01 – Evento click

Dopo aver introdotto JQuery e compreso il concetto di selettore (leggi qui), vediamo un esempio un po’ più complesso: vogliamo far sparire dei frammenti di testo cliccandoci sopra con il mouse. L’esempio è utile per introdurre la gestione degli eventi in JQuery con particolare riferimento all’evento più utilizzato per eccellenza: il click 

L’esempio è molto semplice: siamo di fronte ad una pagina HTML di prova con alcuni tag <p>. Voglio banalmente poter cliccare sul testo del paragrafo e far in modo che scompaia quando cliccato. Come sempre, ricordiamoci di importare la libreria JQuery nell’head o in fondo la pagina. Catturo gli elementi col selettore $(“p”) e gli associo l’evento click. Occhio alle parentesi, la vera tegola nello scrivere correttamente i nostri script con JQuery!

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<script src="js/jquery.min.js"></script>
</head>
<body>

<br><br>

<p>Messaggio 1</p>
<p>Messaggio 2</p>
<p>Messaggio 3</p>

<script>
$(document).ready(
//una volta che la pagina è caricata, procedo ad eseguire una funzione
function()
{
        //ad es. seleziono tutti i tag <p>
	$("p").click(
                //gestisco l'evento click sul testo contenuto nel tag selezionato
		function()
		{
			$(this).hide();
		}
		); //chiude click
}
);//chiude ready
</script>


</body>
</html>

Vedremo nei prossimi articoli altri eventi e come utilizzarli per creare interattività con l’utente.

Ultima modifica 22 Marzo 2023