{"id":286,"date":"2013-09-10T13:17:31","date_gmt":"2013-09-10T16:17:31","guid":{"rendered":"http:\/\/gianfratti.com\/?p=286"},"modified":"2013-09-10T13:18:04","modified_gmt":"2013-09-10T16:18:04","slug":"truques-e-dicas-para-jquery","status":"publish","type":"post","link":"https:\/\/gianfratti.com\/index.php\/truques-e-dicas-para-jquery\/","title":{"rendered":"Truques e dicas para jQuery"},"content":{"rendered":"

25 Excelentes truques e dicas para jQuery<\/h1>\n

<\/p>\n

1 – Carregue o conte\u00fado pelo Google Code<\/a><\/b>
\nSe voc\u00ea utiliza sempre o jQuery em seus sites, uma excelente maneira de acelerar o carregamento \u00e9 usar o arquivo jquery-1.2.6.pack.js diretamente do Google Code<\/a>. Al\u00e9m de diminuir o gasto com banda, o navegador do usu\u00e1rio faz cache do arquivo entre os v\u00e1rios sites que usam essa t\u00e9cnica o que dar\u00e1 uma experi\u00eancia de navega\u00e7\u00e3o melhor para o visitante.<\/p>\n

O Google tem uma infra-estrutura de espelhamento ao redor do mundo, sendo o mais r\u00e1pido e melhor servi\u00e7o de distribui\u00e7\u00e3o de conte\u00fado<\/a> (ou CDN para os \u00edntimos).<\/p>\n

Aproveite os milh\u00f5es de computadores do Google e fa\u00e7a com que o jQuery seja carregado de l\u00e1.<\/p>\n\n\n\n
<script src=”http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.5.1\/jquery.min.js” type=”text\/javascript”><\/script><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

Tem at\u00e9 como transformar a tag de script do jQuery em snippet para TextMate<\/a>.<\/p>\n

2 – Use uma tabela de refer\u00eancias<\/a><\/b>
\n\u00c9 sempre bom achar o mais r\u00e1pido possivel aquela fun\u00e7\u00e3o que executa seu trabalho, n\u00e9? Este site possui<\/a> uma excelente tabela para buscas r\u00e1pidas.<\/p>\n

3 – Combine e minimize todos seus scripts<\/a><\/b>
\nUse para isso o YUI Compressor<\/a> do Yahoo!<\/p>\n

4 – Use as funcionalidades extras de log do Firebug.<\/a><\/b>
\nUse a fun\u00e7\u00e3o console.log(Object)<\/a> do Firebug para escrever mensagens no console, muito melhor que alert(“”).<\/p>\n

O Firebug facilita acesso as propriedades dos objetos. Como elementos DOM s\u00e3o sempre objetos, estamos tratando deles o tempo todo.<\/p>\n

O Firebug tamb\u00e9m pode ser usado com Internet Explorer.<\/a><\/p>\n

5 – Use menos fun\u00e7\u00f5es de sele\u00e7\u00e3o, fa\u00e7a cache.<\/b><\/p>\n

 <\/p>\n\n\n\n
for (i = 0; i < 1000; i++) {var minhaLista = $(‘.minhaLista’); \/\/ seleciona 1000 vezesminhaLista.append(‘Esse \u00e9 o elemento ‘ + i);<\/p>\n

}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

Em um computador atual isso n\u00e3o demora nada, mas lembre-se que o usu\u00e1rio utiliza equipamentos muito piores que seu Macbook Pro. Imagine eles em seus fracos iPhones, ou pior ainda, em um Opera Mobile<\/a>.<\/p>\n

Ent\u00e3o mantenha o seletor fora do loop:<\/p>\n\n\n\n
var minhaLista = $(‘.minhaLista’); \/\/ seleciona 1 vezfor (i = 0; i < 1000; i++) {<\/p>\n

minhaLista.append(‘Esse \u00e9 o elemento ‘ + i);<\/p>\n

}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

6 – Use o minimo possivel de manipula\u00e7\u00e3o com o DOM<\/b>
\nFun\u00e7\u00f5es como .append(), .prepend(), .after(), .before() s\u00e3o relativamente custosas e podem deixar as coisas lentas.<\/p>\n\n\n\n
var minhaLista = $(‘.minhaLista’);for (i = 0; i < 1000; i++) {<\/p>\n

minhaLista.append(‘Esse \u00e9 o elemento ‘ + i);<\/p>\n

}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

\u00c9 consideravelmente lenta perto de:<\/p>\n\n\n\n
var meusItens = ”;for (i = 0; i < 1000; i++) {<\/p>\n

meusItens += ‘<li>Esse \u00e9 o elemento ‘ + i + ‘<\/li>’;<\/p>\n

}<\/p>\n

 <\/p>\n

$(‘.minhaLista’).html(meusItems);<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

Escrever no DOM somente uma vez \u00e9 um pouco mais r\u00e1pido. J\u00e1 que aqui estamos mesmo lutando por optimiza\u00e7\u00f5es (lembrem-se dos mobiles), vale n\u00e9?<\/p>\n

7 – Coloque tudo dentro de um elemento antes de fazer uma inser\u00e7\u00e3o ao DOM<\/b><\/p>\n\n\n\n
var meusItens = ”;for (i = 0; i < 1000; i++) {<\/p>\n

meusItens += ‘<li>Esse \u00e9 o elemento ‘ + i + ‘<\/li>’;<\/p>\n

}<\/p>\n

 <\/p>\n

$(‘.minhaLista’).html(‘<ul>’ + meusItens + ‘<\/ul>’);<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

8 – Use IDs em vez de classes sempre que possivel<\/b>
\nA fun\u00e7\u00e3o de busca por com CSS3 Selector<\/a> \u00e9 muito legal de se usar, mas o jQuery implementa ela em JavaScript, e usando o m\u00e1ximo<\/i> que a API do DOM deixa. Isso as vezes n\u00e3o \u00e9 o ideal para performance, acredite.<\/p>\n

Navegadores como o WebKit j\u00e1 possuem implementa\u00e7\u00e3o nativa dessa fun\u00e7\u00e3o, indo de acordo com o que foi pensado no framework Prototype<\/a>, mas lembre-se, em desktop\/notebook a hegemonia \u00e9 de quem n\u00e3o IEmplementa novidades t\u00e3o cedo.<\/p>\n

No mercado de mobile, WebKit e Opera lutam para ver quem tem o maior numero de especifica\u00e7\u00f5es da W3C implementadas.<\/p>\n

Uma busca por ID no DOM quase sempre \u00e9 mais eficiente que a busca por classe, prefira sempre usar ID.<\/p>\n

9 – D\u00ea um contexto para seus seletores<\/b>
\nEu tenho d\u00favidas quanto a efic\u00e1cia de contextualizar os seletores via Javascript, comparada ao uso de contexto no CSS3. De qualquer forma as seguintes formas de uso s\u00e3o mais r\u00e1pidas do que buscar um elemento no documento inteiro.<\/p>\n\n\n\n
jQuery( expression, contexto );$(‘contexto’).find(‘expression’);$(‘contexto expression’);<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

10 – Use encadeamento de fun\u00e7\u00f5es<\/b>
\nUma das caracter\u00edsticas mais legais do jQuery \u00e9 a possibilidade de encadear m\u00e9todos. Ent\u00e3o, por exemplo, se voc\u00ea deseja alterar a classe de um elemento:<\/p>\n\n\n\n
$(‘#minhaDiv’).removeClass(‘desliga’).addClass(‘liga’);<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

Provavelmente voc\u00ea aprendeu isso em seus primeiros 5 minutos de leitura sobre jQuery.
\nNote que continua funcionando mesmo com quebras de linhas (jQuery == JavaScript), o que significa que voc\u00ea pode escrever c\u00f3digo assim:<\/p>\n\n\n\n
$(‘#meuPainel’).find(‘TABLE .primeiraColuna’).removeClass(‘.primeiraColuna’)<\/p>\n

.css(‘background’, ‘red’)<\/p>\n

.append(‘<span>Essa celula agora \u00e9 vermelha<\/span>’);<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

Usar encadeamento tamb\u00e9m ajuda a diminuir a quantidade de seletores.<\/p>\n

Mas ainda \u00e9 possivel ir al\u00e9m.<\/b> Digamos que voc\u00ea deseja executar v\u00e1rias fun\u00e7\u00f5es em um elemento mas uma das primeiras fun\u00e7\u00f5es muda o elemento selecionado de alguma maneira:<\/p>\n\n\n\n
$(‘#minhaTabela’).find(‘.primeiraColuna’).css(‘background’,’red’);<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

N\u00f3s selecionamos uma tabela, descemos para buscar celulas com a classe “primeiraColuna” e ent\u00e3o a pintamos de vermelho.<\/p>\n

Digamos agora que queremos colorir todas celulas com a classe “ultimaColuna” de azul. J\u00e1 que usamos o m\u00e9todo find(), filtramos todas as c\u00e9lulas que n\u00e3o tinham a classe “primeiraColuna”, assim seria necessario o uso de um seletor novamente ou ent\u00e3o n\u00e3o poderiamos continuar encadeando, certo? Nah! O jQuery possui o metodo end() que reverte a \u00faltima sele\u00e7\u00e3o, ent\u00e3o voc\u00ea pode continuar encadeando tipo:<\/p>\n\n\n\n
$(‘#minhaTabela’).find(‘.primeiraColuna’).css(‘background’,’red’)<\/p>\n

.end()<\/p>\n

.find(‘.ultimaColuna’)<\/p>\n

.css(‘background’,’blue’);<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

\u00c9 tamb\u00e9m mais f\u00e1cil do que voc\u00ea imagina escrever suas fun\u00e7\u00f5es de forma que elas possam usar encadeamento.<\/p>\n

Tudo que voc\u00ea precisa \u00e9 fazer que suas fun\u00e7\u00f5es modifiquem e retornem<\/b> o mesmo elemento.<\/p>\n\n\n\n
$.fn.facaVermelho = function() {return $(this).css(‘background’, ‘red’);}<\/p>\n

 <\/p>\n

$(‘#minhaTabela’).find(‘.primeiraColuna’).facaVermelho().append(‘oi’);<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

Bem legal!<\/p>\n

11 – Saiba como usar a propriedade de anima\u00e7\u00e3o<\/b>
\nQuando eu comecei usar o jQuery eu adorei o fato de que \u00e9 f\u00e1cil usar anima\u00e7\u00f5es pr\u00e9-definidas como slideDown() e fadeIn() para conseguir alguns efeitos com incr\u00edvel facilidade.<\/p>\n

\u00c9 tamb\u00e9m f\u00e1cil ir ainda al\u00e9m por causa da facilidade que \u00e9 usar o poderoso m\u00e9todo animate().<\/p>\n

Se voc\u00ea olhar os metodos slideDown() e fadeIn() dentro do framework ver\u00e1 que s\u00e3o apenas atalhos para o metodo animate().<\/p>\n\n\n\n
slideDown: function(speed,callback){return this.animate({height: “show”}, speed, callback);},<\/p>\n

fadeIn: function(speed, callback){<\/p>\n

return this.animate({opacity: “show”}, speed, callback);<\/p>\n

}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

O m\u00e9todo animate() simplesmente pega qualquer estilo de CSS e aplica transi\u00e7\u00f5es de um valor a outro. Ent\u00e3o as mudan\u00e7as nas propriedades width, height, opacity, background-color, top, left, margin, color, font-size e qualquer outra que voc\u00ea quiser podem ter anima\u00e7\u00f5es!<\/p>\n

\u00c9 muito f\u00e1cil animar todos itens do seu menu para 100 pixels usando isso.<\/p>\n\n\n\n
$(‘#myList li’).mouseover(function() {$(this).animate({“height”: 100}, “slow”);});<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

Diferentemente de outras fun\u00e7\u00f5es do jQuery, as anima\u00e7\u00f5es s\u00e3o colocadas em fila de execu\u00e7\u00e3o automaticamente. Se voc\u00ea quiser rodar uma segunda anima\u00e7\u00e3o somente quando a primeira terminar, ent\u00e3o \u00e9 s\u00f3 chamar o m\u00e9todo novamente sem precisar usar um callback.<\/p>\n\n\n\n
$(‘#myBox’).mouseover(function() {$(this).animate({ “width”: 200 }, “slow”);$(this).animate({“height”: 200}, “slow”);<\/p>\n

});<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

Por\u00e9m, se voc\u00ea voc\u00ea desejar que as anima\u00e7\u00f5es ocorram no mesmo tempo, ent\u00e3o insira ambas na mesma chamada assim:<\/p>\n\n\n\n
$(‘#myBox’).mouseover(function() {$(this).animate({ “width”: 200, “height”: 200 }, “slow”);});<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

Voc\u00ea pode animar tanto propriedades num\u00e9ricas quanto cores e cores de fundo, leia mais sobre isso<\/a>.<\/p>\n

12 – Conhe\u00e7a sobre delega\u00e7\u00e3o de eventos<\/b>
\nO jQuery torna f\u00e1cil adicionar eventos em elementos do DOM de forma inobstrusiva, o que \u00e9 muito bom, mas adicionar muitos eventos \u00e9 ineficiente. A delega\u00e7\u00e3o de eventos permite que voc\u00ea adicione em muitas situa\u00e7\u00f5es menos eventos e atinja o mesmo resultado:<\/p>\n\n\n\n
$(‘#minhaTabela TD’).click(function(){$(this).css(‘background’, ‘red’);});<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

Vamos fazer uma fun\u00e7\u00e3o simples para tornar uma celula da tabela vermelha quando voc\u00ea clicar nela. Digamos que voc\u00ea tenha uma tabela com 10 colunas e 50 linhas, ent\u00e3o s\u00e3o 500 delega\u00e7\u00f5es de eventos.<\/p>\n

N\u00e3o seria melhor se fosse possivel agregar o evento somente uma vez e ent\u00e3o quando a tabela fosse clicada, chegar ao elemento que realmente foi clicado antes desse se tornar vermelho?<\/p>\n

Para isso \u00e9 que serve a delega\u00e7\u00e3o de eventos e isso \u00e9 simples de implementar…<\/p>\n\n\n\n
$(‘#minhaTabela’).click(function(e) {var clicado = $(e.target);clicado.css(‘background’, ‘red’);<\/p>\n

});<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

Muito \u00fatil, para por exemplo, manipular eventos de touch<\/a>.<\/p>\n

13 – Use classes (ou atributos) para armazenar estado<\/b><\/p>\n

Essa \u00e9 a maneira mais b\u00e1sica de guardar informa\u00e7\u00e3o sobre um bloco de HTML. O jQuery facilita a manipula\u00e7\u00e3o de elementos utilizando classes, ent\u00e3o se voc\u00ea precisa armazenar informa\u00e7\u00f5es sobre o estado de um elemento, por que n\u00e3o adicionar uma classe extra nele?<\/p>\n

Aqui vai um exemplo. N\u00f3s queremos criar um menu que expande. Quando voc\u00ea clica no bot\u00e3o n\u00f3s queremos que o painel des\u00e7a – slideDown() – quando ele tiver fechado, e que suba – slideUp() – quando estiver aberto.<\/p>\n

Vamos come\u00e7ar com o HTML<\/p>\n\n\n\n
<div><div>click me<\/div><div><\/p>\n

<ul><\/p>\n

<li>Item do menu 1<\/li><\/p>\n

<li>Item do menu 2<\/li><\/p>\n

<li>Item do menu 3<\/li><\/p>\n

<\/ul><\/p>\n

<\/div><\/p>\n

<\/div><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

Simples \ud83d\ude42
\nN\u00f3s adicionamos uma classe extra na div de fora, que n\u00e3o possui outro proposito a n\u00e3o ser armazenar o estado do item. Ent\u00e3o, tudo que precisamos \u00e9 um evento de clique – click – para chamar o slideUp() ou o slideDown() no painel correspondente quando o bot\u00e3o \u00e9 clicado.<\/p>\n\n\n\n
$(‘.botao’).click(function() {var menu_item = $(this).parent();var painel = menu_item.find(‘.painel’);<\/p>\n

 <\/p>\n

if (menu_item.hasClass(“expandido”)) {<\/p>\n

menu_item.removeClass(‘expandido’).addClass(‘colapsado’);<\/p>\n

painel.slideUp();<\/p>\n

} else if (menu_item.hasClass(“colapsado”)) {<\/p>\n

menu_item.removeClass(‘colapsado’).addClass(‘expandido’);<\/p>\n

painel.slideDown();<\/p>\n

}<\/p>\n

});<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

Esse \u00e9 um exemplo bem simples, mas voc\u00ea pode adicionar classes extras para armazenar todos tipos de informa\u00e7\u00f5es sobre um elemento DOM (peda\u00e7o de HTML).<\/p>\n

De qualquer forma, melhor ainda \u00e9 a pr\u00f3xima dica.<\/p>\n

14 – Melhor ainda, use o m\u00e9todo data() que \u00e9 interno do jQuery para armazenar estados<\/b><\/p>\n

O jQuery possui um metodo interno chamado data() que pode ser usado para armazenar informa\u00e7\u00f5es de chave\/valor sobre qualquer elemento DOM. Armazenar um pouco de informa\u00e7\u00e3o \u00e9 simples assim:<\/p>\n\n\n\n
$(‘#minhaDiv’).data(‘estadoAtual’, ‘desligado’);<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

N\u00f3s podemos usar o exemplo da dica anterior. Vamos utilizar o mesmo HTML, por\u00e9m ao inv\u00e9z da classe “expandido” usamos o metodo data().<\/p>\n\n\n\n
$(‘.botao’).click(function() {var item_menu = $(this).parent();<\/p>\n

var painel = item_menu.find(‘.painel’);<\/p>\n

 <\/p>\n

if (item_menu.data(‘colapsado’)) {<\/p>\n

item_menu.data(‘colapsado’, false);<\/p>\n

painel.slideDown();<\/p>\n

} else {<\/p>\n

item_menu.data(‘colapsado’, true);<\/p>\n

painel.slideUp();<\/p>\n

}<\/p>\n

});<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

Para mais informa\u00e7\u00f5es sobre os metodos data() e removeData() veja a documenta\u00e7\u00e3o<\/a>.<\/p>\n

15 – Escreva seu proprio seletor<\/b><\/p>\n

O jQuery possui v\u00e1rios seletores prontos para ajudar na sele\u00e7\u00e3o de elementos pelo ID, class, tag, atributo e muito mais. Mas o que fazemos quando \u00e9 preciso usar seletores que v\u00e3o al\u00e9m do que o jQuery deixa?<\/p>\n

Bom, uma possivel solu\u00e7\u00e3o seria adicionar classes nos elementos e usa-las para seleciona-los. Uma outra maneira \u00e9 extender os seletores assim:<\/p>\n\n\n\n
$.extend($.expr[‘:’], {mais100px: function(a) {return $(a).height() > 100;<\/p>\n

}<\/p>\n

});<\/p>\n

 <\/p>\n

$(‘.box:mais100px’).click(function() {<\/p>\n

alert(‘O elemento que voc\u00ea clicou possui mais de 100 pixels de altura’);<\/p>\n

});<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

Primeiro criamos um seletor que acha qualquer elemento que \u00e9 maior que 100 pixels. Depois usamos isso para adicionar uma a\u00e7\u00e3o de clique – click – em todos esses elementos.<\/p>\n

Mais exemplos dessa funcionalidade voc\u00ea pode<\/a> pegar aqui<\/a>.<\/p>\n

16 – Use as fun\u00e7\u00f5es de auxilio do jQuery<\/b><\/p>\n

O jQuery j\u00e1 quebra um galho ao facilitar a manipula\u00e7\u00e3o de elementos DOM, mas tamb\u00e9m adiciona metodos uteis para iterar, filtrar, clonar, juntar arrays ou remover elementos duplicados.<\/p>\n

Vale a pena passar um tempinho na p\u00e1gina que explica essas utilizades<\/a>.<\/p>\n

17 – Use a fun\u00e7\u00e3o “noconflict” para evitar conflitos com outros frameworks<\/b><\/p>\n

A maioria dos frameworks para JavaScript usam o simbolo $ como atalho. Para evitar problemas existe uma solu\u00e7\u00e3o simples, a fun\u00e7\u00e3o .noconflict() que permite definir outro atalho para o framework:<\/p>\n\n\n\n
var $j = jQuery.noConflict();$j(‘#minhaDiv’).hide();<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

18 – Use fun\u00e7\u00e3o anonima para evitar conflitos com outros frameworks<\/b><\/p>\n

Uma boa maneira de evitar conflitos no JavaScript (n\u00e3o somente com jQuery) \u00e9 o uso de uma fun\u00e7\u00e3o anonima.<\/p>\n\n\n\n
(function($) {\/\/ bloco})(jQuery.noconflict());<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

O que for executado dentro do bloco n\u00e3o muda com o escopo global, evitando problemas com nomes duplicados de variaveis e fun\u00e7\u00f5es.<\/p>\n

19 – Saiba quando uma imagem terminar de carregar<\/b><\/p>\n

Use o m\u00e9todo .load() em um elemento de imagem (IMG) com um callback. Simples assim:<\/p>\n\n\n\n
$(‘body’).append(‘<img src=”” alt=”” id=”minhaImagem” \/>’);$(‘#minhaImagem’).attr(‘src’, ‘imagem.jpg’).load(function() {console.log(‘Image Loaded. W: ‘+$(this).width()+’ H: ‘+$(this).height());<\/p>\n

});<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

\u00c9 importante que o elemento j\u00e1 esteja no HTML.<\/p>\n

20 – Sempre use a \u00faltima vers\u00e3o<\/b><\/p>\n

O framework est\u00e1 sendo constantemente melhorado por John Resig<\/a>, seu criador. Sempre que uma vers\u00e3o nova sai ela possui melhoras na performance e se mantem atualizada com o que existe de novo nos navegadores.<\/p>\n

A pr\u00f3xima vers\u00e3o do jQuery (1.3) vir\u00e1 com uma nova engine chamada Sizzle<\/a> que al\u00e9m de mais r\u00e1pida vai utilizar as fun\u00e7\u00f5es querySelectorAll<\/i> e getElementsByClassName<\/i> j\u00e1 disponiveis nos navegadores mais modernos.<\/p>\n

Ent\u00e3o, utilize sempre a \u00faltima vers\u00e3o.<\/p>\n

21 – Como saber se um elemento existe?<\/b><\/p>\n

Voc\u00ea n\u00e3o precisa checar se um elemento existe antes de manipular ele por que o jQuery simplesmente n\u00e3o faz nada caso o elemento n\u00e3o estiver no DOM. Mas as vezes voc\u00ea pode precisar executar algum peda\u00e7o de c\u00f3digo que depende da exist\u00eancia de um elemento, para isso use:<\/p>\n\n\n\n
if ($(‘#minhaDiv’)[0]) {\/\/ bloco de c\u00f3digo}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

22 – Adicione uma classe no HTML para saber que o JavaScript est\u00e1 disponivel<\/b><\/p>\n

Logo que o jQuery carregar use ele para adicionar uma classe chamada “JS” na tag HTML:<\/p>\n\n\n\n
$(‘html’).addClass(‘JS’);<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

Como isso s\u00f3 acontece quando o JavaScript (e o jQuery) estiverem prontos, voc\u00ea pode usar CSS para controlar quando um elemento deve aparecer somente quando o usu\u00e1rio estiver com JavaScript habilitado.<\/p>\n\n\n\n
.JS #minhaDiv { display:none; }<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.css<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

23 – Return ‘false’ para evitar a continua\u00e7\u00e3o de um evento<\/b><\/p>\n

Quando voc\u00ea tem:<\/p>\n\n\n\n
<a href=”landing_page.html” >Clique em mim!<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.htm<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

E adiciona um evento tipo assim:<\/p>\n\n\n\n
$(‘popup’).click(function(){\/\/ bloco de c\u00f3digo});<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

Vai perceber que o bloco de c\u00f3digo vai ser executado, porem o navegador ir\u00e1 para o endere\u00e7o do link. Voc\u00ea pode usar “href=’#'” para evitar isso, mas assim a p\u00e1gina ir\u00e1 voltar para o topo quando a a\u00e7\u00e3o de click for executada.<\/p>\n

Para evitar isso, adicione um “return false;” ao fim do bloco de c\u00f3digo:<\/p>\n\n\n\n
$(‘popup’).click(function(){\/\/ bloco de c\u00f3digoreturn false;<\/p>\n

});<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

24 – Atalho para a fun\u00e7\u00e3o “ready”<\/b><\/p>\n

Voc\u00ea j\u00e1 deve estar acostumado a usar<\/p>\n\n\n\n
$(document).ready(function (){\/\/ c\u00f3digo});<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

Pois saiba que pode economizar um pouco de c\u00f3digo simplesmente usando:<\/p>\n\n\n\n
$(function (){\/\/ c\u00f3digo});<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

25 – Identifique v\u00e1riaveis do tipo jQuery<\/b><\/p>\n

Se voc\u00ea come\u00e7ar usar as dicas para evitar chamadas desnecessarias as fun\u00e7\u00f5es do jQuery vai perceber que no seu c\u00f3digo o n\u00famero de variaveis carregando objetos jQuery ir\u00e1 aumentar bastante.<\/p>\n

Para evitar que voc\u00ea se confunda e chame a fun\u00e7\u00e3o de sele\u00e7\u00e3o – $() – em um elemento que j\u00e1 \u00e9 jQuery, identifique variaveis que carregam objetos do jQuery com um $ antes do nome.<\/p>\n\n\n\n
var $elemento = $(elemento);<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

view raw<\/b><\/a> gistfile1.js<\/b><\/a> hosted with \u2764 by GitHub<\/b><\/a><\/p>\n

 <\/p>\n

Ufa! 25 praticas ninja para ajudar sua produtividade com jQuery. Se voc\u00ea tiver mais alguma boa pratica e quer compartilhar, por favor comente aqui \ud83d\ude42<\/p>\n

E se voc\u00ea gostou do artigo, por favor espalhe pelo mundo.<\/p>\n

fonte: http:\/\/www.dirceupauka.com\/excelentes-truques-e-dicas-para-jquery<\/p>\n","protected":false},"excerpt":{"rendered":"

25 Excelentes truques e dicas para jQuery<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[12],"tags":[],"class_list":["post-286","post","type-post","status-publish","format-standard","hentry","category-jquery"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/posts\/286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/comments?post=286"}],"version-history":[{"count":6,"href":"https:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/posts\/286\/revisions"}],"predecessor-version":[{"id":292,"href":"https:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/posts\/286\/revisions\/292"}],"wp:attachment":[{"href":"https:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/media?parent=286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/categories?post=286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/tags?post=286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}