Este documento apresenta uma introdução ao jQuery, incluindo o que é jQuery, por que e para que usá-lo, como usá-lo, seletores, efeitos, Ajax e plugins. O documento também fornece detalhes sobre o palestrante, um programador back-end com experiência em empresas, startups e órgãos governamentais.

2. Quem é esse cara?
 Formado em Tecnologia de Sistemas pra Internet.
 Programa desde os 13 anos.
 Programador back-end.
 Já trabalhou em empresas, órgãos governamentais
e startups como: INCRA, 3Up Tecnologia, Onsee
Digital Signage.
 Atualmente é CEO/Founder da Stoodos.

3. O que vamos ver?
 O que é jQuery?
 Porque usá-lo
 Para que usá-lo?
 Como usa-lo?
 Seletores.
 jQuery e o CSS.
 Efeitos em jQuery.
 Ajax com jQuery.
Bônus:
 Principais plugins do jQuery.

4. O que é jQuery?
 Criada por John Resig.
 Biblioteca JavaScript.
 Uma forma simples de escrever códigos
JavaScript.
 Free – MIT e GPL
 Conformidade com os padrões web.
 www.jquery.com

5. Por que usá-lo?
 JavaScript:
 jQuery

6. Para que usá-lo
 Adicionar efeitos visuais e animações.
 Acessar e manipular o HTML.
 Implementar códigos Ajax.
 Prover interatividade.
 Alterar conteúdos.
 Compatibilidade com navegadores.
 Simplificar tarefas JavaScript.

7. Como usá-lo?
 Baixar o jQuery em www.jquery.com
 Incluir o arquivo .js em seu projeto.
 Chamar o jQuery no cabeçalho do HTML
Ex.:
 Programar em Jquery.

8. Alguns adendos
 Construtor $() ou jQuery().
 Encadeamento:
Ex.:

9. Seletores
 Seletores CSS 1-3 funcionam em jQuery.
 O jQuery possui alguns seletores próprios.
 http://api.jquery.com/category/selectors/
Ex. de seletores CSS:
Ex. de seletores próprios:

10. Eventos
 Mesmos do JavaScript.
 blur(), change(), click(), dbclick(), focus(),
hover(), keydown(), keypress(), keyup(), load(),
select(), submit() …
 http://api.jquery.com/category/events/
Ex.:

11. jQuery e o CSS.
 Muito simples manipular CSS por jQuery.
Ex.:

12. Efeitos em jQuery.
 Métodos que possibilitam a criação de efeitos
customizados.
 Métodos com efeitos nativos.

13. Efeitos em jQuery.
 animate() - Criar animações personalizadas.
Ex.:

14. Efeitos em jQuery.
 delay() - Seta um tempo de espera entre
execuções.
Ex.:
 fadeIn(), fadeOut(), fadeToggle() – Aparecer e
desaparecer.
Ex.:

15. Efeitos em jQuery.
 hide(), show(), toggle()
Ex.:
 slideDown(), slideUp(), slideToggle()
Ex.:

16. Ajax com jQuery.
 Muito, muito, mas muito mais simples mesmo
que JavaScript puro.
 Muito mais organizado que em JavaScript puro.

17. Ajax com jQuery.
 load() – Lê dados servidor e os carrega no
elemento HTML selecionado.
Ex.:
 ajax() – Realiza requisições ajax.
Ex.:

18. Plugins do jQuery – O que são?
 Códigos jQuery para ajudar o desenvolvedor a
fazer algo (validar formulários, upload de
arquivos..).
 Vantagem de ter muita coisa boa já
implementada.
 Encurta o tempo de desenvolvimento.

19. Como usar um plugin?
 Download dos arquivos do plugin (imagens, .js,
.css, .swf...)
 Chamar os arquivos necessários na página (.js,
.css …)
 Utilizar o plugin.

20. Bons plugins jQuery
 Validate – Validar formulários
 Fancybox – Lightbox genérico
 jQuery UI – Interações com o usuário
 MeioMask – Máscaras (CPF, Telefone ...)

21. Contatos
 @tiagobutzke
 tiago@stoodos.com