Instalación y Configuración

Métodos de implementación

Existen dos vías principales para integrar jQuery en tu proyecto, dependiendo de si buscas agilidad en el desarrollo o independencia total del servidor.

1. Referencia vía CDN (Content Delivery Network)

Es la opción más eficiente para entornos de aprendizaje y desarrollo web público.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

• Ventajas: Aprovecha la caché del navegador de los usuarios si han visitado otros sitios que usan el mismo CDN, reduciendo tiempos de carga.
• Consideración técnica: Obliga a mantener una conexión activa a internet durante la etapa de desarrollo.

2. Descarga local (Hosting propio)

Ideal para entornos cerrados, intranets o aplicaciones que requieran disponibilidad offline.

Debes descargar el archivo .min.js desde jquery.com y referenciarlo en tu estructura de archivos:

<script src="js/jquery.min.js"></script>

• Ventajas: Control absoluto sobre la versión de la librería y funcionamiento garantizado sin conexión.
• Consideración técnica: Incrementa ligeramente la carga de archivos en tu propio servidor.

El Ciclo de Vida: ¿Cómo invocarlo en JavaScript?

Uno de los errores más comunes al iniciarse con jQuery es intentar manipular elementos antes de que el navegador haya finalizado la renderización del árbol DOM. Para evitar fallos, es imperativo encapsular el código en la función de inicialización:

$(document).ready(function() {
    // 1. Verificación de carga del DOM
    console.log("El DOM está listo: jQuery inicializado.");

    // 2. Ejemplo de manipulación de estilos
    // Seleccionamos todos los encabezados H1 y cambiamos su color a nivel de CSS
    $('h1').css('color', '#007bff'); 
});
                

El símbolo $ actúa como un alias (shorthand) para la función principal jQuery(). Este método es la puerta de entrada a todo el API de la librería, permitiendo seleccionar elementos, gestionar eventos y aplicar animaciones con una sintaxis altamente simplificada.