Jquery - Dicas e Truques

2,030 views

Published on

Slides da lightning talk do Lambda Day SP

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,030
On SlideShare
0
From Embeds
0
Number of Embeds
1,298
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Jquery - Dicas e Truques

  1. 1. jQueryDicas e truques em 15 minutos Victor Cavalcante vcavalcante@lambda3.com.br @vcavalcante
  2. 2. Victor Cavalcante
  3. 3. 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!
  4. 4. 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)");
  5. 5. 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 containerhttp://jsperf.com/jquery-sector-id-or-class
  6. 6. 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();
  7. 7. Faça cache da suas consultas• 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();
  8. 8. Faça cache da suas consultas 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
  9. 9. 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
  10. 10. 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/
  11. 11. 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
  12. 12. 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);
  13. 13. Use filtro em vez de contexto! var painel = $(a.destaque, $(#contexto)); var painel = $(#contexto).filter("a.destaque");http://jsperf.com/jquery-filter-vs-context
  14. 14. QueriesQuais são as formas de selecionar o link com destaqueque 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
  15. 15. Dúvidas?
  16. 16. 1
  17. 17. Obrigado! Victor Cavalcantevcavalcante@lambda3.com.br @vcavalcante
  18. 18. www.lambda3.com.br

×