Introducción a JQuery 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 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. 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: http:jquery.com/download/
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 nomimificada (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. 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.