Javascript solo puede realizar ciertas operaciones en elementos DOM después de que hayan sido definidos. Este problema se describe en detalle en el artículo "Secuencia de ejecución de JavaScript" //www.VeVB.COm/article/44577.htm.
jQuery usa document.ready para garantizar que el código que se ejecutará se ejecute después de cargar el elemento DOM. Por ejemplo, en el artículo "Conceptos básicos de jQuery: cómo empezar", utilicé el siguiente código jQuery:
Copie el código de código de la siguiente manera:
<!-- $(documento).listo(función ()
{
alert("¡Mi primer código jQuery!");
});
// -->
El significado de este código es: cuando se carga Dom Tree, se muestra un mensaje de advertencia.
document.ready() es similar al método tradicional <body onload="load()">, excepto que el método onload() ocurre después de cargar la página, incluida la carga de elementos DOM y otros elementos de la página (como imágenes).
Por lo tanto, la velocidad de ejecución al utilizar el método document.ready() es más rápida que la del método onload().
Dos puntos finales a tener en cuenta (de la documentación de jQuery):
1. Asegúrese de que no haya ninguna función registrada en el evento de carga del elemento <body>; de lo contrario, es posible que el evento $(document).ready() no se active. (
Intenté demostrar esto con el siguiente ejemplo, pero sin éxito, así que supongo que esto es sólo una posibilidad. )
Copie el código de código de la siguiente manera:
<html>
<cabeza>
<title>Mi segundo jQuery</title>
<mce:script type="text/javascript" src="/js/jquery.js" mce_src="js/jquery.js"></mce:script>
<mce:tipo de script="texto/javascript">
<!-- //La siguiente es la función de carga que contiene la función de registro de jquery $
función cargar(){ $("p").append("<b>Hola</b>");
//El siguiente es el código jQuery
$(documento).listo(función()
{ $("p").append("¡Mi primer código jQuery!"
);
$("p").append("<b>Hola</b>"); // -->
</mce:script>
</cabeza>
<cuerpo onload="carga()">
<h2>ejemplo sencillo 2 de jQuery</h2>
<p>Me gustaría decir: </p>
</cuerpo>
</html>
2. El evento $(document).ready() se puede utilizar ilimitadamente en la misma página. Las funciones registradas se ejecutarán en secuencia (en el código).