Muchas páginas HTML5 y CSS3 requieren una función de inicialización. los body onload

mecanismo se utiliza con frecuencia en DOM / javascript para hacer que las páginas se cargan en cuanto el documento ha empezado a cargar. Esta es una función que se ejecuta pronto para configurar el resto de la página. Mientras body onload hace este trabajo bien, un par de problemas existe con la técnica tradicional:

• Se requiere hacer un cambio en el código HTML. El código javascript debe estar completamente separada de HTML. Usted no debería tener que cambiar el código HTML para que funcione con javascript.

• El momento todavía no está del todo bien. El código especificado en body onload no se ejecuta hasta que se muestre la página completa. Sería mejor si se registró el código después el DOM se carga pero antes de la página muestra.

Cómo utilizar $ (document) .ready ()

jQuery tiene una gran alternativa a body onload que supera estas deficiencias. Echa un vistazo al código para ver cómo funciona:

Utilizando el mecanismo de document.ready
Hizo este cambio?

Este código utiliza la técnica de jQuery para ejecutar código de inicialización:

• El cuerpo de la etiqueta ya no tiene un onload atribuir. Esta es una característica común de programación jQuery. El HTML ya no tiene vínculos directos con el javascript jQuery porque permite que el código javascript unirse a la página web.

• La función de inicialización se crea con el $ (document) .ready () función. Esta técnica le dice al navegador para ejecutar una función cuando el DOM ha terminado de cargar (para que tenga acceso a todos los elementos de la forma), pero antes de que la página se muestra (de forma que cualquier efecto de la forma aparecen instantánea para el usuario).

• $ documento hace que un objeto jQuery de todo el documento. El documento completo se puede convertir en un objeto jQuery especificando documento dentro de $ () función. Tenga en cuenta que usted no usa comillas en este caso.

• La función especificada es automáticamente ejecuta. En este caso particular, se desea ejecutar el Cámbiame() función, por lo que lo coloca en el parámetro de la Listo() método. Tenga en cuenta que esto se refiere a Cámbiame como una variable, por lo que no tiene comillas o paréntesis.

Verá varios otros lugares (sobre todo en la gestión de eventos) en jQuery espera una función como parámetro. Tal función se refiere con frecuencia como una llama de vuelta función porque se llama después de haberse producido algún tipo de evento. También verá las funciones de devolución de llamada que responden a eventos de teclado, ratón de movimiento, y la finalización de una petición AJAX.

Alternativas a document.ready

A veces se ve un par de atajos porque es muy común para ejecutar código de inicialización. Usted puede acortar

 $ (document) .ready (changeMe) -

con el siguiente código:

 $ (changeMe) -

Si el código no está definido dentro de una función y Cámbiame es una función definida en la página, jQuery ejecuta automáticamente la función directamente al igual que el document.ready enfoque.

También puede crear una función anónima directamente:

 $ (document) .ready (function () {. $ ("# output") html ("me cambió") -}) -

Este método (anónimo función) es engorroso, pero con frecuencia ver código jQuery utilizando esta técnica. Puede crear una función llamada en eso() y lo llaman con una línea como esta:

$ (init) -

Esta técnica es simple y fácil de entender, pero usted puede encontrar las otras variaciones como usted examina el código en la web.