Contenido

jQuery 1.4 por fin vió la luz

15 ene

+ 23

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

4271691293_8e11e4666d_o
(Ver Imagen)

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.

4271691747_a8733f1b1f_o
(Ver Imagen)

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.

4271691147_ae533c2cd5_o
(Ver Imagen)

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(/&amp;/gi,'<span>&amp;</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

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.