jQuery para principiantes
jQuery para principiantes
jQuery para principiantes 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:
Le damos la bienvenida al curso de jQuery para principiantes.
En esta sección, comenzaremos a aprender información detallada sobre jQuery.
Introducción 2
Antes de comenzar este curso,
es requisito haber realizado los siguientes cursos:
- Introducción a HTML
- Introducción a CSS
- Fundamentos de JavaScript
- Si ya tiene conocimientos sobre estos temas, puede continuar con el curso.
Comencemos
Comencemos.
En primer lugar, respondamos para qué se utiliza jQuery.
Antes de responder la pregunta, repasemos los conceptos básicos
Antes de responder la pregunta, repasemos los conceptos básicos.
El lenguaje HTML es un lenguaje de marcado. Por lo tanto, es un lenguaje de marcado de texto, no un lenguaje de programación. Está muy alejado de conceptos como la orientación a objetos. En otras palabras, su estructura no contiene objetos; lo que conocemos son etiquetas HTML, atributos, etc.
JavaScript realiza operaciones en el DOM
En muchas ocasiones necesitamos realizar operaciones en elementos HTML de las páginas web. Para hacerlo y permitir que JS acceda a los elementos HTML, los representamos mediante un modelo llamado DOM (Document Object Model).
JavaScript realiza operaciones en el DOM, que es el equivalente en forma de objetos de la página web. A esto lo llamamos manipulación del DOM.
Ejemplo
Veamos un ejemplo.
Tenemos un elemento de tipo botón como el del ejemplo siguiente, cuyo texto es 'Not Clicked'. Cuando hagamos clic en el botón, cambiaremos su texto a 'Clicked'.
Para lograrlo, debemos realizar una manipulación del DOM utilizando el lenguaje JavaScript.
En nuestro curso de Introducción a JavaScript, aprendimos a gestionar un documento web con JavaScript. jQuery es una biblioteca que nos permite realizar la manipulación del DOM de forma más concisa cuando lo hacemos con JavaScript.
<!--Initial Element -->
<button id="my-button">Not Clicked</button>
<!---Desired Element after clicking the button-->
<button id="my-button">Clicked</button>Pregunta
¡Una pregunta para usted!
Ejemplo 2
En el ejemplo siguiente, definimos un botón con el id my-button.
Ahora accedamos a este elemento con JavaScript mediante el DOM.
Cuando hagamos clic en el botón, accederemos al DOM con el código JS y cambiaremos a click la propiedad innerHTML del elemento cuyo id es my-button.
<button id="my-button">
Not Clicked
</button>
<script>
let myButton = document.getElementById('my-button');
myButton.addEventListener("click",
function(){
myButton.innerHTML = "Clicked"
})
</script>Advertencia
jQuery no es más que una biblioteca creada para simplificar el uso de funciones y métodos de JS Core.
En otras palabras, nos permite realizar muchas tareas que podemos hacer con VanillaJS utilizando una sintaxis más sencilla y fácil de leer.
Explicación del ejemplo
Expliquemos el código.
let myButton = document.getElementById('my-button');
Asignamos el objeto document de JavaScript a la variable llamada myButton mediante el método getElementById.
myButton.addEventListener("click", function(){
myButton.innerHTML = "Clicked"
})
Después, escuchamos el evento click del botón y modificamos el botón.
Realizamos una manipulación del DOM utilizando las funciones básicas del lenguaje sin usar ninguna biblioteca ni framework, lo que anteriormente denominamos nativo o vanilla.
Escribamos el mismo código con jQuery y aprovechemos las funciones que nos ofrece la biblioteca jQuery.
Advertencia
El concepto, que en muchos lugares se expresa como VanillaJS, en realidad se refiere únicamente a los objetos, métodos y funciones principales de Javascript puro y limpio, así como al uso de las funcionalidades que ofrece el navegador.
Ejemplo de jQuery
A continuación, hemos realizado el ejemplo anterior utilizando jQuery.
Tenga cuidado de no acortar demasiado el código omitiendo la sintaxis.
<script>
$('#my-button').on('click', function(){
$(this).text('Clicked');
})
</script>
<button id="my-button">Not Clicked</button>Felicitaciones
Felicitaciones 🎉
En esta sección, comenzamos a aprender jQuery y comprendimos cuánto puede facilitarnos la vida.
¡Nos vemos en la siguiente sección!
Preguntas frecuentes
¿La lección «jQuery para principiantes» es gratis?
Sí — el texto completo de «jQuery para principiantes» 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 «jQuery para principiantes»?
jQuery para principiantes 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 «jQuery para principiantes»?
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.