Es conveniente utilizar desde ya este nuevo par de métodos; no solo porque simplifican la API, sino porque es probable que en próximas versiones el resto de funciones termine por desaparecer. Tanto es así, que si echamos un vistazo al código de la nueva versión, veremos que la implementación de los antiguos métodos se ha sustituido ya por simples llamadas a .on() y .off().

Los nuevos métodos tienen la siguiente sintaxis:

$(elementos).on(eventos [,selector] [,datos], manejador);
$(elementos).off([eventos] [,selector] [,manejador]);

Si no pasamos ningún selector como parámetro, .on() es similar a .bind(), donde simplemente asociamos el manejador a elementos. Esto es también lo que hacen .click(), .hover(), .change(), .submit() y el resto de abreviaturas.

$('tr').on('click', resaltar);
$('tr').bind('click', resaltar);

Cuando se pasa un selector como parámetro, es similar a .delegate(), donde el manejador se añade a elementos, pero lo que comprobamos es si se produce el evento en los descendientes filtrados con selector. Cuando se produce el evento, se comprueba cada uno de los ancestros en el DOM hasta encontrar el que tiene el manejador adecuado. El tratamiento del evento se delega entonces al ancestro; de ahí su nombre. Esto puede ser útil, por ejemplo, si tenemos miles de filas: podemos asociar el manejador a la tabla, en lugar de tener que hacerlo sobre todas y cada una de las filas, lo cuál puede ser tremendamente lento.

$('table').on('click', 'tr', resaltar);
$('table').delegate('click', 'tr', resaltar);

El uso de .live(), que es parecido a .delegate(), aunque usando document como raíz, no está recomendado, porque el evento tendría que recorrer todos los ancestros hasta document en busca del manejador adecuado, haciéndolo muy lento cuando nuestra jerarquía es muy profunda. Aun así, si queremos, también podemos imitarlo:

$(document).on('click', 'tr', resaltar);
$('tr').live('click', resaltar);

jQuery in Action cuenta con 475 páginas organizadas en 2 partes, una primera sobre jQuery en sí, y una segunda sobre la biblioteca de componentes jQuery UI. También cuenta con un apéndice que trata conceptos avanzados de JavaScript, necesarios para utilizar jQuery de manera efectiva, como objetos, funciones de orden superior, closures o cierres, y el concepto de que las variables y funciones de ámbito global son en realidad propiedades del objeto window. Como véis, temas de conversación apasionantes para determinado tipo de reunión social.

El libro trata las versiones 1.4 de jQuery y 1.8 de jQuery UI, por lo que es bastante actual, comparado con el resto de libros del mercado. Entre las editoriales grandes, sólo conozco un libro aún más moderno, el Head First jQuery de O’Reilly, de septiembre de este año, que todavía no he tenido ocasión de leer.

jQuery in Action está escrito de forma clara y concisa, con algún toque de humor, ejercicios, y ejemplos prácticos. Creo que es una buena lectura para iniciarse en la librería y para afianzar conceptos.

No abuses de $(document).ready

Una de las primeras cosas que aprendemos en cualquier tutorial de jQuery es cómo y por qué utilizar $(document).ready y $() para inicializar nuestro código, en lugar del tradicional window.onload y su contrapartida en jQuery, $(window).load.

$(document).ready(function() {
  // La magia ocurre aquí
});

$(function() {
  // La magia ocurre aquí
});

window.onload = function() {
  // La magia ocurre aquí
} 

$(window).load(function(){
   // La magia ocurre aquí
});

La principal diferencia entre ambos métodos es que el evento ready se lanza cuando el navegador termina de cargar el árbol del documento (evento DOMContentLoaded en los navegadores más modernos), mientras que el manejador de onload se ejecuta cuando se termina de cargar todo el documento, incluidas las imágenes y los iframes.

Consecuentemente, habitualmente nos interesará colocar el código de inicialización en el manejador del evento ready, de forma que nuestra página parezca más rápida, al no tener que esperar el usuario a que cargue toda la página para poder usar la funcionalidad.

Sin embargo, hay ocasiones en las que el uso de $(document).ready puede ser contraproducente. Es el caso de funcionalidades que no son prioritarias, que pueden estar retrasando la carga de otras características más importantes, y que podemos postergar hasta después del evento onload.

