Eventi jQuery

jQuery è progettato specialmente per la gestione degli eventi.

Funzioni di gestione degli eventi jQuery

I metodi di gestione degli eventi jQuery sono le funzioni fondamentali di jQuery.

Il programma di gestione degli eventi è il metodo chiamato quando si verificano alcuni eventi nell'HTML. Il termine 'trigger' (o 'eccitare') viene spesso utilizzato.

Di solito si mette il codice jQuery nel metodo di gestione degli eventi nella parte <head>.

Esempio

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>
<h2>Questo è un titolo</h2>
<p>Questo è un paragrafo.</p>
<p>Questo è un altro paragrafo.</p>
<button>Clicca me</button>
</body>
</html>

Provatelo personalmente

Nel esempio sopra, viene chiamata una funzione quando viene attivato l'evento di clic del pulsante:

$("button").click(function() {  // some code... } )

Questo metodo nasconde tutti gli elementi <p>:

$("p").hide();

Funzioni nel file singolo

Se il tuo sito web contiene molte pagine e desideri che le tue funzioni jQuery siano facili da mantenere, metti le tue funzioni jQuery in un file .js indipendente.

Quando mostriamo jQuery nei tutorial, aggiungiamo direttamente le funzioni alla sezione <head>. Tuttavia, metterle in un file separato è meglio, come questo (tramite l'attributo src per riferimento al file):

Esempio

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

Conflitto di nome jQuery

jQuery utilizza il simbolo $ come modo di introduzione di jQuery.

Alcune altre librerie JavaScript (ad esempio Prototype) utilizzano anche il simbolo $.

jQuery utilizza il metodo noConflict() per risolvere questo problema.

var jq=jQuery.noConflict()，che vi aiuta a utilizzare il proprio nome (ad esempio jq) al posto del simbolo $.

Provatelo personalmente

Conclusione

Poiché jQuery è progettato specificamente per gestire eventi HTML, quando seguite i seguenti principi, il vostro codice sarà più appropriato e più facile da mantenere:

  • Mettere tutti i codici jQuery all'interno della funzione di gestione degli eventi
  • Mettere tutti i gestori degli eventi nel gestore di eventi ready del documento
  • Mettere il codice jQuery in un file .js separato
  • Se esiste un conflitto di nome, rinominare la libreria jQuery

Eventi jQuery

Ecco alcuni esempi di metodi di evento in jQuery:

Funzione evento Associare una funzione a
$(document).ready(function) Associare una funzione all'evento di ready del documento (quando il documento è stato caricato)
$(selector).click(function) Eseguire o associare una funzione all'evento di clic dell'elemento selezionato
$(selector).dblclick(function) Eseguire o associare una funzione all'evento di doppio clic dell'elemento selezionato
$(selector).focus(function) Eseguire o associare una funzione all'evento di focus dell'elemento selezionato
$(selector).mouseover(function) Eseguire o associare una funzione all'evento di hover del mouse sull'elemento selezionato

Per una guida completa, visitate il nostro Manuale di riferimento degli eventi jQuery。