Vanilla JavaScript equivalente de jQuery's $.listo?

Mientras desarrollan sitios web, los programadores usan el JavaScript simple llamado "Javascript de vainilla"Y la Biblioteca JavaScript"jQuery". Muchos marcos y bibliotecas de desarrollo web modernos fomentan o incluso requieren usar javascript de vainilla en lugar de jQuery, ya que puede ser más eficiente, flexible y más fácil de entender y mantener.

Este blog demostrará el equivalente de Vanilla JavaScript de la jQuery $.Método Ready ().

Vanilla JavaScript equivalente de jQuery's $.listo()

El equivalente de javascript de vainilla de los $ jQuery.La función Ready () es la "documento.addEventListener ("DomContentLoaded", function () ...);" función.

Cómo usar el evento "DomContentLoaded" de Vanilla JavaScript?

"DomcontentLoaded"Es un evento en JavaScript que se dispara o se activa sin tener que esperar a que hojas de estilo, gráficos o subtramas se carguen por completo antes de analizar el contenido básico de HTML.

Sintaxis

elemento.addEventListener (evento, función, useCapture);

En esta sintaxis:

• "evento"Es el primer parámetro, que puede ser cualquier evento de JavaScript válido.
• "función"¿Es el cuerpo principal ejecutado cuando se activa el evento?.
• "Usecapture"Es un parámetro opcional.

Ejemplo

En este ejemplo, el script se ejecuta cuando el DOM está completamente cargado con Vanilla JavaScript.

Para hacerlo, crearemos encabezados en un archivo HTML que se mostrará en la página después de cargar la página:

Javascript de vainilla

Dom está completamente cargado

En ""Etiqueta, muestre un mensaje de alerta al cargar la página e imprima el mensaje en la consola cuando se cargue la página:

Según el fragmento de código anterior:

• Invoca el "addEventListener ()"Método con el evento"DomcontentLoaded"Y una función que imprima un mensaje después de cargar la página completa.
• El cuadro de diálogo de alerta se muestra antes de cargar la página.

Se puede observar que el contenido se ha mostrado cuando el DOM está completamente cargado:

Cómo usar la función jQuery $ Ready ()?

El "ps.listo()La función en jQuery se usa para ejecutar una función o un bloque de código tan pronto como el DOM esté listo/disponible para la manipulación. Esto significa que la función se ejecutará tan pronto como la página haya terminado de cargar y analizar el HTML, pero antes de que todos los demás recursos, como imágenes y hojas de estilo, hayan terminado de cargar.

Sintaxis

Para el "listo()"Función en jQuery, use la sintaxis dada a continuación:

$ (documento).Ready () cuerpo

En esta sintaxis, el "cuerpo"Se ejecuta después de que toda la página esté completamente cargada.

Ejemplo

En el siguiente ejemplo, el documento HTML específico ocultará el elemento en el botón Haga clic después de cargar la página completa.

Para usar jQuery en su código, es importante cargar primero la biblioteca:

Agregue algo de contenido en el archivo HTML que se mostrará en la página después de cargar el DOM:

JQuery Ready () Función

Dom está completamente cargado

Ocultar el elemento

En la etiqueta, primero muestre un mensaje de alerta mientras carga el DOM. Luego, después de mostrar contenido, oculte el encabezado mientras hace clic en el botón:

Se puede ver que el contenido se ha cargado en la página después de cargar el elemento DOM y el encabezado se esconderá en el botón Haga clic:

Eso se trataba del equivalente de la función jQuery $ Ready () en Vanilla JavaScript.

Conclusión

El "DomcontentLoaded"El evento es equivalente a JQuery"ps.listo()" método. El "DomContentLoaded" y el "$.Ready () ”disparará antes del evento de carga. Esto significa que puede usarlo para ejecutar código tan pronto como el DOM esté listo sin esperar a que se carguen todos los recursos. Este blog demostró el equivalente de Vanilla JavaScript de la jQuery $.Método Ready ().