Otro caso es el binding de eventos con live y delegate, funciones introducidas en las versiones 1.3 y 1.4.2 y que permiten agregar manejadores de eventos a elementos que aún no existen en el DOM. Si agregamos un manejador para aumentar el tamaño de la fuente de un párrafo al hacer clic sobre él y lo colocamos en el manejador de $(document).ready, tendremos que esperar a que cargue todo el DOM, mientras que si lo sacamos del manejador del evento ready, la funcionalidad estará activa en cuanto se cargue el elemento.

<html>
  <head>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
    <script type="text/javascript">
      $('#mensaje').live('click', aumentarTamanyo);

      function aumentarTamanyo() {
        $(this).css('font-size', '200%');
      }
    </script>
  </head>

  <body>
    <p id="mensaje">jQuery: The Write Less, Do More, JavaScript Library</p>
  </body>
</html>

preventDefault, stopPropagation y return false

Otra de las cosas que se aprenden en los tutoriales de jQuery y que tampoco solemos cuestionar es el devolver false en un manejador para evitar que el navegador ejecute el comportamiento por defecto para el evento generado por el usuario. Podemos devolver false en el manejador del evento click de un enlace para evitar que se cargue la página enlazada, por ejemplo, o en el manejador de submit de un formulario para evitar que se envíe.

Esto último es muy común en funciones de validación de formularios:

<html>
  <head>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
    <script type="text/javascript">
      $(function() {
        $('#frmLogin').submit(comprobarCampos);
      });

      function comprobarCampos() {
        if(!$('#usuario').val() || !$('#password').val()) {
          alert('Por favor, introduzca su nombre de usuario y contraseña');
          return false;
        }
      }
    </script>
  </head>

  <body>
    <form id="frmLogin" action="login" method="post">
      <label for="usuario">Usuario</label>: <input type="text" name="usuario" id="usuario"/>
      <label for="password">Contraseña</label>: <input type="password" name="password" id="password"/>
      <input type="submit" value="Entrar"/>
    </form>
  </body>
</html>

El ejemplo funciona perfectamente, y return false parece estar haciendo lo que queríamos. Sin embargo, en realidad, al devolver un valor false en el manejador, lo que estamos haciendo, además de prevenir la ejecución del comportamiento por defecto del navegador, es evitar que el evento se propague y que, por lo tanto, se ejecute el código de los manejadores de los padres para este evento.

Si sólo queremos evitar el comportamiento por defecto lo correcto es llamar a la función preventDefault() del objeto event. De igual manera, si sólo queremos evitar que se propague a los padres, llamaremos a la función stopPropagation() del objeto event.

<html>
  <head>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
    <script type="text/javascript">
      $(function() {
        $('#frmLogin').submit(comprobarCampos);
      });

      function comprobarCampos(event) {
        if(!$('#usuario').val() || !$('#password').val()) {
          alert('Por favor, introduzca su nombre de usuario y contraseña');
          event.preventDefault();
        }
      }
    </script>
  </head>

  <body>
    <form id="frmLogin" action="login" method="post">
      <label for="usuario">Usuario</label>: <input type="text" name="usuario" id="usuario"/>
      <label for="password">Contraseña</label>: <input type="password" name="password" id="password"/>
      <input type="submit" value="Entrar"/>
    </form>
  </body>
</html>

each y map para sustituir bucles

Aunque un bucle nativo siempre será más rápido, los tiempos por los que tenemos que preocuparnos en primer lugar son los de desarrollo y mantenimiento. Por este motivo, en ocasiones, es posible que prefieras utilizar las funciones $.each, $.fn.each, $.map y $.fn.map en lugar de usar bucles.

Aunque el siguiente ejemplo no es lo bastante complejo como para obtener ningún tipo de beneficio al utilizar estas funciones, os servirá para ver el aspecto de cada una de las alternativas

// Bucle for
var numeros = [1, 2, 3];
var numItems = numeros.length;
for(var i = 0; i < numItems; i++) {
  numeros[i] = numeros[i] * numeros[i];
}

// Bucle for in
var numeros = [1, 2, 3];
for(var i in numeros) {
  numeros[i] = numeros[i] * numeros[i];
}

// Bucle for in con la lógica en una función
var numeros = [1, 2, 3];
for(var i in numeros) {
  numeros[i] = cuadrar(numeros[i]);
}

