JQuery es una biblioteca de JavaScript rápida, ligera y rica en funcionalidades que simplifica la manipulación de documentos HTML, la gestión de eventos, la creación de animaciones y las solicitudes AJAX. Fue creada para hacer que las tareas comunes de desarrollo web sean más accesibles y para manejar las inconsistencias entre navegadores.
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo Simple con jQuery</title>
<!-- Enlace al archivo CSS -->
<link rel="stylesheet" href="styles.css">
<!-- Integración de jQuery desde un CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Enlace al archivo JavaScript -->
<script src="script.js" defer></script>
</head>
<body>
<h1 id="titulo">¡Bienvenido a jQuery!</h1>
<button id="cambiarTexto">Cambiar Título</button>
</body>
</html>
script.js
// Asegúrate de que el DOM esté listo antes de ejecutar el código
$(document).ready(function() {
// Agrega un evento de clic al botón
$("#cambiarTexto").click(function() {
// Cambia el texto del encabezado
$("#titulo").text("¡Has cambiado el título con jQuery!");
});
});
styles.css
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
h1 {
color: #333;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
Para qué sirve jQuery ?
jQuery es útil para una amplia variedad de tareas en desarrollo web, incluyendo:
🔸Manipulación del DOM:
Modificar, eliminar o agregar elementos al Documento HTML (DOM) de manera sencilla.
🔸Gestión de eventos:
Facilita la captura y manejo de eventos del usuario, como clics, desplazamientos o pulsaciones de teclas.
🔸Animaciones:
Crear efectos visuales, como desvanecimientos, deslizamientos o transiciones.
🔸Interacciones AJAX:
Permite realizar solicitudes al servidor sin recargar la página, mejorando la experiencia del usuario.
🔸Compatibilidad entre navegadores:
Soluciona problemas de diferencias en la implementación de JavaScript en distintos navegadores.
🔸Plugins:
Hay una gran cantidad de complementos creados por la comunidad que extienden las funcionalidades de jQuery.
¿Cómo se instala jQuery?
Existen varias formas de integrar jQuery en un proyecto, o bien utilizando un CDN (Content Delivery Nerwork), que mediante una dirección url importamos jQuery o mediante la descarga y la instalación local. Hay que tener en cuenta que cada una tiene sus ventajas y sus desventajas, el CDN puede ser mucho más rápido de aplicar, ya que no requiere ninguna instalación, pero debemos de tener en cuenta que la página tendrá que realizar peticiones al servidor de jQuery constantemente, pudiendo influir en la velocidad de la página y si lo instalamos localmente, será un poco más laborioso de incorporar, pero nos aseguramos de que el código corra localmente sin necesidad de realizar peticiones externas.
Usando un CDN (Content Delivery Network):
Es la forma más sencilla y rápida. Incluye el siguiente código en el archivo HTML, dentro de la etiqueta <head> o justo antes de cerrar <body>:
<!-- jQuery desde el CDN de Google -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
O desde el CDN de jQuery:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
Descargar e incluir el archivo localmente:
Descarga la última versión de jQuery desde jquery.com.
📚 https://jquery.com/download/
Guárdalo en el directorio de tu proyecto (por ejemplo, en una carpeta llamada js).
Incluye el archivo en tu HTML:
<script src="js/jquery-3.6.0.min.js"></script>
Usando un gestor de paquetes como npm:
Si usas un entorno basado en Node.js, puedes instalar jQuery con npm:
npm install jquery
Luego, importarlo en tu archivo JavaScript:
const $ = require('jquery');
Escribir código jQuery
Coloca tu código en un archivo JavaScript o entre etiquetas <script>. Usa $(document).ready() para asegurarte de que el DOM esté completamente cargado antes de ejecutar el código.
$(document).ready(function() {
// Aquí va tu código jQuery
});
Seleccionar elementos
Usa el símbolo $ para seleccionar elementos del DOM, similar a cómo se hace con querySelector en JavaScript:
$("h1") // Selecciona todos los <h1>
$("#id") // Selecciona el elemento con ID específico
$(".clase") // Selecciona todos los elementos con una clase específica
Aplicar acciones o manipulaciones
Una vez seleccionados los elementos, puedes modificar su contenido, estilos, o agregar eventos.
$("#miElemento").text("Nuevo texto"); // Cambia el texto de un elemento
$(".boton").css("color", "red"); // Cambia el color del texto de los botones
Ejemplos Prácticos
Cambiar texto y estilos
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// Cambiar el texto de un encabezado
$("#cambiarTexto").click(function() {
$("#miTitulo").text("¡Texto cambiado con jQuery!");
});
// Cambiar el color del texto
$("#cambiarColor").click(function() {
$("#miTitulo").css("color", "blue");
});
});
</script>
</head>
<body>
<h1 id="miTitulo">¡Hola Mundo!</h1>
<button id="cambiarTexto">Cambiar Texto</button>
<button id="cambiarColor">Cambiar Color</button>
</body>
</html>
¡Hola Mundo!
Mostrar / Ocultar elementos
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mostrar/Ocultar</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// Ocultar el párrafo
$("#ocultar").click(function() {
$("#miParrafo").hide();
});
// Mostrar el párrafo
$("#mostrar").click(function() {
$("#miParrafo").show();
});
});
</script>
</head>
<body>
<p id="miParrafo">Este es un párrafo que puedes ocultar o mostrar.</p>
<button id="ocultar">Ocultar</button>
<button id="mostrar">Mostrar</button>
</body>
</html>
Este es un párrafo que puedes ocultar o mostrar.
Crear una animación
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Animaciones con jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#animar").click(function() {
$("#cuadro").animate({
left: '250px',
height: '150px',
width: '150px',
}, 1000); // La animación tarda 1 segundo
});
});
</script>
<style>
#cuadro {
position: relative;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="cuadro"></div>
<button id="animar">Animar</button>
</body>
</html>