Introducción a jQuery: qué es, para qué sirve y cómo agregarlo a una página

jQuery es una biblioteca de JavaScript. No reemplaza al lenguaje: está construida sobre JavaScript y ofrece una sintaxis más corta para tareas frecuentes como seleccionar elementos, escuchar eventos, modificar el DOM o realizar peticiones AJAX.

¿Por qué apareció jQuery?

Durante muchos años los navegadores tenían diferencias importantes entre sí. jQuery ayudó a escribir una sola solución compatible y redujo mucho código repetitivo.

¿Sigue siendo útil?

Hoy JavaScript nativo resolvió muchas necesidades que antes justificaban jQuery, por lo que no es obligatorio en proyectos nuevos. Sin embargo, sigue siendo muy común en sistemas existentes, plugins, paneles administrativos, proyectos Laravel, DataTables y aplicaciones que usan Bootstrap antiguo.

JavaScript y jQuery: una comparación

// JavaScript
document.querySelector("#mensaje").textContent = "Hola";

// jQuery
$("#mensaje").text("Hola");

Ambos ejemplos hacen lo mismo. La diferencia está en la API que usamos para expresarlo.

Cómo agregar jQuery

Podemos descargar la biblioteca o cargarla desde un CDN. Para empezar, podemos incluirla antes de nuestro propio archivo JavaScript:

https://code.jquery.com/jquery-3.7.1.min.js
http://app.js

El orden importa: primero debe cargarse jQuery y después el código que lo utiliza.

El símbolo $

En jQuery, $ es una función principal que usamos para seleccionar elementos y acceder a los métodos de la biblioteca.

const titulo = $("#titulo");

Esperar a que el DOM esté listo

Si nuestro script se carga antes que el contenido HTML, podemos esperar a que el documento esté preparado:

$(document).ready(function () {
    console.log("DOM listo");
});

También existe una forma abreviada:

$(function () {
    console.log("DOM listo");
});

Primer ejemplo

<button id="saludar">Saludar</button>
<p id="mensaje"></p>

$("#saludar").on("click", function () {
    $("#mensaje").text("¡Hola desde jQuery!");
});

Qué está ocurriendo

• $("#saludar") selecciona el botón;
• .on("click", ...) escucha el clic;
• $("#mensaje") selecciona el párrafo;
• .text() cambia su contenido de texto.

Ejercicio

Creá una página con un botón y dos párrafos. Al hacer clic, cambiá el texto de ambos utilizando jQuery.

Errores comunes

• usar jQuery antes de cargar la biblioteca;
• escribir mal un selector;
• confundir jQuery con JavaScript;
• cargar dos versiones distintas sin necesidad.

---

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender jQuery, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Seguí aprendiendo jQuery

Esta es la primera guía de la ruta de jQuery.

Selectores en jQuery: buscar y recorrer elementos del DOM →