Dentro de la serie de herramientas de programación web hoy le toca el turno a jQuery, que es una librería de JavaScript, que facilita el manejo de los objetos una página web (enlaces, capas, títulos, párrafos, etc), de forma que permite establecer ciertas acciones sobre ellos (movimiento, ocultación, efectos, etc). jQuery se distribuye con una licencia de software libre y código abierto, permitiendo su uso tanto en proyectos libres como privativos. jQuery ofrece una serie de funcionalidades que escritas en JavaScript requerirían de muchísimo más código. La filosofía de jQuery es que pequeñas funciones logran grandes resultados, reduciendo el tiempo de desarrollo y el tamaño del código. El autor de esta librería es John Resig que además trabaja para Mozilla Corporation.
Instalación:
Instalar jQuery es de lo más sencillo: basta con bajarse la librería del sitio web oficial y copiarla en una carpeta de nuestro proyecto. Luego hay que incluirla como una librería más de nuestro proyecto:
<script type="text/javascript" src="js/jquery.min.js"></script>
La función $:
El concepto básico de jQuery consiste en dos apartados: el primero es la captura o selección de elementos del documento HTML y el segundo en aplicar acciones o programar eventos sobre esos elementos. La función $ (dolar) es la encargada de seleccionar partes del documento HTML: etiquetas, clases, divisores, elementos, etc. Luego con esas partes capturadas haremos cosas como mostrarlas, ocultarlas, aplicarles efectos, etc. Veamos unos ejemplos:
- $(document): Captura todo el documento HTML.
- $("body"): Captura el cuerpo del documento HTML.
- $("a"): Captura todos los enlaces del documento HTML.
- $("#etiqueta"): Captura el elemento HTML con id="etiqueta".
- $(".clase"): Captura todos los elementos HTML con class="clase".
- $("div.clase"): Captura todos los divisores con class="clase".
- $("#etiqueta a"): Captura todos los enlaces dentro del elemento con id="etiqueta".
- $("div[name='nombre']"): Captura todos los divisores cuyo atributo name='nombre'.
- $("[name!='nombre'][type='button']"): Captura todos los elementos cuyo atributo name sea distinto de "nombre" y cuyo atributo type valga "button".
- $("input:button"): Captura todos los botones (<input type="button">).
- $("div:hidden"): Captura todos los divisores ocultos.
Aquí podéis encontrar una referencia completa de todos los selectores jQuery. La función $ devuelve un objeto jQuery. Sobre ese objeto aplicaremos eventos, efectos y acciones.
Eventos en jQuery:
El primer evento que hay que conocer en jQuery es el evento ready() que se ejecutará cuando la selección haya acabado de cargarse. Suele usarse por ejemplo para evitar que se ejecute cualquier otra función jQuery antes de que se termine de cargar el documento HTML.
$(document).ready(function() {
// Resto de funciones jQuery...
});
Otro evento importante es el evento click() que se ejecuta cuando el usuario pulsa sobre algún elemento de la selección. No es necesario que la selección sea un enlace o un botón; puede ser cualquier elemento HTML.
$(document).ready(function() {
$("a").click(function() {
alert("Se ha pulsado un enlace");
});
$("input:button").click(function() {
alert("Se ha pulsado un botón");
});
});
En este código hemos programado dos eventos dentro del evento ready(), por lo tanto no estarán disponibles hasta que no se cargue todo el documento HTML. El primer evento mostrará un mensaje cuando se pulse en cualquier enlace (<a href="...">) y el segundo hará lo propio cuando se pulse cualquier botón (<input type="button"...>). Como vemos la sintaxis de jQuery es muy sencilla aunque es relativamente fácil liarse con los paréntesis y las llaves. Pero no deja de ser código JavaScript, por lo que podemos escribirlo de forma más clara:
var d = $(document);
d.ready(onReadyDocument);
function onReadyDocument() {
var anchors = $("a");
var buttons = $("input:button");
anchors.click(onClickAnchors);
buttons.click(onClickButtons);
}
function onClickAnchors() {
alert("Se ha pulsado un enlace");
}
function onClickButtons() {
alert("Se ha pulsado un botón");
}
Otros eventos comunes en jQuery son los siguientes. Aquí podéis encontrar una referencia completa de todos los eventos jQuery.
- click() Se ejecuta al hacer clic sobre un elemento de la selección.
- dbclick() Se ejecuta al hacer doble clic sobre un elemento de la selección.
- hover() Se ejecuta cuando el ratón está encima de un elemento de la selección.
- mousemove() Se ejecuta cuando el ratón se mueve estando encima de un elemento de la selección.
- mouseleave() Se ejecuta cuando el ratón sale de un elemento de la selección.
- keydown() Se ejecuta cuando el usuario pulsa una tecla si el foco lo tiene un elemento de la selección.
- keyup() Se ejecuta cuando el usuario suelta una tecla si el foco lo tiene un elemento de la selección.
- keypress() Igual que keydown() pero se va repitiendo periódicamente hasta que el usuario suelte la tecla.
- focus() Se ejecuta cuando un elemento de la selección recibe el foco. Generalmente se usa en formularios.
- blur() Se ejecuta cuando un elemento de la selección pierde el foco. Generalmente se usa en formularios.
- select() Se ejecuta cuando el usuario selecciona un texto. Generalmente se usa en formularios.
- change() Se ejecuta cuando el contenido cambia. Generalmente se usa en formularios. Por ejemplo en un control <input> o <select>.
- submit() Se ejecuta cuando cuando el usuario envía un formulario. Se usa para validar el contenido del formulario antes de enviarlo.
Acciones jQuery:
Existen multitud de acciones en jQuery. Unas permiten cambiar el aspecto de algún elemento HTML, otras sirven para aplicar efectos o animaciones y hay otras aun más complejas. Una de las primeras que se aprenden es la función css() que permite cambiar cualquier propiedad CSS de los elementos de la selección. Vamos a verlo con un ejemplo:
$(document).ready(function() {
var theBody = $("body");
var anchors = $("a");
theBody.css("background-color": "white");
anchors.mouseenter(function() {
theBody.css("background-color", "red");
});
anchors.mouseleave(function() {
theBody.css("background-color", "white");
});
});
Lo que hace este código jQuery es poner el color de fondo de la página en blanco y luego programar dos eventos: El primero pondrá en rojo el color de fondo cuando el ratón esté sobre cualquier enlace. El segundo evento restaura el color de fondo blanco cuando el ratón sale de un enlace. No es que sea un código muy útil, pero nos sirve de ejemplo.
Otras acciones comunes en jQuery son los siguientes. Para una referencia completa de acciones podéis visitar referencia efectos jQuery y referencia métodos jQuery.
- css() Modifica una propiedad CSS de todos los elementos de la selección.
- addClass() Añade una clase CSS a todos los elementos de la selección.
- removeClass() Elimina una clase CSS de todos los elementos de la selección.
- height(), innerHeight(), outerHeight() Devuelven la altura actual del primer elemento de la selección.
- width(), innerWidth(), outerWidth() Devuelven la anchura actual del primer elemento de la selección.
- hide() Oculta todos los elementos de la selección.
- show() Muestra todos los elementos de la selección.
- fadeOff() Modifica la opacidad de los elementos de la selección haciendo que desaparezcan progresivamente.
- fadeIn() Modifica la opacidad de los elementos de la selección haciendo que aparezcan progresivamente.
- slideDown() Muestra los elementos de la selección de forma progresiva deslizando hacia abajo.
- slideUp() Oculta los elementos de la selección de forma progresiva deslizando hacia arriba.
- animate() Permite crear efectos más complejos aplicables sobre las propiedades numéricas de todos los elementos de la selección.
- text() Sirve tanto para obtener como para establecer el texto de los elementos de la selección.
- attr() Sirve tanto para obtener el valor de una propiedad del primer elemento de la selección como para establecer el valor de una propiedad de todos los elementos de la selección. Por ejemplo la propiedad "alt" de un elemento <img>.
- removeAttr() Elimina una propiedad de los elementos de la selección. Por ejemplo la propiedad "alt" de un elemento <img>.
- val() Sirve tanto para obtener como para establecer el valor de los elementos de la selección.
- html() Sirve tanto para obtener como para establecer el contenido HTML de los elementos de la selección. Equivale a la propiedad innerHTML del DOM.
Hasta aquí este minitutorial de jQuery. En un artículo posterior hablaré de jQuery avanzado, ajax en jQuery, etc.
Enlaces:
- jQuery JavaScript Library. Sitio web oficial [EN]
- Curso de introducción a jQuery en Como Crear Tu Web [ES]
- Tutorial de jQuery en JavaScript Ya [ES]
- jQuery en la Wikipedia [ES]
- Referencia de selectores jQuery [ES]
- Referencia de eventos jQuery [ES]
- Referencia de efectos jQuery [ES]
- Referencia de métodos jQuery [ES]
- jQuery Quick API Reference [EN]
Hace tiempo necesitamos una 
