ejemplos de código de document ready con jquery

ejemplos de código de document ready con jquery

ejemplos de código de document ready con jquery

la sintaxis básica para utilizar jQuery en nuestro documento es Primero enlazar la librería de jQuery de Google y entonces ya podemos hacer uso de ella.

jQuery nos ayuda a seleccionar un elemento o selector de nuestra página, y realizar acciones sobre el.

Para ello empezamos con el símbolo $ y entre paréntesis el elemento al cual le queremos realizar un cambio y después un método o acción

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("elemento").accion();
</script>
</head>
<body>
</body>
</html>

para que el código de jQuery funcione bien en nuestra página tenemos dos opciones:

la primera sería poner el código al final del documento para asegurarnos que se ha cargado el elemento o selector antes de ejecutar una acción sobre el .

y la segunda opción es poner el código en el apartado Head de nuestro documento y utilizar el evento ready del documento como te muestro a continuación

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").hide();
});
</script>
</head>
<body>
<p>videotutoriales.es</p>
<p>Otro párrafo</p>
</body>
</html>

en el código anterior tenemos en el apartado head una referencia a la librería jQuery y después utilizamos el evento ready del documento para indicar que cuando se cargue la página o el documento esté cargado oculte todos los elementos que tengan la etiqueta HTML P de párrafo.

en conclusión es una buena costumbre utilizar el evento ready del documento para asegurarnos que todos los elementos estén cargados en la página antes de realizar una acción sobre ellos como por ejemplo ocultarlos.