jQuery

David R. Lopes
J. Teles Maciel
Jovan Ângelo
Paulo A . França
Introdução


 Framework Javascript;
 Nasceu em 2005;

 Licença: MIT ou GPL;

 Não é o único framework javascript;




...
Para que serve:


Resolução da incompatibilidade entre os navegadores.
Redução de código.

Reutilização do código atrav...
Quanto "pesa" um framework?
   O framework Jquery na sua versão 1.4 (minificado) pesa 24kb !

Para seu projeto você pode...
O que você precisa saber pra começar?

 Você tem que ter o DOM (carregado) pra usar jQuery;
 XHTML e Javascript;

 Sele...
Esquentando com “Hello World”



1.Baixe a mais nova versão do JQuery, atualmente 1.4.2;
2.Crie um arquivo teste.html;
3.C...
Esquentando com “Hello World”
Esquentando com “Hello World”
Explicando o código
$("a") é um Selector do jQuery que seleciona elementos "a"
O $ é como se assemelha a uma "classe" em j...
Agora cumpriremos uma missão em jQuery
Missão 1: Mudar o site da fatecsjc


Baixamos o site fatecsjc.edu.br usando wget e iremos
aplicar alterações nele via jQue...
Missão 1: Mudar o site da fatecsjc




                    +               = ...

                        alteracoes.js
Missão cumprida.
Vamos ver o novo leiaute
Novo leiaute
Explicando o código.
Jquery é mais que manipulação do DOM
Jquery tem diversas outras potencialidades:

 Ajax simplificado:
 Métodos $.ajax, $...
Plugins




ver jquerylist.com
Leitura recomendada

   Melhore seu código jQuery (25 dicas) [EN]
    http://www.tvidesign.co.uk/blog/improve-your-jquery...
Referências

   [1]http://docs.jquery.com/Main_Page;
   [2]http://docs.jquery.com/Sites_Using_jQuery
   [3]http://jquer...
Upcoming SlideShare
Loading in …5
×

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

2,555 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
2,555
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
51
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. jQuery David R. Lopes J. Teles Maciel Jovan Ângelo Paulo A . França
  2. 2. Introdução  Framework Javascript;  Nasceu em 2005;  Licença: MIT ou GPL;  Não é o único framework javascript; Tema: Write Less, Do More
  3. 3. Para que serve: Resolução da incompatibilidade entre os navegadores. Redução de código. Reutilização do código através de plugins. Utilização de uma vasta quantidade de plugins criados por outros desenvolvedores. Trabalha com AJAX e DOM. Implementação segura de recursos do CSS1, CSS2 e CSS3. Texto integralmente retirado de http://pt.wikipedia.org/wiki/JQuery
  4. 4. Quanto "pesa" um framework?  O framework Jquery na sua versão 1.4 (minificado) pesa 24kb ! 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>
  5. 5. O que você precisa saber pra começar?  Você tem que ter o DOM (carregado) pra usar jQuery;  XHTML e Javascript;  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?
  6. 6. Esquentando com “Hello World” 1.Baixe a mais nova versão do JQuery, atualmente 1.4.2; 2.Crie um arquivo teste.html; 3.Coloque o jquery-1.4.2.js no mesmo diretório do teste.html e importe a biblioteca;
  7. 7. Esquentando com “Hello World”
  8. 8. Esquentando com “Hello World”
  9. 9. 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.
  10. 10. Agora cumpriremos uma missão em jQuery
  11. 11. Missão 1: Mudar o site da fatecsjc 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:
  12. 12. Missão 1: Mudar o site da fatecsjc + = ... alteracoes.js
  13. 13. Missão cumprida. Vamos ver o novo leiaute
  14. 14. Novo leiaute
  15. 15. Explicando o código.
  16. 16. Jquery é mais que manipulação do DOM Jquery tem diversas outras potencialidades:  Ajax simplificado:  Métodos $.ajax, $.getJSON, $.get e etc...  Garantia de funcionar nos mais diversos navegadores;  Documentação extensa e atualizada;  Comunidade forte e muitos entusiastas;  Utilizado em muitos sites famosos como Google Search, IBM.com, Mozzila.com, etc..;  Validação de formulários no cliente;  Muitos, muitos e muitos plugins.
  17. 17. Plugins ver jquerylist.com
  18. 18. Leitura recomendada  Melhore seu código jQuery (25 dicas) [EN] http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx  08 plugins jQuery que usam apis da Google(EN): http://www.reynoldsftw.com/2009/03/8-jquery-plugins-that-utilize-google-apis/  31 snippets de jQuery (EN): http://addyosmani.com/blog/31-jquery-snippets/  Anatomia de um plugin jQuery http://www.tableless.com.br/anatomia-de-um-plugin-jquery
  19. 19. Referências  [1]http://docs.jquery.com/Main_Page;  [2]http://docs.jquery.com/Sites_Using_jQuery  [3]http://jquerylist.com/  [4]http://www.tutorialspoint.com/jquery/jquery-quick-guide.htm

×