Primeros pasos con jQuery
Primeros pasos con jQuery
Primeros pasos con jQuery es una lección gratuita de jQuery Academy en CoddyKit. Esta es la lección 1 de 1. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de jQuery Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de jQuery Academy incluye 1 lecciones en total.
Introducción
Hola:
Para utilizar la biblioteca jQuery, primero debemos añadirla al documento HTML.
En el ejemplo siguiente, se ha añadido la dirección de la biblioteca jQuery como valor del atributo src entre las etiquetas head.
Ahora la biblioteca jQuery está lista para utilizarse en nuestro proyecto.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
</head>
<body>
</body>
</html>Selección con jQuery
Para operar sobre elementos HTML (a partir de ahora los llamaremos DOM), primero debemos seleccionar el elemento.
En jQuery, se utiliza el método $() o jQuery() para realizar una selección.
El método $() es el preferido por los desarrolladores de software.
Con el parámetro que asignemos a este método, decidimos qué elemento queremos seleccionar.
XPath
La expresión que pasamos al método $ es el selector XPath, que también conocemos de CSS.
En otras palabras, seleccionamos los elementos HTML en jQuery de la misma forma que los seleccionamos en CSS.
Ejemplos de XPath
Supongamos que nuestro código HTML es el siguiente.
<div id="my-box" class="my-box">
<p class="my-p">
<span class="my-text">Hello jQuery</span>
</p>
</div>
Seleccionemos elementos HTML utilizando jQuery
// Dummy $ to demonstrate jQuery selectors in Node.js
function $(selector) {
console.log("Selector:", selector);
return [];
}
// Selects the element with the id of my-box.
$('#my-box')
// Selects the element with the my-box class.
$('.my-box')
// Selects all p elements that are descendants of the element with my-box id
$('#my-box p')
// Select the element with the .my-p class that is the child of the element with my-box class.
$('.my-box > .my-p')jQuery nos permitió escribir código más conciso
Si quisiéramos hacer lo mismo con JavaScript Vanilla (puro), tendríamos que escribir más líneas de código.
jQuery nos permite escribir código de forma más concisa mediante sus propios métodos.
Advertencia
jQuery es simplemente una biblioteca que, en la práctica, facilita el desarrollo web más que JavaScript Vanilla.
Información
Otra ventaja de jQuery es que todos los navegadores modernos admiten el código que escribimos.
Parte del código que escribimos con VanillaJS puede causar efectos secundarios en algunos navegadores, mientras que jQuery garantiza el mismo comportamiento en todos los navegadores gracias a la abstracción que proporciona.
jQuery nos evita tener que pensar en las particularidades de cada navegador al escribir código.
$(document).ready
Antes de abordar los conceptos básicos de jQuery, aprendamos el método $(document).ready.
Como recordaremos de HTML, dijimos que los scripts de JavaScript pueden colocarse en cualquier parte entre la etiqueta head o entre las etiquetas body en HTML.
$ (document).ready 2
Supongamos que tenemos un código HTML como el siguiente.
Nuestro navegador interpretará nuestro código desde la etiqueta <!DOCTYPE html> hasta la etiqueta de cierre </html>.
La instrucción <script src = "https://code.jquery.com/jquery-3.5.1.slim.js"> </script> comenzará a descargar la biblioteca a través de code.jquery.com.
En la línea siguiente, se seleccionó el DOM mediante el método $ de jQuery. Sin embargo, aquí hay un problema. Si el documento HTML no se ha cargado por completo cuando se llama al método $ ('# test'), nuestro código JS fallará.
En este caso, se utiliza el método $(document).ready para garantizar que el documento se haya cargado por completo.
<div id="test">Hello Coddy</div>
<script>
$('#test').text('Hello Coddy')
</script>
$ (document).ready 3
Después de la definición anterior,
lo único que debemos hacer es utilizar el método $(document).ready(). Este método esperará a que se cargue todo el contenido y, a continuación, se ejecutará.
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div id="test">Hello Coddy</div>
<script>
$(document).ready(function(){
$('#test').text('Hello Coddy')
})
</script>
</body>
</html>Pregunta
¡Vamos, responda la pregunta!
Felicitaciones
Felicitaciones 🎉
En esta sección, comenzamos a aprender la biblioteca jQuery y su método $(document).ready().
En la siguiente sección, aprenderemos los selectores de jQuery.
Preguntas frecuentes
¿La lección «Primeros pasos con jQuery» es gratis?
Sí — el texto completo de «Primeros pasos con jQuery» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de jQuery Academy, actualiza a CoddyKit PRO. El curso de jQuery Academy incluye 1 lecciones en total.
¿Qué aprenderé en «Primeros pasos con jQuery»?
Primeros pasos con jQuery Practicas jQuery Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar jQuery Academy?
No se requiere experiencia previa. jQuery Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 1.
¿Cuánto tiempo toma la lección «Primeros pasos con jQuery»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de jQuery Academy?
Sí. Cada lección de jQuery Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.