function cuadrar(num) {
    return num * num;
}

// $.each
var numeros = [1, 2, 3];
$.each(numeros, function(i, val) {
    numeros[i] = val * val;
});

// $.map
var numeros = [1, 2, 3];
numeros = $.map(numeros, function(val) {
    return val * val;
});

// $.map con la lógica en una función
var numeros = [1, 2, 3];
numeros = $.map(numeros, cuadrar);

function cuadrar(num) {
    return num * num;
}

Los bucles y los each no siempre son necesarios

jQuery intenta facilitarnos trabajar con las colecciones de elementos. No es necesario que hagas algo así para ocultar todos los enlaces:

// Con $.fn.each
$('a').each(function () {
    $(this).hide();
});

// Con for in
var enlaces = $('a');
for(var i in enlaces) {
  $(enlaces[i]).hide();
};

basta, simplemente, con que hagas esto:

$('a').hide();

HTML elegante

Aunque un script no es lugar adecuado para tener nuestro código HTML, en ocasiones queremos crear nuevos elementos que añadir al DOM y no queremos o no podemos utilizar plantillas. La manera más cándida de hacer esto sería algo como:

$('<img src="http://www.jquery.com/logo.png" alt="Logo de jQuery" id="logo" onclick="alert(\'Este es el logo de jQuery\')"/>')

O una forma más “a lo jQuery”

$('<img/>').attr('src', 'http://www.jquery.com/logo.png').
  attr('alt', 'Logo de jQuery').
  attr('id', 'logo').
  click(function() {
    alert('Este es el logo de jQuery')
  });

Pero desde jQuery 1.4 tenemos una forma aún mejor de hacer esto, pasando como segundo argumento un objeto cuyas propiedades son los nombres de los atributos, y al que podemos pasar también funciones de jQuery:

$("<img/>", {
  src: 'http://www.jquery.com/logo.png',
  id: 'logo',
  click: function() {
    alert('Este es el logo de jQuery')
  }
});

Encadenado y caché de selecciones

Cada vez que utilizamos un selector en nuestro código, el engine de jQuery tiene que realizar operaciones más o menos costosas dependiendo del soporte nativo del navegador. Un selector por identificador, por ejemplo, es bastante rápido, dado que utiliza document.getElementById por debajo; selectores más complejos, como las pseudoclases, requieren de un mayor tiempo y mayores recursos para su procesado.

Lo ideal es no abusar demasiado de las búsquedas en el DOM y guardar el resultado en un variable, o bien aprovechar que las funciones suelen devolver la propia colección y utilizar cadenas de funciones.

// Mala idea, desde el punto de vista del rendimiento
$('a:not([href*=mundogeek.net])').attr('target', '_blank');
$('a:not([href*=mundogeek.net])').css('background-image', 'url("/img/externo.gif")');

// Cacheando en una variable
var enlacesExternos = $('a:not([href*=mundogeek.net])');
enlacesExternos.attr('target', '_blank');
enlacesExternos.css('background-image', 'url("/img/externo.gif")');

// Usando cadenas de funciones
$('a:not([href*=mundogeek.net])')
  .attr('target', '_blank')
  .css('background-image', 'url("/img/externo.gif")')

data en lugar de rel

En ocasiones, y aunque no es recomendable abusar de ello, es posible que nos interese almacenar cierta información en el propio DOM. Esto se venía haciendo hasta ahora utilizando hacks como el uso dudoso del atributo rel, las clases, o los atributos con nombres inventados, que generaban HTML no válido.

Esto cambiará en HTML 5, con la introducción de los nuevos atributos data, pero jQuery viene ofreciendo desde su versión 1.2.3 un sistema aún mejor, que evita tener que interactuar con el DOM, pero que también soporta la lectura de estos nuevos atributos de HTML 5. Este fantástico método se llama, como era de esperar, data y su uso es de lo más sencillo:

$('table#tabla').data({
  campoOrden: 'id',
  orden: 'asc'
});

$('table#tabla').data('campoOrden');

Agrupa las operaciones

¿Necesitas aplicar un mismo método a varios elementos? No es necesario que los selecciones uno por uno. Si los agrupas utilizando un único selector, irás más rápido y el código será más corto.

