≡En resumen
- jQuery es una biblioteca de JavaScript: no es un lenguaje ni un framework, es un conjunto de funciones listas para usar.
- Su gran aportación fue una API única que funcionaba igual en todos los navegadores cuando cada uno interpretaba JavaScript a su manera.
- Se carga desde el jQuery CDN, con npm o descargando el archivo, y se usa con la función $().
- Sigue en el 65,6 % de las webs, en buena parte porque WordPress y muchos temas y plugins lo incluyen.
- En proyectos nuevos, JavaScript nativo (querySelector, addEventListener, fetch) cubre casi todo lo que hacía jQuery.
01 ¿Qué es jQuery?
John Resig presentó jQuery en BarCamp NYC en enero de 2006, inspirado en la biblioteca cssQuery de Dean Edwards, y la versión 1.0 salió el 26 de agosto de 2006. En aquella época Internet Explorer, Firefox y Safari trataban el DOM y los eventos de forma distinta, y jQuery escondía esas diferencias tras una sola sintaxis. Por eso se extendió tan rápido.
El nombre combina JavaScript y query (consulta): casi todo empieza por «consultar» elementos de la página con un selector CSS, como $('#formulario') o $('.boton'). El símbolo $ es un alias de la función jQuery().
02 ¿Para qué sirve jQuery?
Seleccionar y modificar el DOM
Busca elementos con selectores CSS y cambia su texto, atributos, clases o estilos en una línea.
Gestionar eventos
Clics, envíos de formularios, teclas o scroll con .on(), incluso en elementos que se añaden después.
Animaciones y efectos
fadeIn, slideToggle o animate para mostrar, ocultar y mover elementos sin escribir la animación a mano.
Peticiones AJAX
$.ajax, $.get o $.post para enviar y recibir datos del servidor sin recargar la página.
Plugins
Miles de extensiones (sliders, validación de formularios, galerías) y la biblioteca de componentes jQuery UI.
Compatibilidad
La misma API funciona en Chrome, Edge, Firefox, Safari y navegadores móviles.
Alrededor de la biblioteca creció un ecosistema propio: jQuery UI, con componentes de interfaz como calendarios, diálogos y elementos arrastrables; QUnit, un entorno de pruebas para JavaScript; y jQuery Mobile, pensado para webs móviles, que el propio equipo declaró obsoleto en 2021. Todos ellos forman parte hoy de la OpenJS Foundation, la misma organización que acoge proyectos como Node.js.
03 Cómo instalar y usar jQuery
-
1
Desde el CDN oficial
Añade una etiqueta script que apunte a code.jquery.com con la versión exacta y el atributo integrity. Es la forma más rápida de probarlo.
-
2
Con npm
En proyectos con Vite o webpack, ejecuta npm install jquery e impórtalo con import $ from 'jquery'.
-
3
Descargando el archivo
Descarga la versión minificada desde jquery.com, súbela a tu servidor y enlázala desde tu HTML.
-
4
Espera a que cargue el DOM
Coloca tu código dentro de $(function () { … }) o carga el script al final del body.
-
5
Consulta la API
Cada método, con ejemplos y la versión en que se añadió o eliminó, está en api.jquery.com.
Los enlaces oficiales con su hash de integridad, las alternativas (Google, cdnjs, jsDelivr) y cuándo conviene alojarlo tú están en nuestra ficha del jQuery CDN.
$.getJSON('/api/productos', function (datos) { $('#total').text(datos.length + ' productos'); });
Pide una lista al servidor y escribe el total en el elemento con id total, sin recargar la página.
04 Ejemplos prácticos de código jQuery
La clave de jQuery es que $() devuelve un objeto con todos los elementos encontrados, y cada método se aplica a todos a la vez. Además, los métodos se pueden encadenar: $('.aviso').addClass('visible').fadeIn(300) añade una clase y muestra el aviso con un fundido en una sola instrucción. Estos son tres usos típicos que verás en webs reales:
$('.tab').on('click', function () { var id = $(this).data('target'); $('.panel').hide(); $('#' + id).show(); $('.tab').removeClass('activa'); $(this).addClass('activa'); });
Al pulsar una pestaña se oculta el resto de paneles, se muestra el suyo y se marca como activa.
$('#contacto').on('submit', function (e) { if ($('#email').val().indexOf('@') === -1) { e.preventDefault(); $('#error').text('Revisa tu email'); } });
Si el email no contiene una arroba, se detiene el envío y se muestra un mensaje.
$('#cargar-mas').on('click', function () { $('#lista').append($('<li>').text('Nuevo elemento')); });
Crea un elemento de lista y lo añade al final. Con $.get podrías traer ese contenido desde el servidor.
05 jQuery vs JavaScript nativo
Casi todo lo que popularizó jQuery lo incorporaron después los propios navegadores. Esta tabla muestra las equivalencias más habituales:
| Tarea | jQuery | JavaScript nativo |
|---|---|---|
| Seleccionar elementos | $('.item') | document.querySelectorAll('.item') |
| Escuchar un clic | $(el).on('click', fn) | el.addEventListener('click', fn) |
| Añadir una clase | $(el).addClass('activo') | el.classList.add('activo') |
| Pedir datos | $.getJSON(url, fn) | fetch(url).then(r => r.json()) |
| Esperar al DOM | $(fn) | document.addEventListener('DOMContentLoaded', fn) |
| Animar | .fadeIn(), .animate() | Transiciones CSS o element.animate() |
06 ¿Se sigue usando jQuery en 2026?
65,6 %
de todas las webs usa jQuery
Fuente: W3Techs, 28 de septiembre de 2026
86 %
de las webs con una biblioteca JavaScript conocida usa jQuery
Fuente: W3Techs, 28 de septiembre de 2026
23,4 %
de los desarrolladores lo usó en el último año
Fuente: Stack Overflow Developer Survey 2025
Sí, y mucho, aunque sobre todo en webs existentes. WordPress lo incluye en su núcleo y muchos temas y plugins dependen de él, lo que explica buena parte de esa cifra. En cambio, grandes proyectos lo han retirado: GitHub lo eliminó de su interfaz en 2018 y Bootstrap dejó de necesitarlo en su versión 5, de 2021. Según W3Techs, el 78,7 % de las webs con jQuery usa la rama 3.
- ✓jQuery 4.0.0 se publicó el 17 de enero de 2026 y deja de dar soporte a Internet Explorer 10 y anteriores.
- ✓Elimina funciones obsoletas como jQuery.isArray, jQuery.trim o jQuery.parseJSON: usa sus equivalentes nativos.
- ✓Su código fuente pasa a módulos ES y añade compatibilidad con Trusted Types.
- ✓El plugin jQuery Migrate avisa en consola de lo que tienes que cambiar al actualizar.
- ✓Mantener versiones muy antiguas (1.x o 2.x) expone a vulnerabilidades ya corregidas: actualiza o elimina la dependencia.
07 Cuándo usar jQuery y cuándo evitarlo
| Situación | Recomendación |
|---|---|
| Web WordPress que ya lo carga | Úsalo si lo necesitas: ya está descargado |
| Web existente con muchos plugins jQuery | Mantenlo, actualiza a 3.7.1 o 4.0.0 y prueba |
| Proyecto nuevo con poca interacción | JavaScript nativo; te ahorras la descarga |
| Aplicación web compleja | Un framework de componentes (React, Vue, Svelte) |
| Solo para un efecto o un slider | Evítalo: CSS y unas líneas de JavaScript bastan |
Preguntas frecuentes sobre jQuery
Es una biblioteca de JavaScript que simplifica seleccionar y modificar elementos HTML, gestionar eventos, animar y hacer peticiones AJAX con una sintaxis corta y compatible con todos los navegadores.
No. Es una biblioteca escrita en JavaScript: el código que escribes con jQuery es JavaScript que llama a sus funciones.
Es un alias de la función jQuery(). $('.boton') equivale a jQuery('.boton') y devuelve los elementos que coinciden con el selector.
Con una etiqueta script que apunte al CDN oficial (code.jquery.com), con npm install jquery en proyectos con empaquetador o descargando el archivo y alojándolo en tu servidor.
jQuery 4.0.0, publicada el 17 de enero de 2026. La última de la rama 3 es la 3.7.1.
No está abandonado: se mantiene y publicó la versión 4.0.0 en 2026. Pero en proyectos nuevos suele ser innecesario, porque JavaScript nativo ya ofrece casi todas sus funciones.
Sí. Es software libre con licencia MIT: puedes usarlo en proyectos personales y comerciales sin coste.
jQuery es la biblioteca base; jQuery UI es un proyecto aparte, construido sobre ella, con componentes de interfaz como calendarios, diálogos o elementos arrastrables.
Fuentes consultadas
Sobre el autor
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil y artículos → Ver perfil en LinkedIn ↗