Minicurso de jQuery

2,585 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,585
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
67
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Minicurso de jQuery

  1. 1. André Willik Valenti Dextra Sistemas
  2. 2.  Biblioteca JavaScript Cross-browser(IE 6.0+, FF 2.0+, Safari 3.0+, Opera 9.0+, Chrome) MUITAS funcionalidades
  3. 3.  Manipulação de DOM Animações Utilitários (ex: AJAX) Compatibilidade entre navegadores Etc.
  4. 4.  Simplicidade • Tudo numa linha de código Selecionar e manipular coisas • “Pegue tais elementos e faça tal coisa” Um ou muitos: tanto faz • Se funciona pra um, funciona pra muitos Diga exatamente o que quer fazer • Foco em “o que”, não em “como”
  5. 5.  Produtivo Intuitivo Bem documentado Extensível
  6. 6.  HTML • <script src=“jquery-1.6.1.min.js”></script> Função jQuery • jQuery(seletor-css).algumMetodo() Atalho: $ • $(seletor-css).algumMetodo()
  7. 7.  Modo no conflict • Evita conflito do $ com outras bibliotecas • $.noConflict()
  8. 8.  HTML Nome: <input id="nome" /> CPF: <input id="cpf" class="numerico" /> Idade: <input id="idade" class="numerico" /> Cidade: <input id="cidade" /> jQuery • $(input)  4 elementos • $(input.numerico)  2 elementos • $(input#cpf)  1 elemento
  9. 9.  Um ou muitos • $(input#cpf).remove()  Remove 1 elemento • $(input.numerico).remove()  Remove 2 elementos • $(input).remove()  Remove 4 elementos • Se funciona pra um, funciona pra muitos • (alguns métodos operam somente em um mesmo)
  10. 10.  Transformações no documento HTML • Atributos (id, value, class, disabled, style etc.) • Elementos (adicionar, remover, mover, copiar)
  11. 11.  Vamos pegar o último exemplo: • $(input#cpf) Ou simplesmente... • $(#cpf)
  12. 12.  Recuperar atributo: • $(#cpf).attr(id)  cpf Alterar atributo: • $(#cpf).attr(id, novo-valor) Remover atributo: • $(#cpf).removeAttr(disabled)
  13. 13.  Recuperar/alterar atributo value: • $(#cpf).attr(value)  valor digitado • $(#cpf).attr(value, 123.456.789-00) Atalho: • $(#cpf).val()  valor digitado • $(#cpf).val(123.456.789-00)
  14. 14.  Alterar estilo: • $(#cpf). attr(style, font-weigth: bold) Atalho: • $(#cpf).css(font-weight, bold) • $(#cpf).css(font-weight)  bold
  15. 15.  Recuperar/alterar classe(s) : • $(#cpf).attr(class)  numerico • $(#cpf).attr(class, campo-cpf) Atalhos: • $(#cpf).hasClass(numerico) • $(#cpf).addClass(campo-cpf) • $(#cpf).removeClass(campo-cpf)
  16. 16.  Esconder/exibir elemento: • $(#cpf).css(display, none) • $(#cpf).css(display, inline) // ou seria block?E pra alternar a exibição? • Tem que ver se está sendo exibido • Se está, esconde • Se não está, exibe
  17. 17.  Tentativa 1.0: css • if ($(#cpf).css(display) == none) { $(#cpf).css(display, inline); // ou block? } else { $(#cpf).css(display, none); }
  18. 18.  Tentativa 2.0: add/removeClass • .escondido { display: none; } • if ($(#cpf).hasClass(escondido)) { $(#cpf).removeClass(escondido); } else { $(#cpf).addClass(escondido); }
  19. 19.  Tentativa 2.1: toggleClass • .escondido { display: none; } • $(#cpf).toggleClass(escondido);
  20. 20.  Atalhos: • $(#cpf).hide() • $(#cpf).show()E por que não... • $(#cpf).toggle() • Aí sim !
  21. 21.  Vai recuperar/alterar valor? • val Vai recuperar/alterar estilo? • css Vai recuperar/alterar atributos gerais? • attr Vai remover atributos? • removeAttr
  22. 22.  Quer checar existência de classe? • hasClass Quer adicionar classe? • addClass Quer remover classe? • removeClass Quer alternar classe? • toggleClass
  23. 23.  Exibir elemento? • show Ocultar elemento? • hide Alternar exibição de elemento? • toggle
  24. 24.  Seletores Um ou muitos Atributos • attr • val • class • hide/show/toggle
  25. 25.  Métodos para: • Adicionar elementos HTML ou texto • Remover elementos HTML Exemplos de aplicação: • Alterar uma tabela • Criar novas seções na página
  26. 26.  prepend / append • Acrescentam conteúdo a um elemento • Exemplo:  <table><tr><td> 2 </td> <td> 3 </td></tr></table>  $(table tr).prepend(<td> 1 </td>)  $(table tr).append(<td> 4 </td>)
  27. 27.  remove • Remove elementos do DOM • $(table).remove() remove / hide • hide() apenas esconde, usando display: none • remove() efetivamente remove do DOM
  28. 28.  prepend / append remove / hide
  29. 29.  Métodos • fadeOut, fadeIn, fadeToggle • slideUp, slideDown, slideToggle • toggle Tempo em milissegundos, fast ou slow • fast  200ms • slow  600ms
  30. 30.  fade slide toggle
  31. 31.  Pseudoclasses CSS • :first / :last • :odd / :even • :checked • :enabled / :disabled • :has(seletor-filhos) • :contains(string-conteúdo) • Etc.
  32. 32.  add • $(table#resultados).add(div#topo).remove() Atalho • $(table#resultados, div#topo).remove()
  33. 33.  children • $(table).children() // thead e tbody • $(table tbody).children() // trs • $(table tbody).children(tr.selecionado) find • $(table).find(.selecionado) • $(div#minha-div).find(span#meu-span)
  34. 34.  parent • Pai (elemento imediatamente acima) parents • Todos os ancestrais (pai, avô etc.) siblings • Irmãos E dá para filtrar em todos eles! • $(span).parent(.selecionado) • $(span).parents(fieldset) • $(table tr td#meu-td).siblings(.inativo)
  35. 35.  closest • Próprio elemento ou ancestral mais próximo • $(div#minha-div).closest(.minha-classe) filter • Filtra um objeto jQuery • Similar à filtragem com children, parents etc. • $(div, p, span, br).filter(.remover).remove()
  36. 36.  bind • $(input:text).bind(onchange, function() { alert(Elemento alterado: + this); }) Atalho • $(input:text).change(function() {...});
  37. 37.  Atalhos • onchange  change • onclick  click • onfocus  focus • onblur  blur • onselect  select • onsubmit  submit • ...
  38. 38.  ready • Disparado quando elemento foi carregado • $(div#principal).ready(function() {...}) • $(document).ready(function() {...}) Atalho • $(function() {...}) // Aplica ao document
  39. 39.  Vantagens • Cross-browser • Acumula eventos • Permite desativá-los facilmente
  40. 40.  Com jQuery: • $(input#meu-input).change(funcao1); • $(input#meu-input).change(funcao2); • $(input#meu-input).change(funcao3); Cansou dos eventos? • $(input#meu-input).unbind(); • Afeta apenas os eventos criados com jQuery
  41. 41.  $.trim • Remove espaços sobressalentes (cross- browser) $.browser • Nome e versão do navegador $.inArray(elemento, vetor) • Procura posição do elemento no vetor
  42. 42.  AJAX • $.ajax • $.get • $.post
  43. 43.  $.ajax(url [, settings]) $.ajax(/usuarios, { type: PUT, data: { nome: Joao, idade: 20}, success: function() {...}, error: function() {...}; });
  44. 44.  $.ajax(url [, settings]) $.ajax(/usuarios, { type: PUT, data: { nome: Joao, idade: 20}, statusCode: { 200: function() { alert(OK); }, 404 : function() { ... } } });
  45. 45.  $.get(url [, data] [, success]) $.get(usuarios/index.html, function(result) { alert(result); });
  46. 46.  $.post(url [, data] [, success]) var joao = { nome: Joao, idade: 20 }; $.post(usuarios/new, joao, funcaoTratarAjax);
  47. 47.  .each(function(index, element) { }) • $(input.valores).each(function(i, el) { alert(Índice: + i + , elemento: + el); })
  48. 48.  first / last • Vetor contendo somente primeiro ou último before / after • Insere conteúdo antes ou depois de um ou mais elementos clone • Cria cópia profunda de elemento(s)
  49. 49.  live • Associa evento a elemento(s) ainda não existente(s) • $(button).live(click, function() { ... })
  50. 50.  wrap • Envolve elemento(s) • $(span).wrap(<p>) wrapInner • Envolve conteúdo de elemento(s) • $(td).wrapInner(<span class=“azul”>) unwrap • Remove pai preservando filho • $(span).unwrap()
  51. 51.  html • Recupera / altera conteúdo HTML • $(#elemento).html() • $(#elemento).html(<p>um paragrafo</p>) text • Recupera / altera texto • $(#elemento).text() • $(#elemento).text(<p>menor p maior</p>)
  52. 52.  Implementar em jQuery: • Seleção múltipla • Remoção • Animação • Zebrado
  53. 53.  http://jquery.com • Informações gerais • Download • Plugins http://api.jquery.com • Informações detalhadas sobre API • Destaque para busca e categorização

×