jQuery
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

jQuery

on

  • 1,277 views

 

Statistics

Views

Total Views
1,277
Views on SlideShare
1,277
Embed Views
0

Actions

Likes
0
Downloads
21
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery Presentation Transcript

  • 1. Por Bruno Cunha
  • 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. 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. 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. Compatibilidade nos Navegadores• Firefox 2.0+• Internet Explorer 6+• Safari 3+• Opera 10.6+• Chrome 8+
  • 6. SimplicidadeJQUERY NA PRÁTICA
  • 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. Muda o jeito de escrever JavaScript$(table tr:nth-child(odd)).addClass(odd);
  • 9. Filosofia jQueryEncontrar Coisas Fazer Algo
  • 10. Filosofia jQuery$(Encontrar Coisas) .Fazer Algo();
  • 11. Exemplos$("div").hide(); //efeito$("button").remove(); //DOM$("form").submit(); //evento$("p").addClass("especial"); //DOM$("span").show("fast"); //animação
  • 12. <!DOCTYPE html><html><body><ul> <li><a>home</a></li> <li><a>about</a></li></ul></body></html>
  • 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. <!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. <!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. <!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. <!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. <!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. <!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. <!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. <!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. <!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. <!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. 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. 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. 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. 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. 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. Quem usa jQuery? • Atualmente mais de 19 milhões de sites utilizam jQuery;Fonte: http://trendspro.builtwith.com
  • 30. OBRIGADO! Bruno Cunha E-mail: contato@brunocunha.net.br Portfólio: http://brunocunha.net.br Twitter http://twitter.com/obrunocunha