Javascript ne peut effectuer certaines opérations sur les éléments DOM qu'après leur définition. Ce problème est décrit en détail dans l'article "Javascript Execution Sequence" //www.VeVB.COm/article/44577.htm.
jQuery utilise document.ready pour garantir que le code à exécuter est exécuté après le chargement de l'élément DOM. Par exemple, dans l'article "JQuery Basics - How to Get Started", j'ai utilisé le code jQuery suivant :
Copiez le code comme suit :
<!-- $(document).ready(function ()
{
alert("Mon premier code jQuery !");
});
// -->
La signification de ce code est la suivante : lorsque le Dom Tree est chargé, un message d'avertissement s'affiche.
document.ready() est similaire à la méthode traditionnelle <body onload="load()">, sauf que la méthode onload() se produit après le chargement de la page, y compris le chargement des éléments DOM et d'autres éléments de la page (tels que les images),
Par conséquent, la vitesse d'exécution de l'utilisation de la méthode document.ready() est plus rapide que celle de la méthode onload().
Deux derniers points à noter (extraits de la documentation jQuery) :
1. Assurez-vous qu'il n'y a pas de fonction enregistrée dans l'événement onload de l'élément <body>, sinon l'événement $(document).ready() risque de ne pas être déclenché. (
J'ai essayé de démontrer cela avec l'exemple ci-dessous, mais sans succès, donc je suppose que ce n'est qu'une possibilité. )
Copiez le code comme suit :
<html>
<tête>
<title>Mon deuxième jQuery</title>
<mce:script type="text/javascript" src="/js/jquery.js" mce_src="js/jquery.js"></mce:script>
<mce:script type="text/javascript">
<!-- //Ce qui suit est la fonction de chargement contenant la fonction d'enregistrement jquery $
function load(){ $("p").append("<b>Bonjour</b>" }
//Ce qui suit est le code jQuery
$(document).ready(fonction ()
{ $("p").append("Mon premier code jQuery !"
);
$("p").append("<b>Bonjour</b>" } // -->
</mce:script>
</tête>
<body onload="load()">
<h2>Exemple simple jQuery 2</h2>
<p>Je voudrais dire : </p>
</corps>
</html>
2. L'événement $(document).ready() peut être utilisé un nombre illimité de fois dans la même page. Les fonctions enregistrées seront exécutées dans l'ordre (dans le code).