jQuery
evento listo para documentos

¿Qué es el documento listo y cómo debo usarlo?

El código jQuery a menudo se envuelve en jQuery(function($) { ... }); de modo que solo se ejecuta después de que el DOM haya terminado de cargarse.

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

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

Esto es importante porque jQuery (y JavaScript en general) no puede seleccionar un elemento DOM que no se haya procesado en la página.

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

Tenga en cuenta que puede asignar un alias al espacio de nombres jQuery pasando un controlador personalizado al método .ready() . Esto es útil para los casos en que otra biblioteca JS usa el mismo $ alias acortado que jQuery , lo que crea un conflicto. Para evitar este conflicto, debe llamar a $.noConflict(); - Esto le obliga a usar solo el espacio de nombres jQuery predeterminado (en lugar del $ alias corto).
Al pasar un controlador personalizado al controlador .ready() , podrá elegir el nombre de alias para usar 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>')
});

En lugar de simplemente colocar su código jQuery en la parte inferior de la página, el uso de la función $(document).ready garantiza que todos los elementos HTML se hayan procesado y que todo el Modelo de objetos de documento (DOM) esté listo para que se ejecute el código JavaScript.

jQuery 2.2.3 y anteriores

Todos estos son equivalentes, el código dentro de los bloques se ejecutará cuando el documento esté listo:

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

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

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

Debido a que estos son equivalentes, la primera es la forma recomendada, la siguiente es una versión de la palabra clave jQuery lugar de $ que producen los mismos resultados:

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

jQuery 3.0

Notación

A partir de jQuery 3.0, solo se recomienda este formulario:

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

Todos los demás manejadores de documentos están en desuso en jQuery 3.0.

Asincrónico

A partir de jQuery 3.0, el controlador listo siempre se llamará de forma asíncrona . Esto significa que en el código a continuación, el registro 'manejador externo' siempre se mostrará primero, sin importar si el documento estaba listo en el punto de ejecución.

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

> manejador externo
> manejador interno

Diferencia entre $ (documento) .ready () y $ (ventana) .load ()

$(window).load() quedó en desuso en la versión 1.8 de jQuery (y se eliminó por completo de jQuery 3.0 ) y, como tal, ya no debe utilizarse. Las razones de la desaprobación se indican en la página jQuery sobre este evento.

Advertencias del evento de carga cuando se utiliza con imágenes.

Un desafío común que los desarrolladores intentan resolver con el .load() abreviado .load() es ejecutar una función cuando una imagen (o colección de imágenes) se ha cargado completamente. Hay varias advertencias conocidas con esto que deben tenerse en cuenta. Estos son:

• No funciona de forma coherente ni fiable entre navegadores
• No se dispara correctamente en WebKit si la imagen src está configurada en la misma src que antes
• No burbujea correctamente el árbol DOM
• Puede dejar de disparar para imágenes que ya viven en el caché del navegador.

Si aún desea usar load() está documentado a continuación:

$(document).ready() espera hasta que el DOM completo esté disponible: todos los elementos en el HTML se han analizado y están en el documento. Sin embargo, es posible que recursos como las imágenes no se hayan cargado completamente en este punto. Si es importante esperar hasta que se carguen todos los recursos, $(window).load() y es consciente de las limitaciones significativas de este evento , en su lugar se puede usar lo siguiente:

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

Adjuntando eventos y manipulando el DOM dentro de ready ()

Ejemplos de usos de $(document).ready() :

1. Adjuntando controladores de eventos
   Adjuntar controladores de eventos jQuery

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

2. Ejecutar código jQuery después de crear la estructura de la página

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

3. Manipular la estructura DOM cargada
   Por ejemplo: oculte un div cuando la página se carga por primera vez y muéstrelo en el evento de clic de un botón

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

Diferencia entre jQuery (fn) y la ejecución de su código antes

El uso del evento preparado para documentos puede tener pequeños inconvenientes en el rendimiento , con una ejecución demorada de hasta ~ 300 ms. A veces se puede lograr el mismo comportamiento mediante la ejecución del código justo antes de la etiqueta de cierre </body> :

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

producirá un comportamiento similar, pero tendrá un rendimiento más rápido que el que no espera el desencadenante de evento preparado para el documento como lo hace en:

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

Haga hincapié en el hecho de que el primer ejemplo se basa en su conocimiento de su página y la ubicación del script justo antes de la etiqueta de cierre </body> y específicamente después de la etiqueta span .