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