• 24/11/2014
  • admin
  • 0

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 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.

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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies