Sommario:
- Come usare $ (documento). ready ()
- Utilizzo del documento. meccanismo pronto
- Alternative al documento. pronto
Video: sez5/1 - Introduzione ad AJAX 2024
Molte pagine HTML5 e CSS3 richiedono una funzione di inizializzazione. Il meccanismo di caricamento del corpo è spesso utilizzato in DOM / JavaScript per caricare le pagine non appena il caricamento del documento è iniziato. Questa è una funzione che viene eseguita in anticipo per configurare il resto della pagina. Mentre l'onload del corpo fa bene questo lavoro, esistono un paio di problemi con la tecnica tradizionale:
-
Richiede una modifica all'HTML. Il codice JavaScript deve essere completamente separato dall'HTML. Non dovresti modificare il tuo codice HTML per farlo funzionare con JavaScript.
-
I tempi ancora non sono giusti. Il codice specificato nell'organico onload non viene eseguito fino a quando non viene visualizzata l'intera pagina. Sarebbe meglio se il codice fosse registrato dopo il DOM sia caricato ma prima di venga visualizzata la pagina.
Come usare $ (documento). ready ()
jQuery ha un'ottima alternativa all'onloading del corpo che supera queste carenze. Dai un'occhiata al codice per vedere come funziona:
pronto. html $ (documento). ready (changeme); function changeMe () {$ ("# output"). html ("I changed");}
Utilizzo del documento. meccanismo pronto
è cambiato?
Questo codice utilizza la tecnica jQuery per eseguire il codice di inizializzazione:
-
Il tag body non ha più un attributo onload . Questa è una caratteristica comune della programmazione jQuery. L'HTML non ha più collegamenti diretti al codice JavaScript poiché jQuery consente al codice JavaScript di collegarsi alla pagina web.
-
La funzione di inizializzazione viene creata con $ (documento). pronto function () . Questa tecnica dice al browser di eseguire una funzione quando il DOM ha terminato il caricamento (in modo che abbia accesso a tutti gli elementi del modulo) ma prima che la pagina venga visualizzata (in modo che qualsiasi effetto del modulo appaia istantaneo all'utente).
-
$ document crea un oggetto jQuery da tutto il documento. L'intero documento può essere trasformato in un oggetto jQuery specificando il documento all'interno della funzione $ (). Nota che in questo caso non usi le virgolette.
-
La funzione specificata viene eseguita automaticamente. In questo caso particolare, si desidera eseguire la funzione changeMe (), quindi posizionarla nel parametro del metodo ready (). Si noti che questo si riferisce a changeMe come variabile, quindi non ha virgolette o parentesi.
Si vedono molti altri luoghi (in particolare nella gestione degli eventi) in cui jQuery si aspetta una funzione come parametro. Questa funzione viene spesso chiamata funzione callback perché viene chiamata dopo che si è verificata una sorta di evento.Vengono inoltre visualizzate le funzioni di callback che rispondono agli eventi della tastiera, al movimento del mouse e al completamento di una richiesta AJAX.
Alternative al documento. pronto
A volte si vedono un paio di scorciatoie perché è così comune eseguire il codice di inizializzazione. Puoi abbreviare
$ (documento). ready (changeme);
al seguente codice:
$ (changeMe);
Se questo codice non è definito all'interno di una funzione e changeMe è una funzione definita nella pagina, jQuery esegue automaticamente la funzione direttamente come il documento. approccio pronto.
È inoltre possibile creare direttamente una funzione anonima:
$ (documento). ready (function () {$ ("# output"). html ("I changed");});
Questo metodo (funzione anonima) è macchinoso, ma spesso si vede il codice jQuery usando questa tecnica. Puoi creare una funzione chiamata init () e chiamarla con una riga come questa:
$ (init);
Questa tecnica è semplice e facile da capire, ma potresti incontrare le altre varianti mentre esamini il codice sul web.