// Tedioso
$('#formularioCrear').show();
$('#tablaItems').show();
$('#mensajeAlerta').show();

// Mucho mejor
$('#formularioCrear, #tablaItems, #mensajeAlerta').show();

Evita conflictos en tus plugins

Crear plugins para jQuery es tan sencillo que muchos desarrolladores se encuentran escribiendo sus propios plugins a los pocos días de empezar a utilizar la librería. Si quieres distribuir tus extensiones, es una buena idea utilizar una sintaxis como la siguiente, para evitar conflictos con otras librerías que puedan utilizar $ para otros fines:

(function($) {
  $.alertar = function(mensaje) {
    alert(mensaje);
  }
})(jQuery);

Aunque el código puede parecer un poco confuso a simple vista, si lo analizamos detenidamente, veremos que no tiene mayor misterio. No hacemos más que crear una función anónima a la que pasamos como parámetro el objeto jQuery, dando a este parámetro el nombre $, para poder utilizar este símbolo indistintamente dentro de la función.

Lo demostró Google el año pasado con su implementación de Quake II usando WebGL, por ejemplo, y lo vuelve a hacer hoy Mozilla compilando el código original de Doom a JavaScript para que podamos jugar en nuestro navegador.

Merece la pena echar una partida y rememorar viejos tiempos mientras sopesamos qué sorpresas nos deparará el futuro de la web.

Y tú, ¿qué plugins para jQuery recomendarías?

Galleria: Como es de esperar por su nombre, se trata de un plugin para la creación de una galería de imágenes.

jGrowl: Para crear notificaciones al estilo de Growl de Mac OS X.

Lazy loader: Retrasa la carga de las imágenes hasta que el usuario haga scroll y vaya a necesitarlas, o hasta que se haya terminado de cargar toda la página.

DataTables: Añade distintas funcionalidades interesantes a las tablas HTML, como paginación, ordenación por columnas o filtrado.

qTip: Un completo plugin para la creación de tooltips.

jqTransform: Transforma el aspecto de tus widgets en alternativas, en teoría, mucho más elegantes y vistosas.

Quicksand: Filtra y reordena distintos elementos utilizando una animación de lo más vistosa, a lo Mac OS.

ColorBox: Ventanas modales superpuestas, al estilo lightbox, con distintos efectos de transición.

jParallax: Permite implementar al técnica de animación 2D “parallax scrolling” (desplazamiento con paralaje), que permite dar sensación de profundidad moviendo distintas capas distinta distancia en función de la supuesta lejanía al observador.

Masonry: Encaja los elementos flotantes de forma que no quede espacio en blanco entre ellos.

Con algo más de 4 años de vida, jQuery se ha convertido en la librería JavaScript más utilizada actualmente, y es que, además, es gratuita, de código abierto (bajo licencia MIT y GPL v2) e increíblemente ligera. Entre sus usuarios podemos encontrar a Google, Microsoft, IBM, Amazon, Twitter, WordPress, Mozilla o Drupal.

Para poder utilizar esta librería lo primero que tendremos que hacer será incluir su código en nuestro proyecto. Podemos descargar el script desde su página web, subirlo a nuestro servidor, y ejecutarlo con la etiqueta script:

<script type="text/javascript" src="jquery.js"></script>

También podemos cargarla directamente desde el CDN que mantiene Google:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

el de Microsoft:

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>

o el del propio jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

Independientemente de la opción elegida, ya estaremos listos para comenzar a trabajar con la librería. Sin embargo, y aunque no es estrictamente necesario, os aconsejaría tener unos conocimientos básicos de JavaScript primero, conocimientos que podéis obtener con nuestro tutorial de JavaScript. Y ahora, manos a la obra.

El corazón de jQuery es la función sobrecargada del mismo nombre, jQuery, que ofrece distinta funcionalidad dependiendo de los parámetros utilizados. Además, como JavaScript también toma conceptos del paradigma funcional, y las funciones no son más que otro tipo de objeto, la función jQuery cuenta a su vez con distintas propiedades y métodos. La intención de esta decisión de diseño es la de evitar llenar el espacio de nombres global con montones de nombres inútiles esperando a colisionar.

Si queremos escribir menos y que nuestros archivos sean más pequeños, y si no utilizamos ninguna otra librería que pueda causar algún conflicto con este símbolo, también podemos utilizar el alias $ en sustitución de jQuery.

