Qué es jQuery
jQuery es una librería Javascript de código abierto que ayuda a desarrollar funcionalidades complejas tanto en Javascript como en Ajax (Asynchronous JavaScript + XML). Facilita la interacción de los diferentes códigos cliente y proporciona un desarrollo basado en objetos y modular para realizar aplicaciones más interactivas y con comportamientos más aparentes. Así que es una librería a utilizar tanto por aquellos que empiezan con javascript, ya que es más sencillo de utilizar para desarrollar Ajax, como por aquellos que tengan experiencia utilizando lenguajes de cliente, en este caso facilitará el desarrollo y acelerará los tiempos de implementación. A través de jQuery se puede acceder al código DOM (Document Object Model) de las páginas HTML o xHTML y manipular sus elementos, así como cambiar propiedades de las CSS, reaccionar ante eventos o facilitar el uso de efectos y transiciones, entre otras cosas. Además, es modular y se puede extender mediante la gran cantidad de plugins existentes que complementan y habilitan funcionalidades extra que van desde efectos drag and drop a multitud de presentaciones de datos en forma de carrusel, de acordeon, etc.
Conceptos básicos de jQuery
No es el objetivo de esta entrada ser una guía de jQuery, para esto hay recursos magníficos como la propia documentación de jQuery o visual jQuery que proporciona una visión gráfica e interactiva de todas las funciones y eventos que podemos utilizar, aún así creo que es bueno que hable de un par de conceptos básicos para que, si alguien que no ha visto el uso de jQuery lee este artículo, al menos pueda entender los ejemplos. La parte más básica de la librería es la "función" $, que representa el contexto de jQuery, por ejemplo, para añadir una propiedad css a un elemento de una página HTML, bastaría con esta sentencia:
$('p.clase_elemento').css('color', 'blue');Con este código, el elemento o elementos de tipo p (párrafo) que tengan la clase (clase_elemento) cambiarán su color de texto a azul. También es posible encadenar sentencias, por ejemplo para cambiar el texto de un título y además cambiar alguna propiedad de css:
$('div.contenido h2').html('texto cambiado).css('font-size', 20);Este código reemplazará el texto del elemento o elementos de tipo h2 que estén dentro de alguna capa (div) con clase 'contenido', el nuevo texto será 'texto cambiado' y además cambiará el tamaño del mismo a 20. Utilizando jQuery también podemos disparar acciones ante determinados eventos, por ejemplo, en el click a un link.
$('#ocultate a').click(function() { $(div.timido).hide(); });Con el código de aquí arriba, cuando pulsemos (evento click) en los enlaces (anchors) que estén contenidos dentro del elemento con el id 'ocultate', los divs con la clase 'timido' se ocultarán al haberles invocado la función hide(). Además de toda la nueva funcionalidad de jQuery, se puede utilizar el código javascript como en cualquier fichero normal de tipo .js. Podéis encontrar un listado de eventos, efectos, acciones y todo lo que se puede hacer con jQuery en la documentación que he mencionado más arriba.
Drupal 6 y jQuery
Desde la versión 5, allá por 2006, se ha incluido jQuery en el core de Drupal, convirtiéndose así en la librería "oficial" de desarrollo en javascript y Ajax para módulos y plugins en aplicaciones de Drupal. Antes de incluir jQuery, otras librerías como Dojo o Prototype fueron consideradas, pero jQuery fue elegido gracias a su estabilidad, a su tamaño ligero, y sobre todo a la colaboración de su creador, John Resig, facilitando que la licencia de la librería permitiese integrarla en Drupal. Más sobre la historia de jQuery y Drupal. La versión de jQuery agregada en el core de Drupal varía según si es Drupal 5, que incluye jQuery 1.0, 1.1 o 1.2 o Drupal 6, que incluye jQuery 1.2 o 1.3 en sus últimas subversiones. De todas formas, el módulo jquery update permite actualizar la versión de jQuery de las diferentes versiones de Drupal.
Añadiendo ficheros jQuery
La función central para añadir ficheros con código jQuery (.js) dentro de Drupal es drupal_add_js() (referencia). Con esta función podemos añadir ficheros para un módulo, un theme o incluso pasar variables desde el código PHP a jQuery. Por ejemplo, para añadir un fichero en un theme, podemos utlizar esta función dentro de la plantilla:
drupal_add_js('path/fichero.js', 'theme');También se puede añadir un fichero javascript a un módulo con una llamada parecida:
drupal_add_js('path/fichero.js', 'module');Una función muy útil para añadir ficheros javascript es drupal_get_path, que sirve para recuperar la ruta de un theme o de un módulo para poder añadir el fichero js.
