Lezione #id-jq-2013-0006#
In JQuery gli eventi rappresentano le azioni che possono compiere i visitarori sulla pagina HTML..
Metodo: slideDown() -> diapositiva verso il basso
Vediamo il seguente codice:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>Cliccare qui per far scomparire il paragrafo 1</p>
<p>Cliccare qui per far scomparire il paragrafo 2</p>
<p>Cliccare qui per far scomparire il paragrafo 3</p>
</body>
</html>
La riga che ci interessa è:
$("p").click(function(){
$(this).hide();
});
Traducendo:
$("selettore").click(function(){
/* ... azioni da compiere ... */
});
L’evento scatenante è il click del mouse: $(“selettore”).click(function(){
Vediamo gli altri tipi di evento disponibili in JQuery:
Click del mouse
$("p").click(function(){
$(this).hide();
});
Doppio click del mouse
$("p").dblclick(function(){
$(this).hide();
});
Puntatore del mouse entra nell’area in un elemento
$("#p1").mouseenter(function(){
alert("Sei entrato!");
});
Puntatore del mouse lascia l’area di un elemento
$("#p1").mouseleave(function(){
alert("Sei uscito!");
});
Il pulsante del mouse è giù
$("#p1").mousedown(function(){
alert("Il pulsante del mouse è giù!");
});
Il pulsante del mouse è sù
$("#p1").mouseup(function(){
alert("Il pulsante del mouse è sù");
});
Il pulsante del mouse passa sopra un elemento HTML. Unisce la funzione – .mouseenter – – .mouseleave – in un unico comando
$("#p1").hover(function(){
alert("Sei entrato nell'elemento");
},
function(){
alert("Sei uscito dall'elemento");
});
Un elemento form riceve il focus, ad esempio quando clicco su una casella per inserire del testo.
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
Un elemento form perde il focus..
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
Vediamo un sempio pratico:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("Sei entrato!");
});
$("#p2").dblclick(function(){
alert("Hai cliccato due volte");
});
});
</script>
<style type="text/css">
/* Assegno il colore ai paragrafi */
#p1 {color: green;}
#p2 {color: red;}
</style>
</head>
<body>
Sposta il puntatore del mouse sul PARAGRAFO1<br><br>
<div id="p1"><strong>PARAGRAFO 1</strong> - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</div>
<br><br><br>
Clicca sul PARAGRAFO2 due volte<br><br>
<div id="p2"><strong>PARAGRAFO 2</strong> - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</div>
</body>
</html>
