jQuery es una biblioteca de JavaScript diseñada para smiplificar la interacción con el Document Object Model (DOM), la gestión de eventos y las peticiones asíncronas (AJAX). Su filosofía principal se resume en "escribir menos, hacer más", proporcionando una API transversal que resuelev las inconsistencias entre los distintos navegadores.

Al integrar jQuery, se obtiene un objeto envuelto (wrapped set) que difiere del nodo DOM nativo. Mientras que un elemento DOM estándar utiliza métodos nativos como innerHTML o addEventListener, el objeto jQuery expone métodos propios como .html() o .on(). Una convención estándar en la industria es prefijar las variables que almacenan objetos jQuery con el símbolo $ para diferenciarlas de los nodos DOM puros.

// Conversión entre objetos DOM y jQuery
const nativeElement = document.getElementById('user-profile');
const $jqueryElement = $('#user-profile');

// Acceder al nodo nativo desde el objeto jQuery
const firstNativeNode = $jqueryElement[0];

El motor de selectores de jQuery permite localizar elementos en el árbol DOM utilizando sintaxis CSS, complementada con pseudo-clases y filtros específicos.

Selectores Básicos y de Atributos

// Selectores básicos
$('#main-container');       // Por ID
$('.active-item');          // Por clase
$('article.post');          // Por etiqueta y clase

// Selectores de atributos
$('input[type="email"]');   // Atributo específico
$('a[target="_blank"]');    // Enlaces con target específico

Filtros de Formularios y Estado

// Estados de formularios
$(':checkbox:checked');             // Checkboxes marcados
$('select option:selected');        // Opciones seleccionadas en un dropdown
$('input:enabled');                 // Campos no deshabilitados

Métodos de Filtrado y Traversing

Una vez seleccionado un conjunto de elementos, jQuery proporciona métodos para navegar por el árbol DOM de manera eficiente.

const $target = $('.notification');

// Navegación entre hermanos y padres
$target.next('.action-buttons');    // Siguiente hermano inmediato
$target.siblings();                 // Todos los hermanos
$target.closest('.modal-wrapper');  // Ascender hasta encontrar el ancestro que coincida

// Filtrado dentro del conjunto
$('li.item').filter('.highlight');  // Reduce el conjunto a los que tienen la clase
$('div.panel').find('h3');          // Busca descendientes dentro del conjunto

La modificación del DOM, los estilos y los atributos se realiza mediante métodos encadenables que optimizan la lectura y escritura del código.

Gestión de Clases y CSS

const $card = $('.product-card');

$card.addClass('is-visible');
$card.removeClass('is-hidden');
$card.toggleClass('is-expanded');

// Modificación directa de estilos
$card.css({
    'background-color': '#f4f4f9',
    'border-radius': '8px'
});

Atributos vs Propiedades (attr vs prop)

Es crucial distinguir entre atributos HTML (attr) y propiedades del DOM (prop). Para estados booleanos como checked o disabled, siempre se debe utilizar prop().

// Incorrecto para estados dinámicos
$('#newsletter-opt').attr('checked', 'checked'); 

// Correcto
$('#newsletter-opt').prop('checked', true);

Inserción y Clonación de Elementos

const $newBadge = $('<span class="badge">Nuevo</span>');

// Inserción
$('.product-title').append($newBadge);
$newBadge.insertBefore('.product-price');

// Clonación (true copia también los controladores de eventos)
const $originalButton = $('.btn-primary');
const $clonedButton = $originalButton.clone(true).appendTo('.toolbar');

El módulo de eventos de jQuery unifica la forma de capturra interacciones, permitiendo delegación, prevención de comportamientos por defecto y control de la propagación.

Delegación de Eventos

La delegación es esencial para manejar eventos en elementos generados dinámicamente. Se adjunta el listener a un ancestro estable.

// Delegación para botones de eliminación en una lista dinámica
$('#task-list').on('click', '.btn-delete-task', function(event) {
    const $taskItem = $(this).closest('.task-item');
    
    // Animación de salida antes de remover del DOM
    $taskItem.fadeOut(300, function() {
        $(this).remove();
    });
});

Control de Flujo de Eventos

$('#contact-form').on('submit', function(event) {
    // Previene el envío nativo del formulario
    event.preventDefault(); 
    
    const $emailField = $('#user-email');
    if ($emailField.val().trim() === '') {
        $emailField.addClass('input-error');
        // Detiene la propagación hacia elementos padres
        event.stopPropagation(); 
    }
});

jQuery incluye una cola de animaciones integrada que permite transiciones suaves sin depender exclusivamente de CSS3.

const $cartIcon = $('#shopping-cart-icon');

$('#add-to-cart-btn').on('click', function() {
    // Animación de rebote usando la API de jQuery
    $cartIcon.animate({
        marginTop: '-10px'
    }, 150).animate({
        marginTop: '0px'
    }, 150);
    
    // Alternativa con clases CSS y toggle
    $cartIcon.addClass('bounce-effect');
    setTimeout(() => $cartIcon.removeClass('bounce-effect'), 500);
});

La arquitectura de jQuery permite extender su núcleo ($.extend) o añadir métodos a los objetos jQuery ($.fn.extend), facilitando la reutilización de código.

Ejemplo: Plugin de Contador de Caracteres

El siguiente ejemplo demuestra cómo crear un plugin reutilizable que cuenta los caracteres restantes en un área de texto.

(function($) {
    $.fn.extend({
        charCounter: function(maxLimit) {
            // Itera sobre todos los elementos en el conjunto jQuery
            return this.each(function() {
                const $textarea = $(this);
                
                // Crea el elemento visual para el contador
                const $counter = $('<span class="char-counter"></span>')
                    .insertAfter($textarea);
                
                // Función de actualización
                const updateCount = function() {
                    const currentLength = $textarea.val().length;
                    const remaining = maxLimit - currentLength;
                    
                    $counter.text(remaining + ' caracteres restantes');
                    
                    if (remaining < 0) {
                        $counter.addClass('limit-exceeded');
                    } else {
                        $counter.removeClass('limit-exceeded');
                    }
                };
                
                // Vincula el evento de entrada
                $textarea.on('input', updateCount);
                
                // Inicializa el contador
                updateCount();
            });
        }
    });
})(jQuery);

// Uso del plugin en la aplicación
$('#bio-textarea').charCounter(250);
$('#comment-input').charCounter(100);