Selectores jQuery

El primer paso a la hora de trabajar con jQuery es seleccionar los elementos del árbol de documento sobre los que queremos trabajar. Para ello se utiliza la función jQuery, pasando como argumento a la función una cadena con un selector, la mayoría de los cuales utilizan una sintaxis similar a la de CSS 3 (ver Tutorial rápido de CSS). El engine que utiliza jQuery para seleccionar elementos se llama Sizzle, y puede descargarse y utilizarse de forma aislada.

Los distintos selectores que podemos utilizar son los siguientes:

Selectores básicos

Selector universal: selecciona todos los elementos de la página (CSS 2)

jquery("*")

Selector de tipo o etiqueta: selecciona todos los elementos con el tipo de etiqueta indicado (CSS 1)

jQuery("div")

Selector de clase: selecciona todos los elementos con la clase indicada (atributo class) (CSS 1)

jQuery("div.entrada")

Selector de identificador: selecciona el elemento con el identificador (atributo id) indicado (CSS 1)

jQuery("div#cabecera")

Grupos de selectores: se puede combinar el resultado de varios selectores distintos separándolos con comas (CSS 1)

jquery("p,div,a")

Selectores de atributos

Selector de atributo: selecciona elementos que tengan un cierto atributo (CSS 2)

jquery("a[rel]")

También se puede seleccionar aquellos que tengan un cierto valor para un atributo (CSS 2)

jquery("a[rel='nofollow']")

O que tengan un valor distinto del indicado (jQuery)

jQuery("a[rel!='nofollow']")

Aquellos cuyo valor empieza por una cierta cadena (CSS 3)

jquery("a[href^='http://mundogeek.net/']")

Los que terminan con una cierta cadena (CSS 3)

jquery("a[href$='.com']")

Y los que contienen una cierta cadena (CSS 3)

jquery("a[href*='geek']")

Por último, podemos hacer combinaciones de todo lo anterior (CSS 2)

jquery("a[rel='nofollow'][href]")

Selectores de widgets

Pseudo clase botón: selecciona todos los botones (jQuery)

jquery(":button")

Pseudo clase checkbox: selecciona todos los checkboxes (jQuery)

jquery(":checkbox")

Pseudo clase archivo: selecciona todos los widgets de tipo archivo (jQuery)

jquery(":file")

Pseudo clase cabeceras: selecciona todas las cabeceras (jQuery)

jquery(":header")

Pseudo clase imagen: selecciona todas las imágenes (jQuery)

jquery(":image")

Pseudo clase input: selecciona todos los widgets de tipo input (jQuery)

jquery(":input")

Pseudo clase contraseña: selecciona todos los elementos password (jQuery)

jquery(":password")

Pseudo clase radiobutton: selecciona todos los elementos radiobutton (jQuery)

jquery(":radio")

Pseudo clase reset: selecciona todos los elementos reset (jQuery)

jquery(":reset")

Pseudo clase seleccionado: selecciona las opciones seleccionadas en un select (jQuery)

jquery(":select")

Pseudo clase submit: selecciona todos los elementos submit (jQuery)

jquery(":submit")

Pseudo clase texto: selecciona todos las cajas de texto (jQuery)

jquery(":text")

Pseudo clase marcado: selecciona todos los radiobuttons y checkboxes marcados (CSS 3)

jquery(":checked")

Pseudo clase activo: selecciona todos los elementos que estén activos (CSS 3)

jquery("input:enabled")

Pseudo clase inactivo: selecciona todos los elementos que no estén activos (CSS 3)

jquery("input:disabled")

Pseudo clase ocultos: selecciona todos los elementos ocultos (jQuery)

jquery(":hidden")

Pseudo clase visible: selecciona todos los elementos visibles (jQuery)

jquery(":visible")

Selectores de jerarquía

Selector de descendientes: selecciona elementos que desciendan de otro elemento (CSS 1)

jquery("div.entrada h2")

Selector de hijos: selecciona elementos que sean hijos directos de otro elemento (CSS 2)

jquery("div.entrada > h2")

Pseudo clase hijo: selecciona el enésimo hijo de un elemento (CSS 3)

jquery("tr:nth-child(1)")

Pseudo clase primer hijo: selecciona el primero hijo de un elemento (CSS 2)

