Oficina jQuery

433 visualizações

Publicada em

Material utilizado na oficina de jQuery.

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
433
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
8
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Oficina jQuery

  1. 1. 1 Campus Charqueadas Oficina de jQuery Cleber Schroeder Fonseca
  2. 2. 2 Campus Charqueadas O QUE É O JQUERY?
  3. 3. 3 Campus Charqueadas jQuery Site do jQuery é http://www.jquery.com
  4. 4. 4 Campus Charqueadas POR QUE É TÃO USADO E EFICIENTE?
  5. 5. 5 Campus Charqueadas QUEM UTILIZA O JQUERY?
  6. 6. 6 Campus Charqueadas Quem utiliza o jQuery
  7. 7. 7 Campus Charqueadas DO QUE O JQUERY É CAPAZ?
  8. 8. 8 Campus Charqueadas EXEMPLOS https://github.com/clebersfonseca/Oficina-JQuery
  9. 9. 9 Campus Charqueadas O QUE É O $()?
  10. 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. 11 Campus Charqueadas $() // jQuery $("#cabecalho").click(function (event) { alert("Você clicou no cabeçalho!"); });
  12. 12. 12 Campus Charqueadas SELETORES NO JQUERY?
  13. 13. 13 Campus Charqueadas Seletores • $(“#id”) • $(“.classe”) • $(“p”) • $(“ul.classe li”) • $(“a:first”) • $(“img[alt=‘home’]”)
  14. 14. 14 Campus Charqueadas EXEMPLOS https://github.com/clebersfonseca/Oficina-JQuery
  15. 15. 15 Campus Charqueadas EVENTOS
  16. 16. 16 Campus Charqueadas Eventos • .click() • .dblclick() • .mouseenter() • .keypress() • .keyup() • .change()
  17. 17. 17 Campus Charqueadas EXEMPLOS https://github.com/clebersfonseca/Oficina-JQuery
  18. 18. 18 Campus Charqueadas jQuery Validation
  19. 19. 19 Campus Charqueadas O QUE É O JQUERY VALIDATION?
  20. 20. 20 Campus Charqueadas jQuery Validation •  Site do jQuery Validation http://jqueryvalidation.org
  21. 21. 21 Campus Charqueadas MÉTODOS DE AVALIAÇÃO
  22. 22. 22 Campus Charqueadas Métodos de avaliação •  required •  remote •  minlength •  maxlength •  rangelength •  min •  max •  range •  email
  23. 23. 23 Campus Charqueadas Métodos de avaliação •  url •  date •  dateISO •  number •  digits •  creditcard •  equalTo •  accept •  extension
  24. 24. 24 Campus Charqueadas Métodos de avaliação •  phoneUS •  require_from_group
  25. 25. 25 Campus Charqueadas Métodos de avaliação •  Outros podem ser criados por qualquer pessoa.
  26. 26. 26 Campus Charqueadas jQuery UI
  27. 27. 27 Campus Charqueadas O QUE É O JQUERY UI?
  28. 28. 28 Campus Charqueadas jQuery UI •  Site do jQuery UI é http://jqueryui.com
  29. 29. 29 Campus Charqueadas O QUE É POSSÍVEL FAZER COM JQUERY UI?
  30. 30. 30 Campus Charqueadas EXEMPLOS https://github.com/clebersfonseca/Oficina-JQuery
  31. 31. 31 Campus Charqueadas MÃOS A OBRA
  32. 32. 32 Campus Charqueadas
  33. 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. 34 Campus Charqueadas Abas •  Crie uma página com 3 abas, cada uma das deve conter um contúdo estático.
  35. 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. 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

×