Todo sobre la biblioteca jQuery: para qué sirve, dónde descargarla, cómo conectarla y cuáles son sus ventajas y desventajas.
A veces, al trabajar con JavaScript, hay que construir estructuras complejas, incluso si la tarea es bastante trivial. Para facilitar este trabajo, se creó la biblioteca jQuery. De eso trataremos aquí.
¿Qué es jQuery?
Es una biblioteca JavaScript gratuita y de código abierto. Simplifica notablemente el desarrollo web, permitiendo escribir menos código que con JavaScript “vanilla”.
Se usa principalmente para interactuar con los elementos DOM, pero no es su única ventaja.
Entre las ventajas de la biblioteca también se encuentran:
- Procesamiento de eventos rápido y sencillo: No necesitas escribir funciones complejas para rastrear eventos del ratón, teclado, formularios, etc. jQuery ya tiene manejadores especiales.
- API amigable para trabajar con animaciones: jQuery permite crear animaciones complejas, como atenuación o deslizamiento, usando un código conciso.
- Soporte AJAX: La biblioteca tiene funciones preparadas para realizar solicitudes asíncronas desde aplicaciones web.
- Compatibilidad entre navegadores: El código jQuery funciona en todos los sistemas operativos y navegadores, incluyendo Chrome, Firefox y Safari, excepto versiones antiguas como Internet Explorer 6.
Sin embargo, el código que usa jQuery también tiene desventajas en comparación con el código en JS nativo: la biblioteca aumenta ligeramente el tiempo de carga de la página web y reduce el rendimiento del código.
¿Cómo surgió jQuery?
La biblioteca la escribió el ingeniero John Resig en 2006. En ese entonces, JavaScript tenía una sintaxis bastante incómoda, y los navegadores interpretaban de manera diferente algunas funciones del lenguaje. Para que las aplicaciones web en JS funcionaran igual en todas partes, los programadores tenían que escribir grandes y complejos fragmentos de código: polifills.
Resig resolvió este problema. Desarrolló un conjunto de funciones JS teniendo en cuenta la compatibilidad con la mayor cantidad posible de navegadores, las empaquetó en una biblioteca y ofreció a los desarrolladores una nueva sintaxis. Trabajar con la biblioteca resultó mucho más sencillo que con JavaScript, y se necesitaba escribir mucho menos código.
Más tarde, JavaScript obtuvo nuevas funciones que realizan las mismas tareas que jQuery. Por eso, en proyectos nuevos se usa con poca frecuencia. Pero desde su aparición se ha escrito tanto código que se sigue manteniendo, por lo que la biblioteca, irónicamente, sigue siendo relevante.
¿Cómo trabajar con jQuery?
Para empezar a trabajar con la biblioteca, debes conectarla a tu sitio web. Puedes hacerlo de dos maneras: localmente y remotamente.
En el primer caso, descargas jQuery, la subes a tu servidor y la conectas como un archivo js normal. La ventaja es que la biblioteca siempre está disponible, ya que se encuentra en tu servidor.
En el segundo caso, te conectas a ella remotamente, a través de una CDN (red de entrega de contenido): una red geográficamente distribuida de servidores proxy y sus centros de procesamiento de datos. Cada servidor tiene una caché del contenido, y la entrega al usuario se realiza desde el servidor más cercano. Esto reduce el tiempo de carga y aumenta el rendimiento del sitio. Y si un visitante de tu página web ya ha descargado una copia de jQuery de la misma CDN, no será necesario volver a descargarla en la caché.
Analicemos ambos métodos, comenzando con el local. Primero debes elegir y descargar la versión de jQuery.
¿Cómo descargar jQuery?
Puedes descargar la última versión gratuitamente del sitio web oficial o del repositorio GitHub. Actualmente es jQuery 3.7.1.
Hay dos opciones: la versión completa y la versión reducida (slim). La primera incluye AJAX y efectos de usuario complejos, que no siempre son necesarios al desarrollar sitios web, por lo que en muchos casos puedes usar la segunda.
Para cada versión hay dos copias de archivos: sin comprimir y comprimido. La primera (archivo con extensión js) es cómoda para leer y estudiar: contiene el código completo de la biblioteca. Se usa para desarrollar y depurar código.
La segunda opción (archivo con extensión min.js) es para producción. Se han eliminado los espacios en blanco, los comentarios, los saltos de línea, y se han acortado los nombres de las funciones y variables. Es difícil entender el formato reducido, pero pesa menos y se carga más rápido.
Para la depuración, en el sitio web oficial puedes descargar un archivo sourcemap. También hay versiones anteriores de jQuery. Por ejemplo, si necesitas compatibilidad con los navegadores IE 6-8, puedes usar las versiones de la rama 1.x, donde está disponible.
Para descargar localmente un archivo, haz clic derecho en el enlace que necesitas y selecciona “Guardar enlace como…”.
¿Cómo instalar jQuery?
Ahora, conectemos la biblioteca.
Conexión local: descargas el archivo jQuery, como se explicó anteriormente, y lo subes al servidor en el directorio de tu sitio web. Puedes colocarlo en la carpeta js junto con otros archivos.
Para conectar la biblioteca a la página web, debes agregar la etiqueta <script> con el atributo src y la ruta completa o relativa al archivo en el código HTML. Por ejemplo, si colocamos el archivo en la carpeta js, que se encuentra en el directorio raíz del sitio, se verá así:
<script src="js/jquery-3.7.1.js"></script>Aquí, js es el directorio y jquery-3.7.1.js es el nombre del archivo.
El script debe insertarse entre las etiquetas <head></head>. Es mejor usar el atributo defer: le indica al navegador que debe cargar el script en segundo plano, sin interrumpir el procesamiento de la página. Por ejemplo, si hay un control deslizante en la página, primero se cargarán sus elementos visuales (imágenes, flechas y paginación), y luego el código JavaScript. El script se ejecutará antes del evento DOMContentLoaded. Esto mejorará el rendimiento del sitio y evitará errores:
<head>
...
<script defer src="js/jquery-3.7.1.js"></script>
...
</head>
...Conexión CDN: Puedes conectar la biblioteca jQuery sin descargarla en el sitio. En el sitio web oficial puedes encontrar CDN de diferentes compañías: jQuery CDN, Google CDN, Microsoft Ajax CDN, CDNJS, jsDelivr CDN. Para conectar jQuery desde una CDN, solo necesitas insertar en el código de la página el script donde se indica la ruta a la biblioteca.
El código para conectar la última versión de la biblioteca desde jQuery CDN se verá así:
<script
src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM="
crossorigin="anonymous">
</script>En la página de jQuery CDN puedes encontrar y conectar otras versiones de jQuery. Por ejemplo, este es el código para conectar la última versión de la rama 2.x:
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>Para la versión de la rama 1.x:
<script
src="https://code.jquery.com/jquery-1.12.4.js"
integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
crossorigin="anonymous"></script>¿Cómo comprobar la conexión de jQuery en la página?
Puedes hacerlo usando este código:
<script>
if (window.jQuery) {
// Acciones si jQuery está conectado
} else {
// Acciones si jQuery no está conectado
}
</script>Y con este código puedes averiguar el número de versión de jQuery y mostrarlo en la consola:
<script>
if (window.jQuery) {
var vJq = jQuery.fn.jquery;
console.log(vJq);
}
</script>Conclusiones
A pesar de algunas desventajas y la existencia de bibliotecas más modernas, jQuery, inventada hace 17 años, sigue siendo líder en el mercado.
Esto no es sorprendente, teniendo en cuenta sus principales ventajas: procesamiento de eventos rápido y sencillo, API amigable para trabajar con animaciones, soporte AJAX y compatibilidad entre navegadores.
Hoy en día se puede descargar tanto localmente como remotamente. Cada método tiene sus ventajas, y ambos están disponibles incluso para principiantes.
¡Mucha suerte con tu trabajo!
