¿QUÉ ES JQUERY?

jQuery es una biblioteca de JavaScript rápida y liviana que simplifica el recorrido del DOM, el manejo de eventos, las animaciones y las llamadas AJAX. La tabla a continuación presenta 15 ejemplos prácticos e interactivos para aprender su uso.

SELECTORES

Ejemplos 1–3: Selección de elementos con jQuery
Ejemplo Descripción Código jQuery Instrucciones Demo
1 Seleccionar por ID y cambiar color $('#box1').css('background','#f97316'); Selecciona un elemento por su ID y cambia su color de fondo.
Caja
2 Seleccionar por clase y ocultar $('.ocultar').hide(); Selecciona todos los elementos con la clase indicada y los oculta.
Elemento
3 Seleccionar por atributo $('[data-tipo="especial"]').css('border','2px solid #f97316'); Selecciona elementos que tengan un atributo HTML específico.
Especial

MANIPULACIÓN DEL DOM

Ejemplos 4–8: Modificar el contenido y estructura de la página
Ejemplo Descripción Código jQuery Instrucciones Demo
4 Cambiar texto con .text() $('#txt4').text('¡Hola jQuery!'); Reemplaza el contenido de texto de un elemento.

Ejemplo jQuery
5 Insertar HTML con .html() $('#html5').html('<b>Negrita</b>'); Inserta HTML dentro de un elemento existente.

Sin formato
6 Agregar / quitar clase con .toggleClass() $('#box6').toggleClass('resaltado'); Alterna una clase CSS en el elemento con cada clic.
Toggle
7 Agregar elemento con .append() $('#lista7').append('<li>Item</li>'); Agrega un nuevo elemento hijo al final de un contenedor.
  • Casilla 1
8 Eliminar elemento con .remove() $('#lista8 li:last').remove(); Elimina el último elemento hijo de un contenedor.
  • Item A
  • Item B
  • Item C
  • Item D

EVENTOS

Ejemplos 9–11: Manejo de eventos del usuario
Ejemplo Descripción Código jQuery Instrucciones Demo
9 Evento click con contador $('#btn9').on('click', fn); Escucha el evento click y ejecuta una función cada vez que se dispara.
0 clics
10 Evento hover $('#hov10').hover(inFn, outFn); Ejecuta funciones al pasar y al quitar el cursor sobre el elemento.
Pasa el cursor
11 Leer valor de input con .val() var v = $('#inp11').val(); Obtiene el valor escrito en un campo de texto y lo muestra en pantalla.

ANIMACIONES

Ejemplos 12–14: Efectos visuales y animaciones
Ejemplo Descripción Código jQuery Instrucciones Demo
12 fadeIn / fadeOut $('#box12').fadeToggle(600); Muestra u oculta un elemento con efecto de desvanecimiento.
Fade
13 slideUp / slideDown $('#panel13').slideToggle(400); Colapsa o expande un elemento con efecto de deslizamiento vertical.
Panel deslizante
14 Encadenamiento (chaining) $('#ch14').css('color','#10b981').slideUp(400).slideDown(400); Encadena múltiples métodos jQuery en una sola línea de código.
Chain

AJAX

Ejemplo 15: Peticiones asíncronas con jQuery AJAX
Ejemplo Descripción Código jQuery Instrucciones Demo
15 Petición AJAX con $.ajax() $.ajax({url:'…', success: fn}); Realiza una petición HTTP asíncrona y muestra la respuesta sin recargar la página.

Sin datos