Su quale evento fa funzionare JQuery $ function ()?

Abbiamo un’istruzione JQuery $(function() come:

  $(function(){ //Code.. })  

Domanda stupida: quando viene eseguita esattamente questa funzione? È quando l’intera pagina HTML è stata scaricata dal client?

Qual è il vantaggio di utilizzare il wrapping del codice all’interno di $(function() anziché fare semplicemente:

  //Code..  

Viene eseguito non appena il pars viene analizzato e viene richiamato in ordine di apparizione se vi sono più aspetti. A questo punto, tuttavia, il documento non viene visualizzato, è appena stato analizzato.

Si triggers quando il documento è stato analizzato ed è pronto ed equivale a $(document).ready(function () { }) .

L’ovvio vantaggio è che avere il tag script prima di altri elementi nella pagina significa che lo script può interagire con loro anche se non sono disponibili in fase di analisi. Se si esegue lo script prima che gli elementi siano stati analizzati e il documento non sia pronto, non saranno disponibili per l’interazione.

Quando il documento completa il caricamento. È lo stesso di scrivere questo:

 $(document).ready(function(){}); 

EDIT: per rispondere alla tua seconda domanda:

Se non si avvolge il codice nel blocco in alto, esso si triggers non appena viene rilevato anziché dopo che tutti i controlli della pagina sono stati caricati. Quindi, se un blocco era nella parte superiore di una pagina e faceva riferimento a elementi nella pagina, quei riferimenti non avrebbero funzionato poiché gli elementi non sono ancora stati caricati.

Ma se si avvolge nel blocco allora si sa che la pagina è stata caricata e tutti gli elementi sono ora disponibili per fare riferimento.

Spara dopo che il documento è stato caricato completamente, l’albero DOM è stato inizializzato, tutti gli stili CSS sono stati applicati e tutti i Javascript sono stati eseguiti. Differisce dall’evento load in quegli elementi (diversi da CSS / JS) che caricano il loro contenuto da altri URL, come immagini o file flash, non hanno necessariamente completato il caricamento a questo punto. Questo è solitamente chiamato evento “domready” o “domloaded”, e alcuni browser moderni lo supportano direttamente (ad es. Firefox ha un evento DomContentLoaded), mentre su altri può essere simulato con vari trucchi, come usare l’attributo defer o posizionare uno script alla fine del corpo.

Il vantaggio è che puoi interagire in modo affidabile con il documento in questo momento; per esempio è ansible impostare un gestore di eventi su un elemento con un determinato ID e assicurarsi che esso esista già nell’albero DOM. D’altra parte, può essere eseguito molto prima dell’evento di caricamento, se alcune risorse esterne sono lente da caricare. Se il tuo script è alla fine del tuo codice HTML, potrebbe esserci poca differenza nell’usare o meno l’evento domready, ma in genere gli script vengono chiamati dal tag head e, a quel punto, nessun elemento del corpo è ancora disponibile.