jQuery es hoy en día, una indispensable librería javascript que permite manejar el DOM y el Ajax de forma muy simple y directa. jQuery lo podemos encontrar integrados en muchos útiles recursos para el diseño y desarrollo web, por ejemplo esta presente en Twitter Bootstrap.
jQuery es una librería en Javacript de fuente abierta (open source), que simplifica mucho la creación de páginas web, sobre todo en interfaces web que se comportan de modo muy similar a las aplicaciones de escritorio.
Este artículo, será el inicio de una serie de artículos para aprender a utilizar jQuery de forma efectiva.
Algunas ventajas de jQuery
jQuery nos provee una forma simple y poderosa de trabajar en Javacript, jQuery nos propone una metodología de programación orientado a objetos en un flujo controlado por eventos, donde encontramos características tales como:
- Alta compatibilidad entre Navegadores: Usando jQuery podemos desarrollar un código que no tenga que pelearse con una implementación particular de un navegador, por ejemplo, en el trabajo con Ajax. Es decir, trabajando con jQuery tenemos una mayor compatibilidad entre navegadores.
- Iteración Implicita: Los selectores que usamos en jQuery para encontrar elementos en el DOM, posee iteración implicita, esto significa que nos evita tener que estar programando bluces de código para buscar todos elementos en el DOM que cumplen el criterio dado. Por ejemplo, seleccionar elementos DIV del HTML con una clase CSS de nombre PROMO se programa en una sola línea de código.
- Encadenamiento de Métodos: Permite en una sola linea de código hacer mucho más de lo que podríamos hacer usando solamente las caracteríticas propias del Javascript. Esto es muy útil cuando recorremos el DOM de un documento HTML, buscando un elemento determinado. Es decir, con jQuery hacemos más con menos líneas de código.
DOM: Cuando un navegador carga y despliega al usuario una página web cualquiera, lo que hace internamente es interpretar todo el HTML de la página web y traducir a una estructura de datos, donde el documento HTML queda representado en un estructura de tipo árbol, esto se denomina DOM (Document Object Model).
Obteniendo la librería jQuery
Para usar jQuery en el desarrollo de una página web, disponemos de dos (2) alternativas:
- Descargar la libreria y colocarla en nuestro sitio web.
- O víncularla a algún CDN, como el de Google o de la propia página de jQuery.
CDN: Significa Content Delivery Network.
Si elegimos descargar la librería jQuery, la podemos descargar desde:
En el momento de escribir este artículo, la página de jQuery señala que hay dos (2) tipos de versiones de la librería. Las versiones 1.x y las versiones 2.x, esta última dispone de la misma API de jQuery de versiones 1.x pero sin soporte para Internet Explorer 6, 7 y 8.
También es posible descargar jQuery, en forma mimificada (comprimida) o una versión no-mimificada (no-comprimida). En general se recomiendo en sitios wed en producción, descargar una copia de la librería en su forma comprimida para ahorrar ancho de banda y mejorar el rendimiento del navegador.
Si necesitamos compatibilidad con navegadores viejos descargamos la versión 1.11.1 comprimida de jQuery, que es la última versión disponible de jQuery al momento de escribir este artículo.
Hacer disponible jQuery a una página web
Si hemos optado por cargar la librería directamente a nuestro sitio web y no desde un CDN, entonces el código HTML5 de nuestra página podría tener uno de los siguientes aspectos.
Colocando el enlace a la librería jQuery en el HEAD del HTML:
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8” />
<title>Mi página web con jQuery</title>
…
<link rel=”stylesheet” href=”estilo.css” media=”screen” />
<script src=”jquery-1.11.1.min.js”></script>
</head>
<body>
…
…
</body>
</html>Colocando el enlace a la librería jQuery en la parte final del BODY del HTML:
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8” />
<title>Mi página web con jQuery</title>
…
<link rel=”stylesheet” href=”estilo.css” media=”screen” />
</head>
<body>
…
…
<script src=”jquery-1.11.1.min.js”></script>
…
</body>
</html>Si usamos un CDN, como el del sitio de jQuery, lo único que cambiaría en el código anterior es la forma de hacer la vinculación, en ese caso sería:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
Con lo anterior tenemos disponible jQuery, pero ahora necesitamos crear nuestro propio código Javascript que use jQuery… Esto lo veremos a continuación.
Usando jQuery
Para usar jQuery necesitamos escribir código Javascript. La forma tradicional y ordenada de hacer esta tarea, es crear un nuevo archivo Javascript, por ejemplo el archivo ‘mi_js.js’:
Entonces para usar jQuery, dentro del archivo ‘mi_js.js’, debieramos escribir algo así:
$(document).on(‘ready’, inicializar);
//
//luego el código de la funcion inicializar
function inicializar() {
//
alert(‘Hola Mundo… desde jQuery’)
//
}y luego debemos vincular este archivo ‘mi_js.js’ a nuestra página HTML, quedando el código así:
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8” />
<title>Mi página web con jQuery</title>
…
<link rel=”stylesheet” href=”css/estilo.css” media=”screen” />
</head>
<body>
…
…
<script src=”jquery-1.11.1.min.js”></script>
<script src=”mi_js.js”></script>
</body>
</html>Es muy importante colocar el enlace a nuestro archivo CSS en una línea anterior al enlace a jQuery. Esto es necesario, para tener acceso al código de la definición de los estilos CSS.
Es bastante simple la programación en Javascript, lo que si puede costar un poco de entener en un inicio, es cuando hacemos uso de su ejecución en forma asincrónica.
Entendiendo la programación con jQuery
Para entender jQuery, necesitamos conocer algunos rudimentos de Javascript. Para empezar, en Javascript encontramos tres (3) objetos nativos en el lenguaje:
- navigator: Es el objeto que representa al navegador, donde están los recursos del tipo: la Geolocalización, los acelerómetros y entre otros (ej. el User-agent).
- window: Es el objeto que representa el tab del navegador, donde están accesibles características del tipo: la resolución de la pantalla, la posición, etc.
- document: Este es el objeto que representa a la página HTML.
Entonces, si queremos crear un objeto jQuery que use, por ejemplo, el objeto document escribimos el siguiente código:
$(document);
Si queremos que el objeto anterior, ponga atención al evento de nombre ‘mi-evento’, y cuando ese evento suceda dispare una función determinada, por ejemplo la función de nombre ‘mi-funcion’. Entonces el código anterior lo debemos sustituir por:
$(document).on(‘mi-evento’, ‘mi-funcion’);
//
//Ahora definimos ‘mi-funcion’
function mi-funcion() {
//
alert(‘Mi primer programa usando jQuery’);
}El método ‘on’ que vemos en el código jQuery anterior, es un listener de eventos que es usado desde jQuery 1.8, antes se usaba ‘bind’.
Naturalmente, el nombre del evento ‘mi-evento’ no lo tenemos definido, pero podemos utilizar el evento que sucede cuando el navegador carga sólo el código HTML de la página. En este caso, el código será:
$(document).on(‘ready’, ‘mi-funcion’);
//
//Ahora definimos ‘mi-funcion’
function mi-funcion() {
alert(‘Se acaba de cargar el HTML’);
}Frecuentemente se hace mención a jQuery como el Framework jQuery, sin embargo en este artículo nos referimos a él como la librería jQuery.
Conclusión
Es muy simple, pero a la vez poderosa la programación haciendo uso de jQuery, simplemente vamos creados los objetos jQuery de algún objeto nativo de Javascript, o de algún elemento o grupos elementos del DOM de la página. Y enseguida tenemos disponible una batería de metodos para hacer nuestra labor, veamos algunos ejemplos prácticos.
Si queremos que, una vez cargada la página, si un usuario efectúe un click en cualquier párrafo (etiqueta <p>) de esta, aparezca un alerta mostrando un mensaje de texto. El código es tan simple como:
$(document).on(‘ready’, inicializar);
//
// ahora defino la función inicializar:
function inicializar() {
//
// escucho el evento click
// asociado al párrafo:
$(“p”).on(‘click’, mostrarMensaje);
}
//
// ahora defino la función mostrarMensaje:
function mostrarMensaje() {
alert(‘Has hecho un click prohibido’)
}Como se mencionó en el inicio de este artículo, jQuery tiene iteración implicita por lo tanto al escribir el código $("p") estamos seleccionando todos los párrafos de la página HTML y al escribir: $("p").on('click', mostrarMensaje) estamos diciendo que todos los párrafos de la página deben poner altención al evento 'click'.
En jQuery no tan sólo podemos escuchar eventos y disparar una función con un mensaje de alerta cuando el evento suceda, pues jQuery pone a nuestra disposición un extenso conjunto de métodos. Por ejemplo, podemos cambiar la presentación de los párrafos, mostrándolos de color roja y en mayúsculas frente al clic de un usuario:
$(document).on(‘ready’, inicializar);
//
function inicializar() {
//
$(“p”).on(‘click’, cambioDeAspecto);
}
//
function cambioDeAspecto() {
//
// defino un objeto javascript:
var miEstiloCSS = {color:”red”, text-transform:”uppercase”, margin:0};
$(“p”).css(miEstiloCSS);
}Incluso las funciones que definamos en el listener asignado por jQuery reciben parámetros que nos entregan mayores posibilidades en nuestra programación. Por ejemplo, podemos conocer cuales son esos parámetros que nos entrega jQuery al hacer click en un enlace dentro de la página HTML:
$(document).on(‘ready’, inicializar);
//
function inicializar() {
//
$(“a”).on(‘click’, mostrarParametros);
}
//
// ahora defino la función mostrarParametros
function mostrarParametros(params) {
//
// muestro en consola los parámetros:
console.log(params);
}Sólo hemos escarbado en la superficie de jQuery, jQuery es capaz de mucho más que iremos viendo en próximos artículos.