jquery("tr:first-child")

Pseudo clase último hijo: selecciona el último hijo de un elemento (CSS 3)

jquery("tr:last-child")

Pseudo clase hijo único: selecciona los elementos que sean hijos únicos de otros elementos (CSS 3)

jquery("div:only-child")

Pseudo clase índice: selecciona el elemento con el índice indicado de un grupo de elementos (jQuery)

jquery("td:eq(0)")

Pseudo clase primero: selecciona el primer elemento de un grupo de elementos. Equivale a eq(0) (jQuery)

jquery("td:first)")

Pseudo clase último: selecciona el último elemento de un grupo de elementos (jQuery)

jquery("td:last)")

Pseudo clase mayor que: selecciona todos los elementos con un índice mayor que el indicado en un grupo de elementos (jQuery)

jquery("td:gt(0)")

Pseudo clase menor que: selecciona todos los elementos con un índice menor que el indicado en un grupo de elementos (jQuery)

jquery("td:lt(3)")

Pseudo clase par: selecciona los elementos pares de un grupo de elementos (jQuery)

jquery("td:even")

Pseudo clase impar: selecciona los elementos impares de un grupo de elementos (jQuery)

jquery("td:odd")

Selector de hermanos: selecciona todos los hermanos que se encuentren precedidos de otro elemento (CSS 3)

jquery("div.entrada ~ p")

Selector de próximo adyacente: similar al anterior, pero sólo selecciona el adyacente directo (CSS 2)

jquery("div.entrada + p")

Pseudo clase padre: selecciona los padres de otros elementos (jQuery)

jquery("h2:parent")

Pseudo clase vacío: selecciona los elementos que no tengan ningún hijo, incluyendo texto plano (CSS 3)

jquery(":empty")

Otros selectores

Pseudo clase animado: selecciona todos los elementos que están en proceso de animación en este momento (jQuery)

jquery(":animated")

Pseudo clase contiene: selecciona todos los elementos que contengan el texto indicado, directamente o en uno de los hijos (jQuery)

jquery("div:contains('Mundo geek')")

Pseudo clase tiene: selecciona todos los elementos que contengan al menos un elemento que responda al selector indicado (jQuery)

jquery("div:has(h2)")

Pseudo clase negación: selecciona todos los elementos que no cumplan con el selector dado (CSS 3)

jquery("div:not(.entrada)")

Gestionando una colección jQuery

Al llamar a la función jQuery con un selector como argumento, el valor devuelto será otro objeto jQuery representando la colección de elementos DOM seleccionados. Tanto es así, que podremos obtener uno de los elementos utilizando el operador [], como si de un array normal se tratara

jQuery("div.entrada")[0]

y también tenemos acceso a una propiedad length con el número de elementos que contiene la colección

jQuery("div.entrada").length

Otras cosas que podemos hacer con este objeto son añadir elementos a la colección

jQuery("div.entrada").add("div.comentario")

eliminar elementos

jQuery("div.entrada").not("div.destacada")

filtrar elementos con un selector o basándonos en el valor devuelto por una función

jQuery("div.entrada").filter(":has(h2)")

quedarnos con los elementos que contengan otro cierto elemento

jQuery("div.entrada").has("h2")

obtener un sólo elemento, por su índice

jQuery("div.entrada").eq(3)

obtener el primer elemento de la colección

jQuery("div.entrada").first()

obtener el último elemento de la colección

jQuery("div.entrada").last()

crear una sub colección a partir de la original

jQuery("div.entrada").slice(0,5);
jQuery("div.entrada").slice(3);

obtener los descendientes directos

jQuery("div.entrada").children()
jQuery("div.entrada").children("p")

obtener los descendientes directos, incluyendo el texto plano

jQuery("div.entrada").contents()

obtener los hijos que cumplan con un determinado selector

jQuery("div.entrada").find("p")

obtener el hermano siguiente

jQuery("div.entrada").next()

obtener los hermanos siguientes

jQuery("div.entrada").nextAll()

obtener el hermano anterior

jQuery("div.entrada").prev()

obtener los hermanos anteriores

jQuery("div.entrada").prevAll()

obtener todos los hermanos

jQuery("div.entrada").siblings()

obtener el padre de cada elemento

jQuery("div.entrada").parent()

