Your SlideShare is downloading. ×
Jquery - Apresentação e aplicação prática
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Jquery - Apresentação e aplicação prática

1,358
views

Published on

Uma apresen

Uma apresen


0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,358
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
30
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. jQuery David R. Lopes J. Teles Maciel Jovan Ângelo Paulo A . França
  • 2. Introdução
    • Framework Javascript ;
    • 3. Nasceu em 2005;
    • 4. Licença: MIT ou GPL ;
    • 5. Não é o único framework javascript;
    Tema: Write Less, Do More
  • 6. Para que serve:
    • Resolução da incompatibilidade entre os navegadores.
    • 7. Redução de código.
    • 8. Reutilização do código através de plugins.
    • 9. Utilização de uma vasta quantidade de plugins criados por outros desenvolvedores.
    • 10. Trabalha com AJAX e DOM .
    • 11. Implementação segura de recursos do CSS1 , CSS2 e CSS3 .
    Texto integralmente retirado de http://pt.wikipedia.org/wiki/JQuery
  • 12. Quanto "pesa" um framework?
    • O framework Jquery na sua versão 1.4 (minificado) pesa 24kb !
    • 13. Para seu projeto você pode baixar o Jquery em : www.jquery.com ou importar a biblioteca diretamente do Google, deste modo:
    <script src= &quot; http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js &quot; type= &quot; text/javascript &quot; ></script>
  • 14. O que você precisa saber pra começar?
    • Você tem que ter o DOM (carregado) pra usar jQuery;
    • 15. XHTML e Javascript ;
    • 16. Seletores CSS2 e CSS3 (já são previstos no jQuery) podem te ajudar!
    jQuery é fácil: A biblioteca se baseia na chamada de apenas uma função e tem 24kb. Vamos por a mão na massa?
  • 17. Esquentando com “Hello World”
    • Baixe a mais nova versão do JQuery, atualmente 1.4.2;
    • 18. Crie um arquivo teste.html;
    • 19. Coloque o jquery-1.4.2.js no mesmo diretório do teste.html e importe a biblioteca;
  • 20. Esquentando com “Hello World”
  • 21. Esquentando com “Hello World”
  • 22. Explicando o código $( &quot;a&quot; ) é um Selector do jQuery que seleciona elementos &quot;a&quot; O $ é como se assemelha a uma &quot;classe&quot; em jQuery $() portanto &quot;instancia&quot; um objeto jQuery .click() é invocado quando ocorre um click do mouse em um elemento selecionado; O código sem jQuery: Separação de JS e HTML ! Eliminação de código redundante! <3 jQuery.
  • 23. Agora cumpriremos uma missão em jQuery
  • 24. Baixamos o site fatecsjc.edu.br usando wget e iremos aplicar alterações nele via jQuery para que mais meninas se interessem por nossa faculdade: Eis o site baixado: Missão 1: Mudar o site da fatecsjc
  • 25. Missão 1: Mudar o site da fatecsjc + = ... alteracoes .js
  • 26. Missão cumprida. Vamos ver o novo leiaute
  • 27. Novo leiaute
  • 28. Explicando o código.
  • 29. Jquery é mais que manipulação do DOM Jquery tem diversas outras potencialidades:
    • Ajax simplificado:
    • 30. Métodos $.ajax , $.getJSON , $.get e etc...
    • 31. Garantia de funcionar nos mais diversos navegadores;
    • 32. Documentação extensa e atualizada;
    • 33. Comunidade forte e muitos entusiastas;
    • 34. Utilizado em muitos sites famosos como Google Search, IBM.com , Mozzila.com , etc..;
    • 35. Validação de formulários no cliente;
    • 36. Muitos, muitos e muitos plugins.
  • 37. Plugins ver jquerylist.com
  • 38. Leitura recomendada
    • Melhore seu código jQuery (25 dicas) [EN]
    • 39. http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx
    • 40. 08 plugins jQuery que usam apis da Google(EN):
    • 41. http://www.reynoldsftw.com/2009/03/8-jquery-plugins-that-utilize-google-apis/
    • 42. 31 snippets de jQuery (EN):
    • 43. http://addyosmani.com/blog/31-jquery-snippets/
    • 44. Anatomia de um plugin jQuery
    • 45. http://www.tableless.com.br/anatomia-de-um-plugin-jquery
  • 46. Referências
    • [1]http://docs.jquery.com/Main_Page;
    • 47. [2]http://docs.jquery.com/Sites_Using_jQuery
    • 48. [3]http://jquerylist.com/
    • 49. [4]http://www.tutorialspoint.com/jquery/jquery-quick-guide.htm