25 Excelentes truques e dicas para jQuery

1 – Carregue o conteúdo pelo Google Code
Se você utiliza sempre o jQuery em seus sites, uma excelente maneira de acelerar o carregamento é usar o arquivo jquery-1.2.6.pack.js diretamente do Google Code. Além de diminuir o gasto com banda, o navegador do usuário faz cache do arquivo entre os vários sites que usam essa técnica o que dará uma experiência de navegação melhor para o visitante.

O Google tem uma infra-estrutura de espelhamento ao redor do mundo, sendo o mais rápido e melhor serviço de distribuição de conteúdo (ou CDN para os íntimos).

Aproveite os milhões de computadores do Google e faça com que o jQuery seja carregado de lá.

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js” type=”text/javascript”></script>

view raw gistfile1.js hosted with ❤ by GitHub

 

Tem até como transformar a tag de script do jQuery em snippet para TextMate.

2 – Use uma tabela de referências
É sempre bom achar o mais rápido possivel aquela função que executa seu trabalho, né? Este site possui uma excelente tabela para buscas rápidas.

3 – Combine e minimize todos seus scripts
Use para isso o YUI Compressor do Yahoo!

4 – Use as funcionalidades extras de log do Firebug.
Use a função console.log(Object) do Firebug para escrever mensagens no console, muito melhor que alert(“”).

O Firebug facilita acesso as propriedades dos objetos. Como elementos DOM são sempre objetos, estamos tratando deles o tempo todo.

O Firebug também pode ser usado com Internet Explorer.

5 – Use menos funções de seleção, faça cache.

 