obtener todos los ancestros de cada elemento

jQuery("div.entrada").parents()

crear una copia de la colección

jQuery("div.entrada").clone()

o buscar la posición que ocupa un elemento en la colección (si existe)

jQuery("*").index("div.entrada")

Modificar la página con jQuery

Veamos ahora cómo utilizar jQuery para modificar nuestra página web. Podemos, por ejemplo, modificar el valor de un atributo

jQuery("a#principal").attr("href", "http://mundogeek.net/")

añadir una nueva clase a uno o varios elementos

jQuery("div.entrada:first").addClass("primera")

añadir una propiedad CSS a uno o varios elementos

jQuery("div.entrada").css("border", "1px solid red")

añadir contenido a un elemento

jQuery("div.entrada:first").before("<strong>Destacada</strong>")
jQuery("div.entrada:first").prepend("<strong>Destacada</strong>")
jQuery("div.entrada:first").after("<strong>Destacada</strong>")
jQuery("div.entrada:first").append("<strong>Destacada</strong>")

modificar el contenido de un elemento

jQuery("p").html("<strong>Sustituido</strong>")

eliminar un elemento de la página

jQuery("div.entrada:first").remove()

ocultar un elemento

jQuery("p").hide()

o volver a mostrar un elemento

jQuery("p").show()

Eventos en jQuery

Existen distintas funciones para asignar una función que maneje un evento lanzado por un widget. Para el evento click, al hacer clic sobre un elemento:

jQuery(":button#pulsame").click(function () {
  alert("Has hecho clic");
});

evento submit, cuando se pulsa sobre el botón de enviar de un formulario:

jQuery("#formulario").submit(function() {
  alert("Enviando");
});

evento dblclick, al hacer doble clic sobre un elemento:

jQuery("p:first").dblclick(function () {
  alert("Has hecho doble clic");
});

evento hover, cuando al pasar el ratón por encima de un elemento. Podemos utilizar jQuery(this) para referirnos a este elemento:

jQuery("p:first").hover(function () {
  jQuery(this).css("border", "1px solid red");
});

evento mouseenter, cuando el cursor entra en un elemento

jQuery("p:first").mouseenter(function () {
  jQuery(this).css("border", "1px solid red");
});

evento mouseout, cuando el cursor sale de un elemento

jQuery("p:first").mouseenter(function () {
  jQuery(this).css("border", "1px solid red");
});

jQuery("p:first").mouseout(function () {
  jQuery(this).css("border", "0");
});

evento change, cuando se modifica un elemento:

jQuery(":text#nombre").change(function () {
  alert("Cambiado");
});

evento load, cuando se termina de cargar el elemento:

jQuery(window).load(function () {
  alert("Página cargada");
});

evento ready, cuando se termina de cargar el DOM, para no tener que esperar a cargar las imágenes, por ejemplo, de forma que el usuario pueda utilizar nuestra funcionalidad JavaScript cuanto antes:

jQuery(document).ready(function () {
  alert("DOM cargado");
});

esto último, al ser esto algo muy común, se puede resumir pasando una función a la función jQuery, directamente:

jQuery(function () {
  alert("DOM cargado");
});

Animaciones con jQuery

jQuery viene con unas pocas animaciones útiles y vistosas por defecto, aunque para sacarle todo el partido probablemente tendremos que recurrir a plugins.

Para hacer un fundido a opaco:

jQuery(function () {
  jQuery("p").hide();
  jQuery("p").delay(200).fadeIn();
});

En el ejemplo anterior se utiliza delay para hacer pasar un par de segundos y que se vea más claramente el efecto. A esta función se le puede pasar un valor numérico con el número de milisegundos a esperar, o una cadena, como "slow" (lento) o "fast" (rápido).

para hacer un fundido a transparente:

jQuery(":button").click(function () {
  jQuery("p").fadeOut();
});

También podemos cambiar la opacidad de un elemento a cualquier valor intermedio

jQuery(":button").click(function () {
  jQuery("p").fadeTo("slow", 0.5);
});

mostrar los elementos con una animación de deslizamiento de arriba a abajo:

jQuery(function () {
  jQuery("p").hide().delay(200).slideDown();
});

ocultarlos deslizándolos hacia arriba:

jQuery(function () {
  jQuery("p").delay(200).slideUp();
});

