Introducción

jQuery 1.6 ya está disponible en su versión definitiva y como nos suele tener acostumbrado su equipo de desarrollo, viene con una serie de novedades muy interesantes.

Podemos obtener nuestra copia desde el jQuery CDN:
http://code.jquery.com/jquery-1.6.js
http://code.jquery.com/jquery-1.6.min.js

Además de la corrección de algunos bugs y mejoras generales en el rendimiento, las novedades más interesante son las siguientes…

Mapeado de los atributos vía data-

NOTA: Esta modificación puede implicar el cambiar código funcional en versiones anteriores!

En la anterior versión que ya comentamos en su día (aquí y aquí), jQuery introdujo una nueva funcionalidad en el método .data() que permitía importar cualquier atributo que se hubiera asignado a un elemento para converirlo en valores Javascript usando JSON.

En esta nueva versión, se ha actualizado dicho comportamiento para que se corresponda con las especificaciones HTML5 dicatadas por la W3C adaptando la nomenclatura camel-case.

Así, mientras que en jQuery 1.5 un atributo como

data-max-value="15"

podía crear un objeto del tipo

{ max-value: 15 }

en jQuery 1.6 pasa a ser

{ maxValue: 15 }

.prop(), .removeProp(), and .attr()

NOTA: Esta modificación puede implicar el cambiar código funcional en versiones anteriores!

En la jQuery 1.6, se han separado los atributos de las propiedades DOM en métodos independientes. Esto es interesante:

• Los atributos son aquellos valores dentro del DOM que están definidos en el marcado HTML.
• Las propiedades son aquellos valores dentro del DOM resultado de la interacción del usuario o modificados de forma dinámica.

Esto quiere decir que en el siguiente código

<input type="text" value="abc" />

El atributo value se corresponde con abc. Sin embargo, si el usuario escribe en ese campo de texto modificándolo (por ejemplo con un Hello World), la propiedad de ese campo será el nuevo valor introducido (Hello World) aunque su atributo continúe siendo el original abc:

console.log( $('input').attr('value') ); // abc
 
// After an user types 'Hello World' on the input:
console.log( $('input').prop('value') ); // Hello World
console.log( $('input').attr('value') ); // abc

Mapeando las propiedades de un objeto

Ahora es posible mapear las propiedades de un objeto Javascript usando el método jQuery.map. Por ejemplo:

var counts = { first: 1, second: 2 };
 
counts = jQuery.map( counts, function( value ) {
    console.log( 'value: ', value );
});
 
// Value: 1
// Value: 2

Valores Booleanos

Un gran atajo: aquellos atributos booleanos (como un checkbox o un radio-button) se pueden intercambiar pasando true o false al correspondiente atributo:

$("#checkbox").attr("checked", true); // Checks it
$("#checkbox").attr("checked", false); // Unchecks it

jQuery.holdReady()

Este nuevo método es muy interesante: cuando desarrollamos plugins, puede resultar interesante el detener (retrasar) la ejecución del evento ready. En la nueva versión 1.6, el mecanismo para hacerlo se ha simplificado enormemente por lo que ahora solo es necesario invocar el método .holdReady() con el valor booleano deseado:

jQuery.holdReady( true ); // Pause execution of ready event
// later...
jQuery.holdReady( false ); // Resume execution

Selectores más finos

Ahora, los métodos .find(), .closest() y is() aceptan tanto elementos del DOM como otros objetos jQuery como argumento. Esto permite una granularidad muy fina a la hora de trabajar con selectores:

// Only returns .test elements if they're inside of a div
$("div").find( $(".test") )

Selector :focus

En jQuery 1.6, el selector :focus se ha mejorado para proporcionar un amplio soporte multinavegador. Este selector es útil para actuar sobre un elemento de la página seleccionado por el usuario (como, por ejemplo, un input):

$("input:focus").addClass("active");

Mejoras en la gestión de valores CSS

Se han añadido mejoras para permitir modificar las propiedades CSS según valores relativos. Ahora, es posible añadir a las reglas prefijos como += o -= para actualizar una propiedad en función a su valor actual:

// Move an item 10px over
$("#item").css("left", "+=10px");

Conclusión

De nuevo jQuery da un pequeño paso en su evolución particular para posicionarse como la biblioteca de facto para todo tipo de proyectos y escenarios. Las mejoras en rendimiento son importantes y las nuevas funcionalidades, aunque puedan parecer menores con respecto a otras introducidas en versiones anteriores, hacen cada vez más intuitivo el proceso de desarrollo.

Bien por John Resig y el gran trabajo que está realizando junto a su equipo.