Sencillo post para repasar la función de jQuery ready(), su funcionalidad es la de ejecutar funciones una vez cargada en su totalidad una página web (DOM).
Otra función de jQuery que es bastante útil para combinar con ready() es jQuery.noConflict(). De esta manera estamos previniendo que se den errores de duplicidad del alias $.
Sintaxis de jQuery ready()
Veamos las posibles sintaxis extraídas de su web oficial:
|
1 2 3 |
$(document).ready(funcion) $().ready(funcion) /* no se recomienda */ $(funcion) |
Os explico los parámetros:
- document (Opcional): document especifica el DOM de la web actual. Siempre que se ponga este parámetro su valor debe ser ‘document’.
- funcion (Obligatorio): Función a ejecutarse.
Os recomiendo leer estos post para saber usar los selectores y realizar diveras acciones:
- jQuery selectors: Cómo seleccionar o controlar elementos del DOM.
- jQuery chaining: Aplicar secuencias de efectos
Ejemplos de jQuery ready()
Veamos una serie de ejemplos de esta función:
|
1 2 3 |
$(document).ready(function() { $("#parrafo").text("Probando la función ready()"); }); |
En el ejemplo superior estamos escribiendo un texto en un párrafo una vez cargada la página web. La función usada para escribir ha sido jQuery text().
|
1 2 3 4 5 |
$(document).ready(function(){ $("#boton").click(function(){ $("#parrafo").slideToggle(); }); }); |
En este otro ejemplo estamos mostrando u ocultando un párrafo una vez cargada la página web y tras hacer click en un botón con id=’boton’. La función usada para realizar este efecto ha sido jQuery slideToggle().