O documento apresenta uma oficina sobre jQuery, abordando o que é jQuery, por que é tão usado, quem o utiliza, do que é capaz, exemplos de seletores, eventos e validação com jQuery. Apresenta também o jQuery UI e exemplos de implementações possíveis.

1. 1
Campus Charqueadas
Oficina de jQuery
Cleber Schroeder Fonseca

2. 2
Campus Charqueadas
O QUE É O JQUERY?

3. 3
Campus Charqueadas
jQuery
Site do jQuery é http://www.jquery.com

4. 4
Campus Charqueadas
POR QUE É TÃO USADO E EFICIENTE?

5. 5
Campus Charqueadas
QUEM UTILIZA O JQUERY?

6. 6
Campus Charqueadas
Quem utiliza o jQuery

7. 7
Campus Charqueadas
DO QUE O JQUERY É CAPAZ?

8. 8
Campus Charqueadas
EXEMPLOS
https://github.com/clebersfonseca/Oficina-JQuery

9. 9
Campus Charqueadas
O QUE É O $()?

10. 10
Campus Charqueadas
$()
// JavaScript "puro"
var cabecalho = document.getElementById("cabecalho");
if (cabecalho.attachEvent) {
cabecalho.attachEvent("onclick", function (event) {
alert("Você clicou no cabeçalho, usuário do IE!");
});
} else if (cabecalho.addEventListener) {
cabecalho.addEventListener("click", function (event) {
alert("Você clicou no cabeçalho!")
}, false);
}

11. 11
Campus Charqueadas
$()
// jQuery
$("#cabecalho").click(function (event) {
alert("Você clicou no cabeçalho!");
});

12. 12
Campus Charqueadas
SELETORES NO JQUERY?

13. 13
Campus Charqueadas
Seletores
• $(“#id”)
• $(“.classe”)
• $(“p”)
• $(“ul.classe li”)
• $(“a:first”)
• $(“img[alt=‘home’]”)

14. 14
Campus Charqueadas
EXEMPLOS
https://github.com/clebersfonseca/Oficina-JQuery

15. 15
Campus Charqueadas
EVENTOS

16. 16
Campus Charqueadas
Eventos
• .click()
• .dblclick()
• .mouseenter()
• .keypress()
• .keyup()
• .change()

17. 17
Campus Charqueadas
EXEMPLOS
https://github.com/clebersfonseca/Oficina-JQuery

18. 18
Campus Charqueadas
jQuery Validation

19. 19
Campus Charqueadas
O QUE É O JQUERY VALIDATION?

20. 20
Campus Charqueadas
jQuery Validation
• Site do jQuery Validation http://jqueryvalidation.org

21. 21
Campus Charqueadas
MÉTODOS DE AVALIAÇÃO

22. 22
Campus Charqueadas
Métodos de avaliação
• required
• remote
• minlength
• maxlength
• rangelength
• min
• max
• range
• email

23. 23
Campus Charqueadas
Métodos de avaliação
• url
• date
• dateISO
• number
• digits
• creditcard
• equalTo
• accept
• extension

24. 24
Campus Charqueadas
Métodos de avaliação
• phoneUS
• require_from_group

25. 25
Campus Charqueadas
Métodos de avaliação
• Outros podem ser criados por qualquer pessoa.

26. 26
Campus Charqueadas
jQuery UI

27. 27
Campus Charqueadas
O QUE É O JQUERY UI?

28. 28
Campus Charqueadas
jQuery UI
• Site do jQuery UI é http://jqueryui.com

29. 29
Campus Charqueadas
O QUE É POSSÍVEL FAZER COM
JQUERY UI?

30. 30
Campus Charqueadas
EXEMPLOS
https://github.com/clebersfonseca/Oficina-JQuery

31. 31
Campus Charqueadas
MÃOS A OBRA

32. 32
Campus Charqueadas

33. 33
Campus Charqueadas
Hello World
• Crie um documento html com um botão que ao ser
clicado exiba um alerta dizendo Hello World.

34. 34
Campus Charqueadas
Abas
• Crie uma página com 3 abas, cada uma das deve conter
um contúdo estático.

35. 35
Campus Charqueadas
Caixa de dialogo
• Crie uma página onde contenha um botão que ao ser
clicado seja exibida uma caixa de dialogo com
informação pertinentes.

36. 36
Campus Charqueadas
Formulário
• Cire um formulário de cadastro de pessoas com:
– Nome
– Email
– Senha
– Confirmação de senha
– Data de nascimento
– Telefones (residencial, comercial e celular) onde pelo menos um
deles é obrigatório
– Rua
– Número
– Complemento
– Cep
• validando todos os campos.
• Os campos são de preenchimento obrigatório