Hace ya tiempo que jQuery anunció la versión 1.4, primero fue en versión Alpha y posteriormente en Release Candidate, hoy oficialmente ha visto la luz la versión final, y para ello se ha creado un nuevo dominio http://www.jquery14.com destinado a mostrarnos lo que la que la nueva versión nos ofrece.
Rendimiento
Como todas las versiones de jQuery, el rendimiento es algo que tiende a disminuirse. En esta versión, hay que destacar que las funcionalidades más comunes han mejorado sustancialmente sus tiempos de respuesta en comparación la versión 1.3.2.
Sobretodo las funciones que atacan al DOM han recibido una impresionante optimización. Y por fin, la generación de HTML mediante el método html() mejora hasta un 300% el tiempo de respuesta.
Al igual que los métodos attr() y css() (mejora un 200%) que mejoran sustancialmente frente a la versión anterior del framework.
Setters mejorados
Los setters son aquellos métodos que nos permiten modificar los atributos, estilos o valores de los elementos jQuery. En esta nueva versión se han replanteado para facilitar su funcionamiento. Para ello nos permiten pasar funciones como parámetros que contendrán el valor actual del elemento, ideal para realizar modificaciones sobre el valor actual.
// Buscamos todos los & y los añadimos a un span
$('a').html(function(i,html){
return html.replace(/&/gi,'<span>&</span>');
});
// Añadimos información al title de los enlaces externos
$('a[target]').attr("title", function(i,title){
return title + " (Opens in External Window)";
});Creación sencilla de elementos
Crear elementos mediante jQuery será tan sencillo como esto:
jQuery("<div/>", {
id: "foo",
css: {
height: "50px",
width: "50px",
color: "blue",
backgroundColor: "#ccc"
},
click: function() {
$(this).css("backgroundColor", "red");
}
}).appendTo("body");
Ideal para generar elemento que no necesariamente deben añadirse al DOM nada más ser creados.
eq(-N) y get(-N)
Imagina que quieres obtener los dos últimos elementos de una lista, con esta nueva funcionalidad será más sencillo todavía conseguirlo.
$("#listado").get(-2);Eventos
Los eventos también han sido optimizados y replanteados, además de que todos los eventos para ser live() (excepto ready(), focus() y blur()) aunque usemos bind(), nos permitirá encadenar varios en la misma llamada.
$("div.test").bind({
click: function(){
$(this).addClass("active");
},
mouseenter: function(){
$(this).addClass("inside");
},
mouseleave: function(){
$(this).removeClass("inside");
}
});jQuery.proxy()
Esta función nos permitirá solventar el problema del contexto entre funciones, con ella será sencillo reutilizar código:
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')
);delay()
Se trata de una implementación más limpia de setTimeout() que nos permitirá pausar nuestros scripts.
$("div").fadeIn().delay(4000).fadeOut();Descargar
- jQuery Minified (23kb Gzipped)
- jQuery Regular (154kb)
17 comentarios, 6 referencias
+
#