Este documento apresenta uma introdução ao jQuery, uma biblioteca JavaScript que simplifica manipulação de elementos HTML, eventos, animações e Ajax. Explica o que é jQuery, como funciona seu ciclo de trabalho semelhante ao CSS, como baixar e incluir o arquivo .js, usar seletores e funções jQuery para modificar conteúdo, estilos e atributos. Também mostra exemplos de efeitos, animações, manipulação de formulários e plugins úteis.

1. Pacote Web
Desenvolvendo com Padrões Web
Módulo 3 - Introdução ao jQuery
Guilherme Cavalcanti
contato@guilhermecavalcanti.com
@guiocavalcanti

2. O que é jQuery
Definição oficial
jQuery is a fast and concise JavaScript Library that
simplifies HTML document traversing, event handling,
animating, and Ajax interactions for rapid web
development. jQuery is designed to change the way that
you write JavaScript.
Na verdade é apenas um conjunto de funções em
JavaScript que facilitam as coisas para você

3. Ciclo de trabalho (lembra do CSS?)
CSS jQuery
Apontamos para um Apontamos para um
elemento elemento
Definimos
propriedades Definimos
1. Ações,
2. Propriedades,
3. Animações
4. Ajax...

4. Começando
1. Baixar .js em http://jquery.com/
2. Criar um documento HTML e incluir o .js
3. Usar seletores e funções

5. Objeto jQuery
Objeto que contém as funções do jQuery
Pode ser instanciado pelo nome jquery
Ou pelo "apelido" $
MUITAS funções

6. Seletores
Iguais ao do CSS
E mais alguns
Filhos imediatos
Algum atributo
Ímpares/Pares

7. Exercitando seletores 1
Deixar somente elementos pares azul

8. Exercitando seletores 3
Deixar somente os input do tipo text do form de
cadastro com o fundo azul

9. Funções úteis
$.val()
Set e get do valor do atributo value=
Usado em inputs
$.html()
Set e get do conteúdo HTML de uma tag
$.remove()
Apaga o elemento
$.hide()
Esconde o elemento
$.show()
Mostra o elemento
$.toggle()
Alterna entre mostrar e esconder o elemento

10. Eventos
Click

11. Eventos
toggle

12. Modificando CSS

13. Modificando conteúdo (texto, HTML)

14. Modificando atributos e seus valores

15. Efeitos
Hide e show (slow, fast...)
FadeOut, FadeIn

16. Efeitos - callback
É possível chamar uma função depois que o efeito
acontece

17. Animações

18. Formulários
Evento submit

19. Plugins interessantes
Menu
http://users.tpg.com.au/j_birch/plugins/superfish/
Abas, accordion e outros widgets
http://jqueryui.com/home