Eventi jQuery | Spiegato
JQuery è progettato per gestire anche gli eventi sulla pagina Web, gli eventi (se non hai già familiarità) sono azioni utente che fanno reagire una pagina Web. Per spiegare meglio gli eventi, possiamo dire che qualsiasi azione a cui una pagina Web può rispondere è nota come evento della pagina web, ad esempio mouse-over, click, caricamento del documento.
Eventi jQuery | Sintassi ed eventi Metodi
La sintassi degli eventi jQuery è usare a OPERATORE DOT Dopo la funzione di fabbrica $ () che contiene i selettori.
$ ("p").clic();
Con la riga sopra, viene creato un ascoltatore di eventi, il passo successivo è definire cosa fare quando quell'evento specifico esegue. Per fare ciò, definire la funzione all'interno della parentesi dell'evento come:
$ ("p").Click (function ()
// corpo della funzione
);
Eventi jQuery | Esempi
Per dimostrare il funzionamento degli eventi jQuery e dei gestori di eventi, imposteremo una pagina Web HTML con JQuery ospitato da Google CDN incluso nel suo tag di script:
La pagina web HTML contiene queste righe per configurare la nostra pagina Web di test:
Cambio colore al carico
Ciao! Sono Linuxbot
Doppio clic su di me!
Clicca per nascondermi!
Se si esegue il file HTML, otterrai il seguente risultato sul browser:
IL primo evento che andremo oltre è il Document-on-Ready evento. Questo evento viene eseguito automaticamente quando il DOM verifica che la pagina Web sia stata completamente caricata e non sta aspettando ulteriori azioni o risposte. Quindi, cambieremo lo sfondo del Tag al carico del documento, con le seguenti righe di codice:
$ (documento).ready (function ()
$ ("H1").CSS ("sfondo", "rosso");
);
Otterrai il seguente output:
Come puoi vedere, siamo stati in grado di cambiare il colore di sfondo del H1 con eventi jQuery.
IL anche ancheT sarà il Pulsante Premere, Serremo all'utente il suo nome al momento della pressione. Usa il codice:
$ ("pulsante").Click (function ()
var xyz = prompt ("immettere il nome completo");
);
Ottieni il seguente output su pressione del pulsante:
Come puoi vedere, facendo clic sul pulsante che dice "Fai clic su di me!", È stata mostrata una finestra di dialogo prompt chiedendo il nome completo dell'utente.
Gli eventi del clic del mouse sono piuttosto comuni, ma qualcosa che è ampiamente utilizzato è l'evento a doppio clic. Per dimostrarlo, visualizzeremo un messaggio sullo schermo come avviso quando l'utente fa doppio clic nel paragrafo con l'ID "dblClick"Con le seguenti righe di codice:
$ ("#dblClick").dblClick (function ()
Avviso ("Buona giornata!");
)
Con le linee sopra, l'output è come
Dopo aver fatto doppio clic sul testo, è stata mostrata una nuova finestra di dialogo di avviso all'utente con un saluto.
Possiamo persino usare il “Questo"Riferimento quando si lavora con eventi jQuery, per dimostrare che nasconderemo il testo con l'ID"nascondere"Sul clic. Lo facciamo usando le seguenti righe di codice:
$ ("#hide").Click (function ()
$ (questo).nascondere();
);
Ottieni il seguente output facendo clic sul testo che dice "Clicca per nascondermi!":
Il testo è stato nascosto dopo aver fatto clic su di esso una volta.
Conclusione
La libreria JQuery fornisce la funzionalità per gestire e reagire agli eventi della pagina web, questo è il motivo per cui JQuery viene definito "Su misura"Per la gestione degli eventi. Gli eventi jQuery vengono aggiunti alla funzione selettore jQuery ($ ()) Utilizzando un operatore DOT, questo crea un ascoltatore di eventi su quell'elemento che ascolta un particolare evento. Per eseguire un'azione basata su questo evento è necessario creare una funzione che indica alla pagina web cosa fare per quell'evento specifico. Questa funzione è comunemente scritta all'interno della parentesi dell'ascoltatore di eventi.