← Vídeo anterior Vídeo siguiente →
Hemos hablado bastante sobre selectores. Un selector de jQuery como $ (“h1”) seleccionará todo <h1> elementos de la página. Pero ¿qué pasa con … cuando no es así? Aquí hay un ejemplo de cuándo fallaría ese selector:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learning jQuery</title>
<script src="https://css-tricks.com/lodge/learn-jquery/05-dom-ready/js/jquery-2.0.3.js"></script>
<script>
$("h1").css("color", "red");
</script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Será eso <h1> elemento ser rojo? No. WTF ¿verdad? La razón por la que no se vuelve rojo es porque cuando se ejecuta ese código jQuery, no hay <h1> para que lo encuentre todavía. Todavía no ha llegado al DOM. Eso es porque su HTML se lee de arriba a abajo. Imagine que el navegador lee la primera línea, luego la siguiente y luego la siguiente. Cuando llega a la línea con el selector de jQuery, solo conoce esa línea y todo lo que está por encima de ella. Entonces no <h1> se encuentra y no ocurre ningún cambio de color.
¿Cómo afrontamos este problema? La mejor manera de manejar esto es cargar archivos JavaScript en la parte inferior de su página. Justo encima del cierre </body> etiqueta. Los archivos JavaScript “bloquean” la representación de la página a medida que se descargan y ejecutan, por lo que hará que su página se cargue más rápido de todos modos. Pero eso significa que nuestros selectores de jQuery encontrarán todo lo que se supone que deben encontrar como bonificación.
La carga de los scripts en la parte inferior se vería así:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learning jQuery</title>
</head>
<body>
<h1>Hello, World!</h1>
<script src="https://css-tricks.com/lodge/learn-jquery/05-dom-ready/js/jquery-2.0.3.js"></script>
<script>
$("h1").css("color", "red");
</script>
</body>
</html>Pero a veces se cargan guiones en la cabeza. Hay todo tipo de excusas para ello, la mayoría malas, pero no juzguemos demasiado sin detalles =).
Aún podemos solucionar el problema de no encontrar elementos de una manera bastante satisfactoria incluso si nos vemos obligados a cargar scripts en la cabeza. Lo hacemos a través de la función de jQuery “DOM Ready”. Literalmente, cuando el documento está terminado y listo para ser manipulado. Se parece a esto:
$(document).ready(function() {
});Hay una versión más corta que hace exactamente lo mismo:
$(function() {
});Poner su código dentro de una función como esa asegura que no se ejecutará hasta que el documento esté listo. En realidad, es un código bastante inteligente el que lo hace, lo que, por supuesto, es difícil de hacer en varios navegadores. Lo bueno de esto es que es bastante rápido. No es lo mismo que esperar a que se cargue toda la ventana, lo cual es lento, porque espera a que se descarguen todos los recursos antes de disparar. DOM ready sucede mucho antes. Si necesita esperar a que se completen los recursos (por ejemplo, necesita medir una imagen), puede esperar eso de esta manera:
$(window).load(function() {
});Arreglando nuestro anterior problema de JavaScript en la cabeza con DOM listo, el código se vería así:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learning jQuery</title>
<script src="https://css-tricks.com/lodge/learn-jquery/05-dom-ready/js/jquery-2.0.3.js"></script>
<script>
$(function() {
$("h1").css("color", "red");
});
</script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>