Samuel Corradi

jQuery 1.3 lançado!

programacao, jquery, framework

De acordo com o site oficial, a versão 1.3 do jQuery é o maior lançamento da linguagem até agora. Várias novas funções, e uma infinidades de códigos foram adicionados nessa nova versão. Que conta inclusive com um novo motor de seleção CSS chamado Sizzle.

Esse novo motor é várias vezes mais rápido que o usado até então. Fazendo com que o jQuery, em quatão de performace, dê uma surra em frameworks tradicionais como Prototype e Dojo e até mesmo no maior rival Moo Tools que, até antes dessa nova versão, era ligeiramente mais rápido que jQuery.

Talvez seja uma questão de tempo outros frameworks adotarem o Sizzle ou outro motor com melhor performace. Afinal, a diferença é gritante.

Até mesmo os métodos .append(), .prepend(), .before() e .after(), que eram tidos como vilões do desempenho, ficaram muito mais rápidos e tiveram seu desempenho melhorado em até 6x. Já o método .offset() ficou até 3x mais rápido que nas versões 1.2x.

Vale ressaltar que, a partir dessa versão, o jQuery é o primeiro framework a trabalhar sem fazer a detecção interna de qual browser o usuário está usando para executar determinado tipo de código ou não. Ao invés disso, o jQuery 1.3+ trabalha com uma metodologia de acertos e erros para suas funções. Em outras palavras: Se tal função funcionar, isso quer dizer que é o browser é X. Se não funciona, quer dizer que é o IE (desculpem, não resisti... >:)).

Caminhando para a prática, seguem os novos métodos adicionados a nova versão:

closest( [expr] )

Atribui o comando ao elemento mais próximo definido.

No exemplo abaixo, ao clicarmos na lista '<li>', adicionamos dinamicamente um evento onde for clicado. No caso, o '<li>' pode ter internamente um '<strong>' ou '<em>', então esse elementos receberão o comando ao ser clicado. O que o .closest faz é subir na hierarquia até encontrar o primeiro '<li>' e adicionar a toggleClass a ele.

Lembrando que a expressão é condicional. Se não for usada, o elemento mais próximo, qualquer que seja será utilizado.

$(document).bind("click", function (e) {
	$(e.target).closest("li").toggleClass("hilight");
});

is( exp )

Esse novo método verifica, por exemplo, se o elemento clicado atende determinada condição. Funciona como um filtro. No exemplo abaixo teríamos vários '<div>'s, cada um com uma propriedade diferente. Com o .is() podemos testar o objeto clicado e executar a função de acordo com cada caso.

$("div").one('click', function () {
	if ($(this).is(":first-child")) {
		$("p").text("It's the first div.");
	} else if ($(this).is(".blue,.red")) {
		$("p").text("It's a blue or red div.");
	} else if ($(this).is(":contains('Peter')")) {
		$("p").text("It's Peter!");
	} else {
		$("p").html("It's nothing special.");
	}
	$("p").hide().slideDown("slow");
	$(this).css({"border-style": "inset", cursor:"default"});
});

toggleClass( class, switch )

Agora o método .toggleClass() aceita um segundo parâmetro para incluir expressões para filtrar seu uso. No exemplo abaixo, o toggleClass é ativado somente no terceiro clique.

var count = 0;
$("p").click(function() {
	$(this).toggleClass("highlight", count++ % 3 == 0);
});

live( type, fn )

Semelhando ao método .bind(), essa novo método recebe um tipo de evento (como click ou mouseover) e uma determinada função que será executada quando o evento ocorrer. A diferença é que outros elementos gerados, também receberão – automaticamente – o mesmo evento com a mesma função.

No exemplo abaixo temos um paragrafo que, ao ser clicado, gerará outro parágrafo. Automaticamente esses parágrafos, ao serem clicados, gerarão outros parágrafos “em tempo real”.

 $("p").live("click", function(){
	$(this).after("
Another paragraph!
");
});

Com o .bind(), todos elementos teriam que ser lidos - um por um – para os eventos serem atribuídos.

die( [type], [fn] )

O contrário do método .live(), o .die() retira todas funções atribuídas (através do método live) aos objetos.

No exemplo abaixo, temos três botões. O primeiro exibe uma '<div>', o segundo adiciona o evento de mostrar a '<div>' ao primeiro botão, e o terceiro retira do primeiro botão o evento a ele atribuído pelo segundo (deu para entender? rs).

function aClick() {
	$("div").show().fadeOut("slow");
}
$("#adiciona").click(function () {
	$("#primeiro").live("click", aClick).text("Pode clicar!");
});
$("#remove").click(function () {
	$("#primeiro").die("click", aClick).text("Não faz nada...");
});

Finalizando, com esse novo lançamento, jQuery passa a englobar novas e interessantes funções que permitem manipular de forma muito mais ágil os vários elementos de uma página. Sem falar na velocidade que chega a ser 30x mais rápida em determinadas ações. Isso tudo irá gerar uma nova safra de plugins e aplicações RIA.

Pessoal, ter um cheatsheet ao lado está se tornando fundamental. ;)

Mais informações sobre as novidades e melhoria de desempenho podem ser vistas no anuncio oficial.

Últimos posts:

• Pausa para o café - O universo em escalas
• Localizando o arquivo de um comando no Linux
• Histórico das linguagens de programação
• Duplicando discos virtuais no VirtualBox
• Backup de bases MySQL - mysqlhotcopy
• Tratando erros com PHP - Parte 3 (Final)
• Download do Chrome OS – O open-source foi pilhado
• Instalando Google Go
• Go Google, Go!
• XML - Quando usar elementos ou atributos?

Destaques:

• Sobre
• Trabalhos
• Contato