Novedades de jQuery 1.4

El framework javascript más laureado llega con importantes mejoras de rendimiento y nuevas funcionalidades en su reciente versión 1.4.

Lanzado el 14 de enero, coincidiendo con el cuarto aniversario del proyecto, esta versión supone la reescritura de buena parte de las funciones más populares con el objetivo de simplificar el mantenimiento del core y aumentar la velocidad de respuesta del framework.

Setters

Las funciones .attr(),.css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .before(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass(), .removeClass(), y .toggleClass() ya aceptan funciones como parámetro facilitando la modificación de los elementos.

// find all ampersands in A's and wrap with a span
$('a').html(function(i,html){
  return html.replace(/&/gi,'&');
});

// Add some information to the title of the anchors
$('a[target]').attr("title", function(i,title){
  return title + " (Opens in External Window)";
});

Serializar parámetros anidados

En jQuery 1.3 {foo: ["bar", "baz"]} era serializado como foo=bar&foo=baz, ahora el resultado quedaría en foo[]=bar&foo[]=baz

De todas formas, aún es posible volver a el comportamiento tradicional:

// Enables for all serialization
jQuery.ajaxSettings.traditional = true;

// Enables for a single serialization
jQuery.param( stuff, true );

// Enables for a single Ajax requeset
$.ajax({ data: stuff, traditional: true });

El método serialize() también reconoce ahora elementos html5 como `datetime` o `range`.

Contexto en llamadas ajax

Ahora puedes especificar el contexto en las llamadas ajax y este se mantiene en los callbacks

jQuery.ajax({
    url: "test.html",
    context: document.body,
    success: function(){
        // this corresponde a document.body
        jQuery(this).addClass("done");
    }
});

Construcción rápida de elementos

jQuery("
", {
 id: "foo",
 css: {
 height: "50px",
 width: "50px",
 color: "blue",
 backgroundColor: "#ccc"
 },
 click: function() {
 $(this).css("backgroundColor", "red");
 }
}).appendTo("body");

Valores negativos en .eq(), .get()

$("div").eq(-2);
$("div").get(-2);

Nuevo método toggleClass()

Ahora es posible llamar a .toggleClass() con multiples selectores

$("div").toggleClass("current active");

Efectos

Asignar estilos independientes de animación por propiedad

$("#clickme").click(function() {
  $("div").animate({
    width: ["+=200px", "swing"],
    height: ["+=50px", "linear"],
  }, 2000, function() {
      $(this).after("
Animation complete.

");
  });
});

jQuery.proxy()

Solventa el problema del contexto entre funciones

var app = {
 config: {
 clickMessage: 'Hi!'
 },
 clickHandler: function() {
 alert(this.config.clickMessage);
 }
};

// jQuery 1.3.2
jQuery('a').bind('click', app.clickHandler);  // Esto produce un error al llamar a this dentro de jQuery

// jQuery 1.4
jQuery('a').bind(
 'click',
 jQuery.proxy(app, 'clickHandler')
);

Eventos live

A excepción de focus y blur (usar focusin y focusout) todos los eventos aceptados por .bind() tambien pueden ser eventos live

Delay

Nueva función que simplifica los setTimeout() se javascript

$("div").fadeIn().delay(4000).fadeOut();

Gráficas de rendimiento

Fuentes:
jquery14
anieto2k

Ningun post realacionado