jQuery inicia su ejecución de código desde la función $(document).ready() que se ejecuta cada vez que se carga todo el HTML DOM y el navegador lo representa en su totalidad, de modo que los controladores de eventos funcionen correctamente sin ningún error. Esta función $(document).ready() carga el script solo después de que el navegador haya cargado todo el DOM.
El navegador necesita tiempo para preparar el documento cuando no usamos la función $(document).ready() en la etiqueta del script. El jQuery en el script puede ejecutarse antes de algún contenido o elemento sobre el que esté actuando un controlador de eventos o alguna otra función, por lo que esto puede causar algunos problemas en la página web, por lo que siempre es necesario iniciar la ejecución cuando todo el DOM esté listo. Así que usamos la función $(document).ready() .
Sintaxis:
$(document).ready(function({....}));
o
$(function({....}));
$(document).ready() asegura que se ejecuta cuando se carga el DOM. Cuando queremos que la ejecución del script cargue todos los recursos, como imágenes, videos e iframes, debemos usar $(window).on(“load”, function() { … }).
Sintaxis:
$( window ).on( "load", function() { ... })
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<!-- Including jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
h1 {
color: #006600;
text-align: center;
}
#btn{
text-align: center;
background-color:#006600 ;
color: white;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1> Geeks For Geeks</h1>
<button id = "btn"> Click to see the effects</button>
<div>
<p>
When compared with C++, Java codes are
generally more maintainable because Java
does not allow many things which may
lead bad/inefficient programming if used
incorrectly. For example, non-primitives
are always references in Java. So we
cannot pass large objects(like we can do
in C++) to functions, we always pass
references in Java. One more example,
since there are no pointers, bad memory
access is also not possible.
</p>
</div>
<script>
$(document).ready(function (){
console.log("Document is ready")
$('#btn').click(function(){
$('p').fadeToggle(1000);
})
})
</script>
</body>
</html>
Producción:
documento listo
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA