jQuery document.ready

Sono un po ‘confuso con document.ready in jQuery.

Quando definisci le funzioni javascript all’interno di $ (document) .ready () e quando non lo fai?

È abbastanza sicuro solo mettere tutto il codice javascript all’interno di $ (document) .ready ()?

Cosa succede quando non lo fai?

Ad esempio, io uso i soliti selettori jQuery che fanno qualcosa quando fai clic su qualcosa. Se non li avvolgi con il documento, già qual è il danno?

Creerà solo problemi se qualcuno fa clic sull’elemento nella frazione di secondo prima che la pagina sia caricata? Oppure può causare altri problemi?

Il gestore document.ready viene triggersto quando il DOM è stato caricato dal browser e pronto per essere manipolato.

Se dovresti usarlo o meno dipenderà da dove stai mettendo i tuoi script personalizzati. Se li metti alla fine del documento, appena prima del chiusura non hai bisogno di usare document.ready perché prima che il tuo script venga eseguito il DOM sarà già caricato e sarai in grado di manipolare esso.

Se invece inserisci lo script nella sezione del documento dovresti usare document.ready per assicurarti che il DOM sia completamente caricato prima di tentare di modificarlo o colbind i gestori di eventi a vari elementi. Se non si esegue questa operazione e si tenta di colbind ad esempio un gestore di eventi .click a un pulsante, questo evento non verrà mai triggersto perché al momento dell’esecuzione dello script, il selettore jQuery utilizzato per trovare il pulsante non è stato restituire tutti gli elementi e non hai collegato correttamente il gestore.

Quando definisci le funzioni javascript all’interno di $ (document) .ready () e quando non lo fai?

Se le funzioni devono essere accessibili a livello globale (il che potrebbe indicare una progettazione errata dell’applicazione), è necessario definirle al di fuori del gestore ready .

È abbastanza sicuro solo mettere tutto il codice javascript all’interno di $ (document) .ready ()?

Vedi sopra.

Cosa succede quando non lo fai?

Dipende da cosa sta facendo il tuo codice JavaScript e da dove si trova. Nel peggiore dei casi si avranno errori di runtime perché si sta tentando di accedere agli elementi DOM prima che esistano. Ciò avverrebbe se il codice si trova in head e non si definiscono solo le funzioni ma si sta già tentando di accedere agli elementi DOM.

Ad esempio, io uso i soliti selettori jQuery che fanno qualcosa quando fai clic su qualcosa. Se non li avvolgi con il documento, già qual è il danno?

Non c’è “danno” di per sé. Non funzionerebbe se lo script si trova nella head , perché gli elementi DOM non esistono ancora. Ciò significa che jQuery non può trovare e associare il gestore a loro.
Ma se si posiziona lo script poco prima del tag body chiusura, allora gli elementi DOM esisteranno.


Per essere sicuri, ogni volta che si desidera accedere agli elementi DOM, inserire queste chiamate nel gestore eventi ready o in funzioni chiamate solo dopo il caricamento del DOM.

Come il tutorial di jQuery (dovresti leggerlo) afferma già:

Poiché quasi tutto ciò che facciamo quando si usa jQuery legge o manipola il modello di object documento (DOM), dobbiamo assicurarci di iniziare ad aggiungere eventi, ecc. Non appena il DOM è pronto.

Per fare ciò, registriamo un evento pronto per il documento.

 $(document).ready(function() { // do stuff when DOM is ready }); 

Per dare un esempio più completo:

       
The answer to life, the universe and everything

$(document).ready codice all’interno di $(document).ready quando hai bisogno di quel codice per aspettare che il DOM $(document).ready caricato prima dell’esecuzione. Se il codice non richiede che il DOM venga caricato prima di esistere, puoi metterlo fuori da $ (document) .ready.

Per inciso, $(function() { }) è short-hand per $ (document).ready();

 $(function() { //stuff here will wait for the DOM to load $('#something').text('foo'); //should be okay }); //stuff here will execute immediately. /* this will likely break */ $('#something').text('weee!'); 

Se hai i tuoi script alla fine del documento, non hai bisogno di document.ready.

esempio: c’è un pulsante e al suo clic, è necessario mostrare un avviso. Puoi mettere il bind l’evento click a button in document.ready. Puoi scrivere il tuo script jquery alla fine del documento o una volta caricato l’elemento nel markup.

Scrivere tutto nell’evento document.ready renderà la tua pagina slug.

Non c’è niente di male nell’aggiungere gli handler di eventi in ready () se stai chiamando le tue funzioni js nell’attributo href. Se li stai aggiungendo con jQuery, devi assicurarti che gli oggetti a cui si riferiscono questi gestori siano caricati, e questo codice deve venire dopo che il documento è stato ritenuto pronto (). Ciò non significa che debbano essere nella chiamata ready () tuttavia, è ansible chiamarli in funzioni che sono chiamate all’interno ready ().