Alphasite

The programmers site

Estadísticas web

Estadisticas web

Publicidad

Languages

Google AdSense

Poll

Who's online

There are currently 0 users and 6 guests online.

Descubriendo JQuery


JQuery es una librería de javascript (actualmente en su versión 1.2.3) que una gran cantidad de funciones y utilidades habituales en el mundo de la programación web con Javascript.

Dentro de la librería podemos encontrar wrappers de Ajax, efectos gráficos así como manejadores para facilitarnos la localización y uso de clases.

Dentro de las aplicaciones web que hacen uso de JQuery tengo que resaltar, obviamente, Drupal, el sistema de contenido web en el que se apoya está página aunque no es, ni de lejos el único.

De JQuery me gusta especialmente su sintaxis así como la cantidad de plugins que existen para él que amplían muchisimo la funcionalidad. Prácticamente para cualquier cosa que deseamos hacer o bien la encontramos en el propio jQuery o bien encontramos un plugin para ello (y si acaso no lo encontrasemos, puesto que jQuery es codigo abierto, podremos crearlo nosotros).

Os voy a poner un par de ejemplos para que veáis hasta que punto JQuery nos facilita la vida:

Carga de un elemento "div" cuyo id es "content" mediante ajax con el contenido de otra página:

   $("#content").load("mipagina.php");
   // Veamos que pasa si queremos pasar algún dato, como por ejemplo el id del nodo
   $("#content").load("node.php", {nodeId: 23});
   // Ahora supongamos que queremos hacer algo cuando la función acabe
   $("#content").load("node.php", {nodeId: 23}, {function() { alert('Carga completada') }

Esto es solo una posibilidad de Ajax con jQuery pero tiene bastantes más llamadas para declarar eventos de respuesta, para realizar un GET, para especificar con más detalle que queremos hacer si la llamada tiene exito y que si falla, qué hacer mientras está en proceso, etc.

Otra de las posibilidades que nos ofrece jQuery es la de realizar selecciones de forma muy sencilla utilizando la sintáxis de Css. Ya hemos visto que para acceder a un elemento de nuestra página dado su id bastará con declarar el simbolo "$" (que es el alias del objeto jQuery) y entre parentesis el identificador precedido por un "#". Lo mismo podemos utilizar para seleccionar clases, por ejemplo, vamos a ver una combinación muy poderosa, el uso de los selectores de clase junto con la función each que nos permite recorrer el conjunto y la función css que nos permite cambiar sus propiedades

  /* Seleccionamos todos los elementos de la clase "miClase",
     para cada uno de ellos aplicamos una función que cambia su color
     de fondo a blanco */

  $(".miClase").each(function(i) { $(this).css({background-color: "white"}) });

Nada más fácil, vamos a ver otro ejemplo, esta vez, utilizando de nuevo jQuery, vamos a ocultar todos los divs mediante un bonito efecto de degradado hasta desaparecer:

  // Ocultar todos los divs
  $("div").hide();

En conclusión, un framework excelente, con una enorme cantidad de funcionalidades que ponen al alcance de cualquier desarrollador, prácticamente sin esfuerzo, todo un universo de posibilidades para realizar lo que se ha dado en llamar la Web 2.0