Prima di addentrarci nel nuovo esempio, diamo un’occhiata agli eventi supportati da JQuery e col quale cerchiamo di familiarizzare nelle nostre funzioni.
jQuery click()
jQuery dblclick()
jQuery mouseenter()
jQuery mouseleave()
jQuery mousedown()
jQuery mouseup()
jQuery hover()
jQuery focus() e blur()
Click e doppio click sono molto intuitivi. Nell’esempio 01 abbiamo usato click. Provate a sostituire a click dbclick, otterrete un comportamento simile ma questa volta cliccando due volte. Enter così un po’ come hover genera un evento quando col mouse si passa sul frammento selezionato e si esce (sconsigliato, meglio usare mouseenter), leave quando si toglie da quella selezione. Mouseup e mousedown assomigliano molto al click. Qui sotto riportiamo un esempio col mouseenter che interagisce con un frammento a noi noto di javascript che è interscambiabile con jquery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
});
</script>
</head>
<body>
<p id="p1">Metti/entra col mouse su questo paragrafo</p>
</body>
</html>
Ultima modifica 22 Marzo 2023