Jquery - Apresentação e aplicação prática
Transferir como odp, pdf1 gostou720 visualizações
O documento apresenta uma introdução ao framework jQuery: (1) Surgiu em 2005 com licença MIT ou GPL, (2) tem como objetivo simplificar o desenvolvimento front-end e a interação com o DOM, (3) possui uma vasta quantidade de plugins criados pela comunidade.
Jquery - Apresentação e aplicação prática
- 1. jQuery David R. Lopes J. Teles Maciel Jovan Ângelo Paulo A . França
- 2. Introdução Framework Javascript ;
- 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.
- 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= " http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js " type= " text/javascript " ></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 $( "a" ) é um Selector do jQuery que seleciona elementos "a" O $ é como se assemelha a uma "classe" em jQuery $() portanto "instancia" 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
- 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]
- 40. 08 plugins jQuery que usam apis da Google(EN):
- 42. 31 snippets de jQuery (EN):
- 44. Anatomia de um plugin jQuery