Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Por Bruno Cunha
Definição• Criada por John Resig em 2006;• OpenSource (MIT, GPL)   – Massachusetts Institute of Technology   – GNU General...
Para que serve• Adicionar interatividade e dinamismo às páginas web;• Criar scripts que visem a incrementar:   – Usabilida...
Do que jQuery é capaz• Adicionar efeitos visuais e animações;• Acessar e manipular o DOM;  – Document Object Model• Buscar...
Compatibilidade nos Navegadores• Firefox 2.0+• Internet Explorer 6+• Safari 3+• Opera 10.6+• Chrome 8+
SimplicidadeJQUERY NA PRÁTICA
Muda o jeito de escrever JavaScriptvar tables = document.getElementsByTagName(table);   for (var t = 0; t < tables.length;...
Muda o jeito de escrever JavaScript$(table tr:nth-child(odd)).addClass(odd);
Filosofia jQueryEncontrar Coisas                   Fazer Algo
Filosofia jQuery$(Encontrar Coisas)                      .Fazer Algo();
Exemplos$("div").hide(); //efeito$("button").remove(); //DOM$("form").submit(); //evento$("p").addClass("especial"); //DOM...
<!DOCTYPE html><html><body><ul>       <li><a>home</a></li>       <li><a>about</a></li></ul></body></html>
<!DOCTYPE html><html><body><ul>       <li><a>home</a></li>       <li><a>about</a></li></ul><script src="jquery.js"></scrip...
<!DOCTYPE html><html><body><ul>       <li><a>home</a></li>       <li><a>about</a></li></ul><script src="jquery.js"></scrip...
<!DOCTYPE html><html><body><ul id="nav">    <li><a>home</a></li>    <li><a>about</a></li></ul><script src="jquery.js"></sc...
<!DOCTYPE html><html><body><ul id="nav">    <li><a>home</a></li>    <li><a>about</a></li></ul><script src="jquery.js"></sc...
<!DOCTYPE html><html><body><ul id="nav">    <li class="item"><a>home</a></li>    <li class="item"><a>about</a></li></ul><s...
<!DOCTYPE html><html><body><ul id="nav">    <li class="item"><a>home</a></li>    <li class="item"><a>about</a></li></ul><s...
<!DOCTYPE html><html><body><ul id="nav">      <li class="item"><a>home</a></li>      <li class="item"><a>about</a></li></u...
<!DOCTYPE html><html><body><ul id="nav">      <li class="item"><a>home</a></li>      <li class="item"><a>about</a></li></u...
<!DOCTYPE html><html><body><ul id="nav">      <li class="item"><a href="/home">home</a></li>      <li class="item"><a href...
<!DOCTYPE html><html><body><ul id="nav">      <li class="item"><a href="/home">home</a></li>      <li class="item"><a href...
<!DOCTYPE html><html><body><ul id="nav">      <li class="item"><a href="/home">home</a></li>      <li class="item"><a href...
Chaining (Acorrentar)$("p").addClass("especial")      .css("color", "red")      .append(“Olá Mundo!")      .show("slow");•...
Vantagens•   Utiliza seletores CSS para localizar elementos da estrutura de marcação HTML da página;•   Possui arquitetura...
Desvantagens• Aplicações precisam de um servidor para criar e gerenciar sessões;• Aplicações precisam de outro aplicativo ...
FrozenSpots• Construtor $ (cifrão, dólar)   – referência para o objeto jQuery;   – é responsável por identificar o element...
HotSpots• Os plugins (componentes) que podem ser acoplados  junto ao jQuery.• O Complemento jQuery UI  – Oferece funcional...
Quem usa jQuery?    • Atualmente mais de 19 milhões de sites utilizam jQuery;Fonte: http://trendspro.builtwith.com
OBRIGADO!    Bruno Cunha    E-mail:    contato@brunocunha.net.br    Portfólio:    http://brunocunha.net.br    Twitter    h...
Upcoming SlideShare
Loading in …5
×

jQuery

1,578 views

Published on

O essencial sobre a melhor biblioteca (Framework) Javascript, jQuery.

Published in: Technology
  • Be the first to comment

jQuery

  1. 1. Por Bruno Cunha
  2. 2. Definição• Criada por John Resig em 2006;• OpenSource (MIT, GPL) – Massachusetts Institute of Technology – GNU General Public Licence – Uso Pessoal e Comercial;• Framework JavaScript;• Focado na simplicidade de escrita não exigindo conhecimento de programação;
  3. 3. Para que serve• Adicionar interatividade e dinamismo às páginas web;• Criar scripts que visem a incrementar: – Usabilidade – Acessibilidade – Design• Enriquecer a experiência do usuário, de forma progressiva e não-obstrutiva; – Javascript não obstrutivo diz respeito a scripts que, ao serem desabilitados, não interferem no funcionamento da página.
  4. 4. Do que jQuery é capaz• Adicionar efeitos visuais e animações;• Acessar e manipular o DOM; – Document Object Model• Buscar informações no servidor sem necessidade de recarregar a página;• Prover interatividade;• Alterar conteúdo;• Modificar apresentação e estilização;• Simplificar tarefas específicas de JavaScript;
  5. 5. Compatibilidade nos Navegadores• Firefox 2.0+• Internet Explorer 6+• Safari 3+• Opera 10.6+• Chrome 8+
  6. 6. SimplicidadeJQUERY NA PRÁTICA
  7. 7. Muda o jeito de escrever JavaScriptvar tables = document.getElementsByTagName(table); for (var t = 0; t < tables.length; t++) { var rows = tables[t].getElementsByTagName(tr); for (var i = 1; i < rows.length; i += 2) { if (!/(^|s)odd(s|$)/.test(rows[i].className)) { rows[i].className += odd; } } }
  8. 8. Muda o jeito de escrever JavaScript$(table tr:nth-child(odd)).addClass(odd);
  9. 9. Filosofia jQueryEncontrar Coisas Fazer Algo
  10. 10. Filosofia jQuery$(Encontrar Coisas) .Fazer Algo();
  11. 11. Exemplos$("div").hide(); //efeito$("button").remove(); //DOM$("form").submit(); //evento$("p").addClass("especial"); //DOM$("span").show("fast"); //animação
  12. 12. <!DOCTYPE html><html><body><ul> <li><a>home</a></li> <li><a>about</a></li></ul></body></html>
  13. 13. <!DOCTYPE html><html><body><ul> <li><a>home</a></li> <li><a>about</a></li></ul><script src="jquery.js"></script></body></html>
  14. 14. <!DOCTYPE html><html><body><ul> <li><a>home</a></li> <li><a>about</a></li></ul><script src="jquery.js"></script><script>jQuery(ul);</script></body></html>
  15. 15. <!DOCTYPE html><html><body><ul id="nav"> <li><a>home</a></li> <li><a>about</a></li></ul><script src="jquery.js"></script><script>jQuery(ul).attr(id, nav);</script></body></html>
  16. 16. <!DOCTYPE html><html><body><ul id="nav"> <li><a>home</a></li> <li><a>about</a></li></ul><script src="jquery.js"></script><script>jQuery(ul).attr(id, nav);jQuery(#nav li);</script></body></html>
  17. 17. <!DOCTYPE html><html><body><ul id="nav"> <li class="item"><a>home</a></li> <li class="item"><a>about</a></li></ul><script src="jquery.js"></script><script>jQuery(ul).attr(id, nav);jQuery(#nav li).addClass(item);</script></body></html>
  18. 18. <!DOCTYPE html><html><body><ul id="nav"> <li class="item"><a>home</a></li> <li class="item"><a>about</a></li></ul><script src="jquery.js"></script><script>jQuery(ul).attr(id, nav);jQuery(#nav li).addClass(item);jQuery(#nav a);</script></body></html>
  19. 19. <!DOCTYPE html><html><body><ul id="nav"> <li class="item"><a>home</a></li> <li class="item"><a>about</a></li></ul><script src="jquery.js"></script><script>jQuery(ul).attr(id, nav);jQuery(#nav li).addClass(item);jQuery(#nav a).each(function(){ jQuery(this);});</script></body></html>
  20. 20. <!DOCTYPE html><html><body><ul id="nav"> <li class="item"><a>home</a></li> <li class="item"><a>about</a></li></ul><script src="jquery.js"></script><script>jQuery(ul).attr(id, nav);jQuery(#nav li).addClass(item);jQuery(#nav a).each(function(){ jQuery(this);});</script></body></html>
  21. 21. <!DOCTYPE html><html><body><ul id="nav"> <li class="item"><a href="/home">home</a></li> <li class="item"><a href="/about">about</a></li></ul><script src="jquery.js"></script><script>jQuery(ul).attr(id, nav);jQuery(#nav li).addClass(item);jQuery(#nav a).each(function(){ jQuery(this).attr(href, / + jQuery(this).text());});</script></body></html>
  22. 22. <!DOCTYPE html><html><body><ul id="nav"> <li class="item"><a href="/home">home</a></li> <li class="item"><a href="/about">about</a></li></ul><script src="jquery.js"></script><script>$(ul).attr(id, nav);$(#nav li).addClass(item);$(#nav a).each(function(){ $(this).attr(href, / + $(this).text());});</script></body></html>
  23. 23. <!DOCTYPE html><html><body><ul id="nav"> <li class="item"><a href="/home">home</a></li> <li class="item"><a href="/about">about</a></li></ul><script src="jquery.js"></script><script>$(ul).attr(id, nav);$(#nav li).addClass(item).find(a).each(function(){ $ (this).attr(href, / + $ (this).text());});</script></body></html>
  24. 24. Chaining (Acorrentar)$("p").addClass("especial") .css("color", "red") .append(“Olá Mundo!") .show("slow");• A maioria dos métodos são chainable (possuem capacidade de se acorrentarem) • Isso acontece porque, por padronização, todos os métodos devem retornar o próprio elemento. • A mesma padronização é aconselhada aos programadores ao criarem plug-ins.
  25. 25. Vantagens• Utiliza seletores CSS para localizar elementos da estrutura de marcação HTML da página;• Possui arquitetura compatível com instalação de plug-ins e extensões em geral;• Possuir um repositório com inúmeros plug-ins disponíveis;• É indiferente às inconsistências de renderização entre navegadores;• Não há necessidade de construção de loops para localização de elementos no documento;• Admite programação encadeada, ou seja, cada método retorna um objeto;• É extensível, pois admite criação e inserção de novas funcionalidades;• Possui uma ótima documentação;• Leve, a versão compactada (e com Gzip) tem 90kb de tamanho;• Não obstrutivo
  26. 26. Desvantagens• Aplicações precisam de um servidor para criar e gerenciar sessões;• Aplicações precisam de outro aplicativo para fornecer os dados, escrito em outra linguagem;• Em computadores robustos, aplicações maiores podem se tornar mais lentas;• É difícil proteger o código-fonte;• Pode ser difícil depurar, especialmente se houverem conflitos entre scripts;
  27. 27. FrozenSpots• Construtor $ (cifrão, dólar) – referência para o objeto jQuery; – é responsável por identificar o elemento passado e chamar o respectivo método; – Qualquer outro “nome” pode ser usado para representar o objeto, sendo o $ (cifrão, dólar) o default.• Todas as funcionalidades do jQuery possuem comportamento default.
  28. 28. HotSpots• Os plugins (componentes) que podem ser acoplados junto ao jQuery.• O Complemento jQuery UI – Oferece funcionalidades de interação com o usuário.• Todos os métodos possuem parâmetros para modificar ou configurar sua funcionalidade.
  29. 29. Quem usa jQuery? • Atualmente mais de 19 milhões de sites utilizam jQuery;Fonte: http://trendspro.builtwith.com
  30. 30. OBRIGADO! Bruno Cunha E-mail: contato@brunocunha.net.br Portfólio: http://brunocunha.net.br Twitter http://twitter.com/obrunocunha

×