jQuery

1,460 views
1,341 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,460
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
33
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×