jQuery
événement prêt pour le document

Qu'est-ce qu'un document prêt et comment l'utiliser?

Le code jQuery est souvent enveloppé dans jQuery(function($) { ... }); de sorte qu'il ne s'exécute qu'après le chargement du DOM.

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

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

Ceci est important car jQuery (et JavaScript en général) ne peut pas sélectionner un élément DOM qui n'a pas été rendu à la page.

<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>

Notez que vous pouvez alias l'espace de noms jQuery en transmettant un gestionnaire personnalisé à la méthode .ready() . Cela est utile dans les cas où une autre bibliothèque JS utilise le même alias $ abrégé que jQuery , ce qui crée un conflit. Pour éviter ce conflit, vous devez appeler $.noConflict(); - Cela vous oblige à utiliser uniquement l'espace de noms jQuery par défaut (au lieu du court alias $ ).
En transmettant un gestionnaire personnalisé au gestionnaire .ready() , vous pourrez choisir le nom d'alias à utiliser avec 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>')
});

Plutôt que de simplement placer votre code jQuery au bas de la page, l'utilisation de la fonction $(document).ready garantit que tous les éléments HTML ont été rendus et que l'ensemble du modèle d'objet de document (DOM) est prêt à l'exécution du code JavaScript.

jQuery 2.2.3 et versions antérieures

Celles-ci sont toutes équivalentes, le code à l'intérieur des blocs sera exécuté lorsque le document sera prêt:

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

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

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

Comme ils sont équivalents, le premier est le formulaire recommandé, ce qui suit est une version du mot clé jQuery au lieu du $ qui produit les mêmes résultats:

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

jQuery 3.0

Notation

A partir de jQuery 3.0, seul ce formulaire est recommandé:

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
});

Tous les autres gestionnaires de documents sont déconseillés dans jQuery 3.0.

Asynchrone

A partir de jQuery 3.0, le gestionnaire prêt sera toujours appelé de manière asynchrone . Cela signifie que dans le code ci-dessous, le journal «gestionnaire externe» sera toujours affiché en premier, que le document soit prêt au moment de l'exécution.

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

> gestionnaire externe
> gestionnaire interne

Différence entre $ (document) .ready () et $ (window) .load ()

$(window).load() est $(window).load() obsolète dans jQuery version 1.8 (et complètement supprimé de jQuery 3.0 ) et ne devrait donc plus être utilisé. Les raisons de la dépréciation sont notées sur la page jQuery à propos de cet événement

Mises en garde de l'événement de chargement lorsqu'il est utilisé avec des images

Un défi commun que les développeurs tentent de résoudre en utilisant le raccourci .load() consiste à exécuter une fonction lorsqu'une image (ou une collection d'images) est complètement chargée. Il existe plusieurs mises en garde connues à ce sujet. Ceux-ci sont:

• Il ne fonctionne pas de manière cohérente ni fiable
• Il ne se déclenche pas correctement dans WebKit si l'image src est définie sur le même src qu'auparavant
• Il ne remplit pas correctement l'arborescence DOM
• Peut cesser de tirer pour des images qui vivent déjà dans le cache du navigateur

Si vous souhaitez toujours utiliser load() il est décrit ci-dessous:

$(document).ready() attend que le DOM complet soit disponible - tous les éléments du HTML ont été analysés et se trouvent dans le document. Toutefois, les ressources telles que les images peuvent ne pas être complètement chargées à ce stade. S'il est important d'attendre que toutes les ressources soient chargées, $(window).load() et que vous êtes conscient des limitations significatives de cet événement, vous pouvez utiliser les éléments ci-dessous:

$(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
});

Joindre des événements et manipuler le DOM à l’intérieur prêt ()

Exemple d'utilisations de $(document).ready() :

1. Attacher des gestionnaires d'événements
   Joindre des gestionnaires d'événement jQuery

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

2. Exécutez le code jQuery après la création de la structure de page

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

3. Manipuler la structure DOM chargée
   Par exemple: masquez un div lorsque la page se charge pour la première fois et affichez-le sur l'événement de clic d'un bouton

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

Différence entre jQuery (fn) et l'exécution de votre code avant

L'utilisation de l'événement prêt pour le document peut avoir de petits inconvénients en termes de performances , avec une exécution retardée allant jusqu'à ~ 300 ms. Parfois, le même comportement peut être obtenu en exécutant du code juste avant la </body> fermeture </body> :

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

produira un comportement similaire mais fonctionnera plus tôt que s'il n'attendait pas le déclencheur d'événement prêt pour le document comme il le fait dans:

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

L'accent est mis sur le fait que le premier exemple repose sur votre connaissance de votre page et sur le placement du script juste avant la </body> fermeture </body> et spécifiquement après la balise span .