El listo() La función en jQuery ejecuta el código solo cuando el DOM (modelo de objetos de documento) está completamente cargado. Es una función incorporada en jQuery. Puede activarse antes de cargar todas las imágenes, etc., pero sólo cuando el DOM esté listo. El código insertado entre $(documento).listo() se ejecuta solo cuando la página está lista para que se ejecute el código JavaScript.
No deberíamos usar el listo() método junto con el .
Sintaxis
Podemos usar el listo() funcionan de dos maneras, como se indica a continuación.
- La sintaxis comúnmente utilizada de el listo() La función es la siguiente.
$(document).ready(function)
- Como podemos usar el listo() solo funciona para el documento actual, por lo que se puede omitir el selector. También podemos escribir la sintaxis anterior de la siguiente manera.
$(function)
Ambas formas anteriores son válidas de usar. La segunda sintaxis se puede utilizar como alternativa a la primera sintaxis. Puede quedar claro a partir del siguiente código.
$(document).ready(function() { $('p').css('color', 'red'); }); El código anterior es equivalente al código siguiente.
$(function() { $('p').css('color', 'red'); }); Algunos desarrolladores experimentados utilizan la taquigrafía $() en lugar de usar $(documento).listo(), pero si estamos escribiendo el código para personas sin experiencia, es mejor usar el formato largo.
Valores paramétricos
El listo() La función tiene un solo valor de parámetro definido de la siguiente manera.
función(): Es el parámetro obligatorio que especifica la función que se ejecuta después de cargar el documento.
java abriendo un archivo
Veamos un ejemplo del uso de $(documento).listo() función.
Ejemplo
En este ejemplo, hay algunos elementos de párrafo y un botón. Aquí estamos usando $(documento).listo() función para cambiar el estilo de los párrafos dados.
jQuery ready() function $(document).ready(function(){ $('button').click(function(){ $('#p1').css({'font-size': '30px', 'color': 'blue', 'background': 'yellow', 'fontWeight': 'bold'}); $('#p2').css({'fontSize': '20px', 'fontWeight': 'bold', 'color': 'red'}); $('#p3').css({'color': 'blue'}); }); }); <p id="p1"> Welcome to the javaTpoint.com </p> <p id="p2"> This is an example of using the $(document).ready() function. </p> <p id="p3"> This is a third paragraph element </p> <p> Click the following button to see the effect. </p> Click me Pruébalo ahora Producción:
Después de la ejecución del código anterior, el resultado será:
Después de hacer clic en el botón indicado, el resultado será:
