jQuery
evento pronto per il documento

Cosa è pronto per i documenti e come dovrei usarlo?

Il codice jQuery è spesso racchiuso in jQuery(function($) { ... }); in modo che funzioni solo dopo che il DOM ha terminato il caricamento.

<script type="text/javascript"> 
  jQuery(function($) {
    // this will set the div's text to "Hello".
    $("#myDiv").text("Hello");
  });
</script>

<div id="myDiv">Text</div>

Questo è importante perché jQuery (e JavaScript in generale) non possono selezionare un elemento DOM che non è stato reso alla pagina.

<script type="text/javascript">
  // no element with id="myDiv" exists at this point, so $("#myDiv") is an
  // empty selection, and this will have no effect
  $("#myDiv").text("Hello");
</script>

<div id="myDiv">Text</div>

Si noti che è possibile creare un alias dello spazio dei nomi jQuery passando un gestore personalizzato nel metodo .ready() . Ciò è utile nei casi in cui un'altra libreria JS utilizza lo stesso alias $ abbreviato $ jQuery , che crea un conflitto. Per evitare questo conflitto, è necessario chiamare $.noConflict(); - Questo ti obbliga a utilizzare solo lo spazio dei nomi jQuery predefinito (invece del breve alias $ ).
Passando un gestore personalizzato al gestore .ready() , sarà possibile scegliere il nome alias per utilizzare jQuery .

$.noConflict();

jQuery( document ).ready(function( $ ) {
   // Here we can use '$' as jQuery alias without it conflicting with other 
   // libraries that use the same namespace 
   $('body').append('<div>Hello</div>')
});

jQuery( document ).ready(function( jq ) {
   // Here we use a custom jQuery alias 'jq' 
   jq('body').append('<div>Hello</div>')
});

Invece di inserire semplicemente il codice jQuery nella parte inferiore della pagina, l'uso della funzione $(document).ready garantisce che tutti gli elementi HTML siano stati renderizzati e che l'intero Document Object Model (DOM) sia pronto per l'esecuzione del codice JavaScript.

jQuery 2.2.3 e precedenti

Questi sono tutti equivalenti, il codice all'interno dei blocchi verrà eseguito quando il documento è pronto:

$(function() {
  // code
});

$().ready(function() {
  // code
});

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

Poiché questi sono equivalenti, il primo è il modulo consigliato, la seguente è una versione di quello con la parola chiave jQuery invece del $ che produce gli stessi risultati:

jQuery(function() {
  // code
});

jQuery 3.0

Notazione

A partire da jQuery 3.0, solo questo modulo è raccomandato:

jQuery(function($) {
  // Run when document is ready
  // $ (first argument) will be internal reference to jQuery
  // Never rely on $ being a reference to jQuery in the global namespace
});

Tutti gli altri gestori pronti per i documenti sono deprecati in jQuery 3.0.

asincrono

A partire da jQuery 3.0, il gestore pronto verrà sempre chiamato in modo asincrono . Ciò significa che nel codice sottostante, il registro "gestore esterno" verrà sempre visualizzato per primo, indipendentemente dal fatto che il documento sia pronto nel punto di esecuzione.

$(function() {
  console.log("inside handler");
});
console.log("outside handler");

> gestore esterno
> gestore interno

Differenza tra $ (documento) .ready () e $ (finestra) .load ()

$(window).load() stato deprecato in jQuery versione 1.8 (e completamente rimosso da jQuery 3.0 ) e come tale non dovrebbe più essere usato. I motivi della deprecazione sono indicati nella pagina jQuery relativa a questo evento

Avvertenze sull'evento di carico quando utilizzato con le immagini

Una sfida comune che gli sviluppatori tentano di risolvere usando il collegamento .load() è quella di eseguire una funzione quando un'immagine (o una collezione di immagini) è stata caricata completamente. Ci sono molti avvertimenti noti con questo che dovrebbe essere notato. Questi sono:

• Non funziona in modo coerente né affidabile nel browser
• Non si attiva correttamente in WebKit se l'immagine src è impostata sullo stesso src di prima
• Non bolle correttamente l'albero DOM
• Può cessare di sparare per immagini che già vivono nella cache del browser

Se si desidera ancora utilizzare load() è documentato di seguito:

$(document).ready() attende che sia disponibile il DOM completo: tutti gli elementi nell'HTML sono stati analizzati e presenti nel documento. Tuttavia, risorse come le immagini potrebbero non essere state caricate completamente a questo punto. Se è importante attendere fino a quando tutte le risorse sono state caricate, $(window).load() e si è a conoscenza dei limiti significativi di questo evento, è possibile utilizzare il seguente esempio:

$(document).ready(function() {
  console.log($("#my_large_image").height()); // may be 0 because the image isn't available
});

$(window).load(function() {
  console.log($("#my_large_image").height()); // will be correct
});

Allegare eventi e manipolare il DOM all'interno di ready ()

Esempi di utilizzo di $(document).ready() :

1. Allegare gestori di eventi
   Allegare gestori di eventi jQuery

$(document).ready(function() {
  $("button").click(function() {
    // Code for the click function
  });
});

2. Esegui il codice jQuery dopo che la struttura della pagina è stata creata

jQuery(function($) {
// set the value of an element.
   $("#myElement").val("Hello");
});

3. Manipola la struttura DOM caricata
   Ad esempio: nascondi un div quando la pagina viene caricata per la prima volta e mostrata nell'evento click di un pulsante

$(document).ready(function() {
  $("#toggleDiv").hide();
  $("button").click(function() {
    $("#toggleDiv").show();
  });
});

Differenza tra jQuery (fn) ed esecuzione del codice prima

L'uso dell'evento pronto per il documento può avere piccoli inconvenienti in termini di prestazioni , con un'esecuzione ritardata fino a ~ 300 ms. A volte è possibile ottenere lo stesso comportamento eseguendo il codice subito prima del </body> chiusura:

<body>
  <span id="greeting"></span> world!
  <script>
    $("#greeting").text("Hello");
  </script>
</body>

produrrà un comportamento simile ma eseguirà prima di quanto non aspetti l'evento trigger del documento pronto come in:

<head>
  <script>
    jQuery(function($) {
      $("#greeting").text("Hello");
    });
  </script>
</head>
<body>
  <span id="greeting"></span> world!
</body>

Enfasi sul fatto che il primo esempio si basa sulla conoscenza della tua pagina e sul posizionamento dello script appena prima del </body> chiusura e in particolare dopo il tag span .