mostrarlos u ocultarlos, dependiendo de si se estaban mostrando o no:

jQuery(":button").click(function () {
  jQuery("p").delay(200).slideToggle();
});

Por último, para cualquier otro tipo de animación con propiedades CSS cuyos valores sean numéricos, utilizaríamos:

jQuery(":button").click(function () {
  jQuery("p").animate({opacity:0.50,width:100}, 'slow');
});

jQuery y AJAX

La forma más sencilla de enviar una petición HTTP de forma asíncrona y mostrar el resultado en la página actual es utilizar la función load. Esta se ejecuta sobre el elemento al que se va a añadir la respuesta, y se le pasa como argumento una cadena con el archivo a cargar. Esta cadena puede contener también un selector con el que seleccionar qué elementos queremos mostrar de la respuesta.

jQuery(":button").click(function () {
  $("#citas").load("citas.html li");
});

también se pueden enviar parámetros al documento (se utiliza GET a menos que los datos se manden en forma de objeto):

jQuery(":button#login").click(function () {
  $("#mensaje").load("login.php", {nombre: "zootropo", pass: "contraseña"});
});

e indicar una función a ejecutar cuando se termine de llevar a cabo la petición

jQuery(":button#login").click(function () {
  jQuery("#mensaje").load("login.php", {nombre: "zootropo", pass: "contraseña"}, function(responseText, textStatus, XMLHttpRequest) {
    alert("cargado");
    });
});

También se pueden utilizar los métodos get y post del objeto jQuery, en cuyo caso se nos devolverá unos ciertos datos con los que nosotros mismos tendremos que trabajar para generar la respuesta y mostrarla en nuestro documento actual:

jQuery.get("login.php", {nombre: "zootropo", pass:"contraseña"},
  function(data, textStatus, XMLHttpRequest){
    jQuery("#mensaje").html("Han devuelto: " + data);
  });

jQuery.post("login.php", {nombre: "zootropo", pass:"contraseña"},
  function(data, textStatus, XMLHttpRequest){
    jQuery("#mensaje").html("Han devuelto: " + data);
  });

Si la respuesta del servidor va a estar en formato JSON (JavaScript Object Notation), muy utilizado actualmente, podemos utilizar el método jQuery.getJSON(), al que se le pasa la URL de la petición y, opcionalmente, cualquier parámetro que se necesite, además de una función de callback que ejecutar cuando se termine con la petición. Este método se encargará de parsear la estructura del objeto JSON devuelta utilizando jQuery.parseJSON(), objeto que estará disponible como primer parámetro de la función de callback.

$.getJSON('tareas.php', function(data, textStatus){
          $.each(data, function(i, tarea){
            $("<li></li>").html(tarea.nombre + " - " + tarea.hora).appendTo("ul#tareas");
          });
        });

El código de este tareas.php podría tener este aspecto:

<?php
header('Content-type: text/javascript');

$bbdd = new mysqli('servidor.com', 'usuario', 'pass', 'tareas');

$query = 'SELECT * FROM tareas';
$tareas = array();
if($resultado = $bbdd->query($query))
  while($tarea = $resultado->fetch_object())
    $tareas[] = $tarea;

$bbdd->close();

echo json_encode($tareas);
?>

Como veis, se utiliza la función json_encode para convertir el array u objeto PHP a formato JSON. Esta función, junto con su complemento, json_encode, se introdujo en PHP en la versión 5.2.0.

Ayuda -> Buscar actualizaciones, señores. ¿Novedades? Unas cuantas. Y MUY interesantes:

• Personas: una característica de la que ya podíamos disfrutar anteriormente en forma de extensión y que permite personalizar aún más el aspecto del navegador.
• Herramienta para el autocompletado de formularios
• Mayor soporte de HTML 5 y CSS 3 lo que a efectos prácticos nos trae, entre otras cosas, vídeo nativo en pantalla completa o gradientes con CSS
• Mejoras de rendimiento. Un 20% más rápido que Firefox 3.5.
• Herramienta de actualización de plugins
• Mejoras en el rendimiento de JavaScript
• Mejoras en la estabilidad
• Mejoras en el tiempo de arranque

Y tú, ¿piensas usar Firefox 3.6 como navegador principal? ¿o crees que existen alternativas mejores?