JQuery es una librería de JavaScript que simplifica enormemente la interacción con elementos HTML, la gestión de eventos y la creación de animaciones. Su uso extendido la convierte en una herramienta fundamental para cualquier desarrollador web que quiera crear sitios web dinámicos e interactivos.
En este blog post, te guiaremos paso a paso en el proceso de instalación de la librería JQuery en tu sitio web. Aprenderás las dos formas principales de hacerlo: utilizando un CDN (Content Delivery Network) o descargando el código fuente. Además, te mostraremos un ejemplo básico de cómo utilizar JQuery para modificar el contenido de un elemento HTML al hacer clic sobre él.
En resumen, y como consejo habitual, usa navegadores modernos, y las últimas versiones del framework.
¿Necesitas ayuda GRATIS?
Si tienes un problema y deseas que te eche una mano, contáctame. Si puedo solucionarlo en menos de 1 hora, lo haré a cambio de una reseña. en mi perfil de Google My Business.
¿Quieres aprender JQUERY?
Si estás interesado en aprender JQUERY te recomiendo este libro. Debes tener conocimiento de HTML, CSS y Javascript. Es antiguo, pero en 2024 todavía me resulta útil.
Llamando a la librería e instalar JQUERY
Existen dos formas principales de «instalar» JQuery en tu sitio web:
1. Utilizando un CDN:
Un CDN es una red de servidores distribuidos que proporciona contenido web de manera rápida y eficiente. En el caso de JQuery, existen varios CDN que ofrecen la librería para que la puedas incluir en tu sitio web sin necesidad de descargarla. Uno de los más populares es el de Google:
https://developers.google.com/speed/libraries/#jquery2. Descargando o importar jquery:
Si lo prefieres, puedes descargar el código fuente de la librería JQuery desde su sitio web oficial: https://jquery.com/download/ y subirlo a un archivo dentro de tu proyecto. Luego, debes incluir el siguiente código en la cabecera de tu documento HTML:
<script src="direccion-mi-ordenador/jquery.js"></script>¿Qué es jquery.min.js?
- Una biblioteca de JavaScript simplificada: jquery.min.js es una versión minificada (Código fuente sin espacios ni saltos de línea) de la biblioteca jQuery, un recurso popular para simplificar la interacción con elementos HTML, la gestión de eventos, animaciones y solicitudes AJAX en páginas web.
- Ventajas jquery min js: jquery.min.js ofrece la ventaja de que el código fuente pesa menos y por tanto beneficia al rendimiento del sitio.
- Deventajas jquery min js: Con el código minificado es practicamente imporsible de trabajar. Por eso, normalmente se usa la verisón «normal» para trabajar (preProducción) y luego se minifica con herramientas como: https://www.toptal.com/developers/javascript-minifier
Primer ejemplo JQUERY
Una vez que hayas incluido JQuery en tu sitio web, ya puedes empezar a utilizarla para crear aplicaciones dinámicas. A continuación, te mostramos un ejemplo básico de cómo modificar el contenido de un elemento HTML al hacer clic sobre él:
<!DOCTYPE html>
<html>
<head>
<title>Mi primer JQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#saludo').click(function () {
$('#saludo').text("Hola mundo.");
});
});
</script>
<style>
* {
width: 100%;
margin: 0 auto;
}
#bloque {
width: 500px;
margin-top: 20px;
border: 1px solid black;
padding: 20px;
}
#saludo {
cursor: pointer;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="bloque">
Tienes ganas de que te salude...<div id="saludo">Pincha para que te salude.</div> pruebalo...
</div>
</body>
</html>En este ejemplo, tenemos un texto que si pinchamos en él se cambia por un saludo. Como puedes comprobar, solo afecta a ese bloque y no al resto, y no recarga la página. Este sencillo ejemplo te da una idea del gran potencial de JQuery para crear aplicaciones web más usables, más visuales y más potentes.
Conclusión
JQuery es una herramienta fundamental para cualquier desarrollador web que quiera crear sitios web dinámicos e interactivos. En este blog post, te hemos mostrado cómo instalarla en tu sitio web y te hemos dado un ejemplo básico de cómo utilizarla. Si quieres aprender más sobre JQuery, existen numerosos recursos disponibles en línea, como la documentación oficial: https://api.jquery.com/.