for (i = 0; i < 1000; i++) {var minhaLista = $(‘.minhaLista’); // seleciona 1000 vezesminhaLista.append(‘Esse é o elemento ‘ + i); }

view raw gistfile1.js hosted with ❤ by GitHub

 

Em um computador atual isso não demora nada, mas lembre-se que o usuário utiliza equipamentos muito piores que seu Macbook Pro. Imagine eles em seus fracos iPhones, ou pior ainda, em um Opera Mobile.

Então mantenha o seletor fora do loop:

var minhaLista = $(‘.minhaLista’); // seleciona 1 vezfor (i = 0; i < 1000; i++) { minhaLista.append(‘Esse é o elemento ‘ + i); }

view raw gistfile1.js hosted with ❤ by GitHub

 

6 – Use o minimo possivel de manipulação com o DOM
Funções como .append(), .prepend(), .after(), .before() são relativamente custosas e podem deixar as coisas lentas.

var minhaLista = $(‘.minhaLista’);for (i = 0; i < 1000; i++) { minhaLista.append(‘Esse é o elemento ‘ + i); }

view raw gistfile1.js hosted with ❤ by GitHub

 

É consideravelmente lenta perto de:

var meusItens = ”;for (i = 0; i < 1000; i++) { meusItens += ‘<li>Esse é o elemento ‘ + i + ‘</li>’; }   $(‘.minhaLista’).html(meusItems);

view raw gistfile1.js hosted with ❤ by GitHub

 

Escrever no DOM somente uma vez é um pouco mais rápido. Já que aqui estamos mesmo lutando por optimizações (lembrem-se dos mobiles), vale né?

7 – Coloque tudo dentro de um elemento antes de fazer uma inserção ao DOM

var meusItens = ”;for (i = 0; i < 1000; i++) { meusItens += ‘<li>Esse é o elemento ‘ + i + ‘</li>’; }   $(‘.minhaLista’).html(‘<ul>’ + meusItens + ‘</ul>’);

view raw gistfile1.js hosted with ❤ by GitHub

 

8 – Use IDs em vez de classes sempre que possivel
A função de busca por com CSS3 Selector é muito legal de se usar, mas o jQuery implementa ela em JavaScript, e usando o máximo que a API do DOM deixa. Isso as vezes não é o ideal para performance, acredite.

Navegadores como o WebKit já possuem implementação nativa dessa função, indo de acordo com o que foi pensado no framework Prototype, mas lembre-se, em desktop/notebook a hegemonia é de quem não IEmplementa novidades tão cedo.

No mercado de mobile, WebKit e Opera lutam para ver quem tem o maior numero de especificações da W3C implementadas.

Uma busca por ID no DOM quase sempre é mais eficiente que a busca por classe, prefira sempre usar ID.

9 – Dê um contexto para seus seletores
Eu tenho dúvidas quanto a eficácia de contextualizar os seletores via Javascript, comparada ao uso de contexto no CSS3. De qualquer forma as seguintes formas de uso são mais rápidas do que buscar um elemento no documento inteiro.

jQuery( expression, contexto );$(‘contexto’).find(‘expression’);$(‘contexto expression’);

view raw gistfile1.js hosted with ❤ by GitHub

 

10 – Use encadeamento de funções
Uma das características mais legais do jQuery é a possibilidade de encadear métodos. Então, por exemplo, se você deseja alterar a classe de um elemento:

$(‘#minhaDiv’).removeClass(‘desliga’).addClass(‘liga’);

view raw gistfile1.js hosted with ❤ by GitHub

 

Provavelmente você aprendeu isso em seus primeiros 5 minutos de leitura sobre jQuery.
Note que continua funcionando mesmo com quebras de linhas (jQuery == JavaScript), o que significa que você pode escrever código assim:

$(‘#meuPainel’).find(‘TABLE .primeiraColuna’).removeClass(‘.primeiraColuna’) .css(‘background’, ‘red’) .append(‘<span>Essa celula agora é vermelha</span>’);

view raw gistfile1.js hosted with ❤ by GitHub

 

Usar encadeamento também ajuda a diminuir a quantidade de seletores.

Mas ainda é possivel ir além. Digamos que você deseja executar várias funções em um elemento mas uma das primeiras funções muda o elemento selecionado de alguma maneira:

$(‘#minhaTabela’).find(‘.primeiraColuna’).css(‘background’,’red’);

view raw gistfile1.js hosted with ❤ by GitHub

 

Nós selecionamos uma tabela, descemos para buscar celulas com a classe “primeiraColuna” e então a pintamos de vermelho.

Digamos agora que queremos colorir todas celulas com a classe “ultimaColuna” de azul. Já que usamos o método find(), filtramos todas as células que não tinham a classe “primeiraColuna”, assim seria necessario o uso de um seletor novamente ou então não poderiamos continuar encadeando, certo? Nah! O jQuery possui o metodo end() que reverte a última seleção, então você pode continuar encadeando tipo:

$(‘#minhaTabela’).find(‘.primeiraColuna’).css(‘background’,’red’) .end() .find(‘.ultimaColuna’) .css(‘background’,’blue’);

view raw gistfile1.js hosted with ❤ by GitHub

 

É também mais fácil do que você imagina escrever suas funções de forma que elas possam usar encadeamento.

Tudo que você precisa é fazer que suas funções modifiquem e retornem o mesmo elemento.

$.fn.facaVermelho = function() {return $(this).css(‘background’, ‘red’);}   $(‘#minhaTabela’).find(‘.primeiraColuna’).facaVermelho().append(‘oi’);

view raw gistfile1.js hosted with ❤ by GitHub

 

Bem legal!

11 – Saiba como usar a propriedade de animação
Quando eu comecei usar o jQuery eu adorei o fato de que é fácil usar animações pré-definidas como slideDown() e fadeIn() para conseguir alguns efeitos com incrível facilidade.

É também fácil ir ainda além por causa da facilidade que é usar o poderoso método animate().

Se você olhar os metodos slideDown() e fadeIn() dentro do framework verá que são apenas atalhos para o metodo animate().

slideDown: function(speed,callback){return this.animate({height: “show”}, speed, callback);}, fadeIn: function(speed, callback){ return this.animate({opacity: “show”}, speed, callback); }

view raw gistfile1.js hosted with ❤ by GitHub

 

O método animate() simplesmente pega qualquer estilo de CSS e aplica transições de um valor a outro. Então as mudanças nas propriedades width, height, opacity, background-color, top, left, margin, color, font-size e qualquer outra que você quiser podem ter animações!

É muito fácil animar todos itens do seu menu para 100 pixels usando isso.

$(‘#myList li’).mouseover(function() {$(this).animate({“height”: 100}, “slow”);});

view raw gistfile1.js hosted with ❤ by GitHub

 

Diferentemente de outras funções do jQuery, as animações são colocadas em fila de execução automaticamente. Se você quiser rodar uma segunda animação somente quando a primeira terminar, então é só chamar o método novamente sem precisar usar um callback.

$(‘#myBox’).mouseover(function() {$(this).animate({ “width”: 200 }, “slow”);$(this).animate({“height”: 200}, “slow”); });

view raw gistfile1.js hosted with ❤ by GitHub

 

Porém, se você você desejar que as animações ocorram no mesmo tempo, então insira ambas na mesma chamada assim:

$(‘#myBox’).mouseover(function() {$(this).animate({ “width”: 200, “height”: 200 }, “slow”);});

view raw gistfile1.js hosted with ❤ by GitHub

 

Você pode animar tanto propriedades numéricas quanto cores e cores de fundo, leia mais sobre isso.

12 – Conheça sobre delegação de eventos
O jQuery torna fácil adicionar eventos em elementos do DOM de forma inobstrusiva, o que é muito bom, mas adicionar muitos eventos é ineficiente. A delegação de eventos permite que você adicione em muitas situações menos eventos e atinja o mesmo resultado:

$(‘#minhaTabela TD’).click(function(){$(this).css(‘background’, ‘red’);});

view raw gistfile1.js hosted with ❤ by GitHub

 

Vamos fazer uma função simples para tornar uma celula da tabela vermelha quando você clicar nela. Digamos que você tenha uma tabela com 10 colunas e 50 linhas, então são 500 delegações de eventos.

Não seria melhor se fosse possivel agregar o evento somente uma vez e então quando a tabela fosse clicada, chegar ao elemento que realmente foi clicado antes desse se tornar vermelho?

Para isso é que serve a delegação de eventos e isso é simples de implementar…

$(‘#minhaTabela’).click(function(e) {var clicado = $(e.target);clicado.css(‘background’, ‘red’); });

view raw gistfile1.js hosted with ❤ by GitHub

 

Muito útil, para por exemplo, manipular eventos de touch.

13 – Use classes (ou atributos) para armazenar estado

Essa é a maneira mais básica de guardar informação sobre um bloco de HTML. O jQuery facilita a manipulação de elementos utilizando classes, então se você precisa armazenar informações sobre o estado de um elemento, por que não adicionar uma classe extra nele?

Aqui vai um exemplo. Nós queremos criar um menu que expande. Quando você clica no botão nós queremos que o painel desça – slideDown() – quando ele tiver fechado, e que suba – slideUp() – quando estiver aberto.

Vamos começar com o HTML

<div><div>click me</div><div> <ul> <li>Item do menu 1</li> <li>Item do menu 2</li> <li>Item do menu 3</li> </ul> </div> </div>

view raw gistfile1.js hosted with ❤ by GitHub

 

Simples 🙂
Nós adicionamos uma classe extra na div de fora, que não possui outro proposito a não ser armazenar o estado do item. Então, tudo que precisamos é um evento de clique – click – para chamar o slideUp() ou o slideDown() no painel correspondente quando o botão é clicado.

$(‘.botao’).click(function() {var menu_item = $(this).parent();var painel = menu_item.find(‘.painel’);   if (menu_item.hasClass(“expandido”)) { menu_item.removeClass(‘expandido’).addClass(‘colapsado’); painel.slideUp(); } else if (menu_item.hasClass(“colapsado”)) { menu_item.removeClass(‘colapsado’).addClass(‘expandido’); painel.slideDown(); } });

view raw gistfile1.js hosted with ❤ by GitHub

 

Esse é um exemplo bem simples, mas você pode adicionar classes extras para armazenar todos tipos de informações sobre um elemento DOM (pedaço de HTML).

De qualquer forma, melhor ainda é a próxima dica.

14 – Melhor ainda, use o método data() que é interno do jQuery para armazenar estados

O jQuery possui um metodo interno chamado data() que pode ser usado para armazenar informações de chave/valor sobre qualquer elemento DOM. Armazenar um pouco de informação é simples assim:

$(‘#minhaDiv’).data(‘estadoAtual’, ‘desligado’);

view raw gistfile1.js hosted with ❤ by GitHub

 

Nós podemos usar o exemplo da dica anterior. Vamos utilizar o mesmo HTML, porém ao invéz da classe “expandido” usamos o metodo data().

$(‘.botao’).click(function() {var item_menu = $(this).parent(); var painel = item_menu.find(‘.painel’);   if (item_menu.data(‘colapsado’)) { item_menu.data(‘colapsado’, false); painel.slideDown(); } else { item_menu.data(‘colapsado’, true); painel.slideUp(); } });

view raw gistfile1.js hosted with ❤ by GitHub

 

Para mais informações sobre os metodos data() e removeData() veja a documentação.

15 – Escreva seu proprio seletor

O jQuery possui vários seletores prontos para ajudar na seleção de elementos pelo ID, class, tag, atributo e muito mais. Mas o que fazemos quando é preciso usar seletores que vão além do que o jQuery deixa?

Bom, uma possivel solução seria adicionar classes nos elementos e usa-las para seleciona-los. Uma outra maneira é extender os seletores assim:

$.extend($.expr[‘:’], {mais100px: function(a) {return $(a).height() > 100; } });   $(‘.box:mais100px’).click(function() { alert(‘O elemento que você clicou possui mais de 100 pixels de altura’); });

view raw gistfile1.js hosted with ❤ by GitHub

 

Primeiro criamos um seletor que acha qualquer elemento que é maior que 100 pixels. Depois usamos isso para adicionar uma ação de clique – click – em todos esses elementos.

Mais exemplos dessa funcionalidade você pode pegar aqui.

16 – Use as funções de auxilio do jQuery

O jQuery já quebra um galho ao facilitar a manipulação de elementos DOM, mas também adiciona metodos uteis para iterar, filtrar, clonar, juntar arrays ou remover elementos duplicados.

Vale a pena passar um tempinho na página que explica essas utilizades.

17 – Use a função “noconflict” para evitar conflitos com outros frameworks

A maioria dos frameworks para JavaScript usam o simbolo $ como atalho. Para evitar problemas existe uma solução simples, a função .noconflict() que permite definir outro atalho para o framework:

var $j = jQuery.noConflict();$j(‘#minhaDiv’).hide();

view raw gistfile1.js hosted with ❤ by GitHub

 

18 – Use função anonima para evitar conflitos com outros frameworks

Uma boa maneira de evitar conflitos no JavaScript (não somente com jQuery) é o uso de uma função anonima.

(function($) {// bloco})(jQuery.noconflict());

view raw gistfile1.js hosted with ❤ by GitHub

 

O que for executado dentro do bloco não muda com o escopo global, evitando problemas com nomes duplicados de variaveis e funções.

19 – Saiba quando uma imagem terminar de carregar

Use o método .load() em um elemento de imagem (IMG) com um callback. Simples assim:

$(‘body’).append(‘<img src=”” alt=”” id=”minhaImagem” />’);$(‘#minhaImagem’).attr(‘src’, ‘imagem.jpg’).load(function() {console.log(‘Image Loaded. W: ‘+$(this).width()+’ H: ‘+$(this).height()); });

view raw gistfile1.js hosted with ❤ by GitHub

 

É importante que o elemento já esteja no HTML.

20 – Sempre use a última versão

O framework está sendo constantemente melhorado por John Resig, seu criador. Sempre que uma versão nova sai ela possui melhoras na performance e se mantem atualizada com o que existe de novo nos navegadores.

A próxima versão do jQuery (1.3) virá com uma nova engine chamada Sizzle que além de mais rápida vai utilizar as funções querySelectorAll e getElementsByClassName já disponiveis nos navegadores mais modernos.

Então, utilize sempre a última versão.

21 – Como saber se um elemento existe?

Você não precisa checar se um elemento existe antes de manipular ele por que o jQuery simplesmente não faz nada caso o elemento não estiver no DOM. Mas as vezes você pode precisar executar algum pedaço de código que depende da existência de um elemento, para isso use:

if ($(‘#minhaDiv’)[0]) {// bloco de código}

view raw gistfile1.js hosted with ❤ by GitHub

 

22 – Adicione uma classe no HTML para saber que o JavaScript está disponivel

Logo que o jQuery carregar use ele para adicionar uma classe chamada “JS” na tag HTML:

$(‘html’).addClass(‘JS’);

view raw gistfile1.js hosted with ❤ by GitHub

 

Como isso só acontece quando o JavaScript (e o jQuery) estiverem prontos, você pode usar CSS para controlar quando um elemento deve aparecer somente quando o usuário estiver com JavaScript habilitado.

.JS #minhaDiv { display:none; }

view raw gistfile1.css hosted with ❤ by GitHub

 

23 – Return ‘false’ para evitar a continuação de um evento

Quando você tem:

<a href=”landing_page.html” >Clique em mim!</a>

view raw gistfile1.htm hosted with ❤ by GitHub

E adiciona um evento tipo assim:

$(‘popup’).click(function(){// bloco de código});

view raw gistfile1.js hosted with ❤ by GitHub

Vai perceber que o bloco de código vai ser executado, porem o navegador irá para o endereço do link. Você pode usar “href=’#'” para evitar isso, mas assim a página irá voltar para o topo quando a ação de click for executada.

Para evitar isso, adicione um “return false;” ao fim do bloco de código:

$(‘popup’).click(function(){// bloco de códigoreturn false; });

view raw gistfile1.js hosted with ❤ by GitHub

 

24 – Atalho para a função “ready”

Você já deve estar acostumado a usar

$(document).ready(function (){// código});

view raw gistfile1.js hosted with ❤ by GitHub

 

Pois saiba que pode economizar um pouco de código simplesmente usando:

$(function (){// código});

view raw gistfile1.js hosted with ❤ by GitHub

 

25 – Identifique váriaveis do tipo jQuery

Se você começar usar as dicas para evitar chamadas desnecessarias as funções do jQuery vai perceber que no seu código o número de variaveis carregando objetos jQuery irá aumentar bastante.

Para evitar que você se confunda e chame a função de seleção – $() – em um elemento que já é jQuery, identifique variaveis que carregam objetos do jQuery com um $ antes do nome.

var $elemento = $(elemento);

view raw gistfile1.js hosted with ❤ by GitHub

 

Ufa! 25 praticas ninja para ajudar sua produtividade com jQuery. Se você tiver mais alguma boa pratica e quer compartilhar, por favor comente aqui 🙂

E se você gostou do artigo, por favor espalhe pelo mundo.

fonte: http://www.dirceupauka.com/excelentes-truques-e-dicas-para-jquery