Come aggiungere eventi agli oggetti jQuery per la programmazione HTML5 e CSS3 - dummies

La libreria jQuery aggiunge un'altra funzionalità estremamente potente per JavaScript. Consente ai programmatori HTML5 e CSS3 di collegare facilmente un evento a qualsiasi oggetto jQuery. Dai un'occhiata al passaggio del mouse. html.

Quando si sposta il cursore su una voce di elenco, viene visualizzato un bordo attorno all'elemento. Questo non è un effetto difficile da raggiungere nei normali CSS, ma è ancora più semplice con jQuery.

Come aggiungere un evento hover

Guarda il codice per vedere come funziona:

hover. html $ (init); function init () {$ ("li"). hover (border, noBorder);} // end init function border () {$ (this). css ("border", "1px solid black");} function noBorder () {$ (this). css ("border", "0px none black");}

Hover Demo

alpha
beta
gamma
delta

L'HTML non potrebbe essere più semplice. È semplicemente una lista non ordinata. Il JavaScript non è molto più complesso. Consiste di tre funzioni a una riga:

• init () viene chiamato quando il documento è pronto. Crea oggetti jQuery di tutti gli elementi della lista e allega l'evento. La funzione hover () accetta due parametri:

  • Il primo è una funzione da chiamare quando il cursore passa sopra l'oggetto.

  • Il secondo è una funzione da chiamare quando il cursore lascia l'oggetto.

• border () disegna un bordo attorno all'elemento corrente. L'identificatore $ (questo) viene utilizzato per specificare l'oggetto corrente.

• noborder () è una funzione molto simile alla funzione border () , ma rimuove un bordo dall'oggetto corrente.

In questo esempio, sono state utilizzate tre diverse funzioni. Molti programmatori jQuery preferiscono utilizzare le funzioni anonime (a volte chiamate funzioni lambda ) per racchiudere l'intera funzionalità in una linea lunga:

$ ("li"). hover (function () {$ (this). css ("border", "1px solid black");}, function () {$ (this). css ("border", "0px none black");});

Si noti che questo è ancora tecnicamente una singola riga di codice. Invece di fare riferimento a due funzioni che sono già state create, è possibile creare immediatamente le funzioni laddove sono necessarie. Ogni definizione di funzione è un parametro del metodo hover ().

Se sei un informatico, potresti obiettare che questo non è un esempio perfetto di una funzione lambda, e tu saresti corretto. L'importante è notare che alcune idee di programmazione funzionale (come le funzioni lambda) si stanno insinuando nella programmazione AJAX mainstream, e questo è uno sviluppo entusiasmante.

Modifica delle classi al volo

jQuery supporta un'altra meravigliosa funzione.È possibile definire uno stile CSS e quindi aggiungere o rimuovere lo stile da un elemento in modo dinamico.

Il codice mostra quanto sia facile aggiungere questo tipo di funzione:

classe. html. bordered {border: 1px solid black;} $ (init); function init () {$ ("li"). fare clic su (toggleBorder);} // end init function toggleBorder () {$ (this). toggleClass ("bordered");}

Class Demo

alpha
beta
gamma
delta

Ecco come fare questo programma:

1. Inizia con una pagina HTML di base.

   Tutte le cose interessanti accadono in CSS e JavaScript, quindi i contenuti effettivi della pagina non sono così importanti.

2. Crea una classe che desideri aggiungere e rimuovere.

   È possibile creare una classe CSS chiamata che disegna semplicemente un bordo attorno all'elemento. Naturalmente, se lo preferisci, puoi creare una classe CSS molto più sofisticata con tutti i tipi di formattazione.

3. Collega un metodo init ().

   Come stai cominciando a vedere, la maggior parte delle applicazioni jQuery richiede una sorta di inizializzazione. Puoi chiamare la prima funzione. init ()

4. Chiama la funzione toggleBorder () ogni volta che l'utente fa clic su una voce dell'elenco.

   Il metodo init () semplicemente imposta un gestore di eventi. Ogni volta che un elemento della lista riceve l'evento click (ovvero, viene cliccato), la funzione toggleBorder () deve essere attivata. La funzione toggleBorder (), beh, alterna il bordo.

   jQuery ha diversi metodi per manipolare la classe di un elemento:

   • addClass () assegna una classe all'elemento.

   • removeClass () rimuove una definizione di classe da un elemento.

   • toggleClass () cambia la classe (la aggiunge se non è attualmente collegata o la rimuove in altro modo).