Jquery - Dicas e Truques

jQuery
Dicas e truques em 15 minutos

Victor Cavalcante
vcavalcante@lambda3.com.br
@vcavalcante

Cuidado com a versão 2.0
• Vai sair esse ano (2013)
• Ela não terá suporte para as versões do 6, 7 e 8 do IE
• Qual o problema com isso?
• Nenhum! :)
• Mas saibam disso!

Você pode utilizar seletores no .load()
• O Load consome uma página e coloca o conteúdo onde
você definir
• Com seletores você pode escolher qual parte da página
você quer
$("article").load("/customers");
$("article").load("/customers h1:eq(0)");

Use o seletor ID ao invés de classe
• jQuery usa a api nativa do browser
• Quando não puder, pesquise através de um container

http://jsperf.com/jquery-sector-id-or-class

Faça cache da suas consultas
• Em vez de fazer assim:
$("ul a").css("margin", "5px");
$("ul a").css("background-color", "red");
$("ul a").css("margin", "0px");
$("ul a").css("background-color", "blue");
$("ul a").show();

• Faça com cache:
var $links = $("ul a");
$links.css("margin", "5px");
$links.css("background-color", "red");
$links.css("margin", "0px");
$links.css("background-color", "blue");
$links.show();

Ou utilize encadeamento:
$("ul a")
.css("margin", "5px")
.css("background-color", "red")
.css("margin", "0px")
.css("background-color", "blue")
.show();

http://jsperf.com/jquery-cache-selector

Não utilize .each() para tudo!!!
$.each(a, function(index, number) {
var e = number;});

$(a).each(function(index, number) {
var e = number;});
for (var i = 0, len = a.length; i < len; i++) {
var e = a[i];};

http://jsperf.com/jquery-each-x-for

Como criar elementos com jQuery?
$("<div id='lambda3' class='devday'>Lambda3</div>");

$("<div>",{id:'lambda3',class:'devday',text:'lambda3'});

$("<div>").
attr("id","lambda3").
addClass('devday').
text('lambda3');

http://jsperf.com/jquery-create-elements-string-object-methods/

Não use o live, deletegate e bind
• Utilize o método $.on() e $.off()
• A partir da versão 1.7 essa é a forma oficial para
atachar eventos

Não use o live, delegate e bind
$('a').bind('click', myHandler);
$('a').on('click', myHandler);

$('form').bind('submit', { val: 42 }, fn);
$('form').on('submit', { val: 42 }, fn);

$(window).unbind('scroll.myPlugin');
$(window).off('scroll.myPlugin');

$('.comment').delegate('a.add', 'click', addNew);
$('.comment').on('click', 'a.add', addNew);

$('.dialog').undelegate('a', 'click.myDlg');
$('.dialog').off('click.myDlg', 'a');

Use filtro em vez de contexto!

var painel = $('a.destaque', $('#contexto'));

var painel = $('#contexto').filter("a.destaque");

http://jsperf.com/jquery-filter-vs-context

Queries
Quais são as formas de selecionar o link com destaque
que está na div produtos HTML?
<a href="#" class="destaque">destaque</a>
<section id="produtos">
<ul>
<li>
1. $("#produtos a.destaque");
<a href="#" class="destaque">destaque</a> 2. $("#produtos .destaque");
</li> 3. $("#produtos").filter("a.destaque");
<li>
<a href="#">sem destaque</a> 4. $("#produtos").filter(".destaque");
</li> 5. $(".destaque", $("#produtos"));
<li>
<a href="#">sem destaque</a>
</li>
</ul>
</section>

http://jsperf.com/jquery-selectors-vs-filter

Obrigado!
Victor Cavalcante
vcavalcante@lambda3.com.br
@vcavalcante

Jquery - Dicas e Truques

Mais conteúdo relacionado

Mais procurados (20)

Destaque (20)

Semelhante a Jquery - Dicas e Truques (20)

Mais de Lambda 3 (8)

Jquery - Dicas e Truques