Minicurso de jQuery
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Minicurso de jQuery

  • 2,942 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,942
On Slideshare
2,934
From Embeds
8
Number of Embeds
3

Actions

Shares
Downloads
50
Comments
0
Likes
0

Embeds 8

http://www.linkedin.com 5
https://www.linkedin.com 2
http://twitter.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. André Willik Valenti Dextra Sistemas
  • 2.  Biblioteca JavaScript Cross-browser(IE 6.0+, FF 2.0+, Safari 3.0+, Opera 9.0+, Chrome) MUITAS funcionalidades
  • 3.  Manipulação de DOM Animações Utilitários (ex: AJAX) Compatibilidade entre navegadores Etc.
  • 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.  Produtivo Intuitivo Bem documentado Extensível
  • 6.  HTML • <script src=“jquery-1.6.1.min.js”></script> Função jQuery • jQuery(seletor-css).algumMetodo() Atalho: $ • $(seletor-css).algumMetodo()
  • 7.  Modo no conflict • Evita conflito do $ com outras bibliotecas • $.noConflict()
  • 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.  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.  Transformações no documento HTML • Atributos (id, value, class, disabled, style etc.) • Elementos (adicionar, remover, mover, copiar)
  • 11.  Vamos pegar o último exemplo: • $(input#cpf) Ou simplesmente... • $(#cpf)
  • 12.  Recuperar atributo: • $(#cpf).attr(id)  cpf Alterar atributo: • $(#cpf).attr(id, novo-valor) Remover atributo: • $(#cpf).removeAttr(disabled)
  • 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.  Alterar estilo: • $(#cpf). attr(style, font-weigth: bold) Atalho: • $(#cpf).css(font-weight, bold) • $(#cpf).css(font-weight)  bold
  • 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.  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.  Tentativa 1.0: css • if ($(#cpf).css(display) == none) { $(#cpf).css(display, inline); // ou block? } else { $(#cpf).css(display, none); }
  • 18.  Tentativa 2.0: add/removeClass • .escondido { display: none; } • if ($(#cpf).hasClass(escondido)) { $(#cpf).removeClass(escondido); } else { $(#cpf).addClass(escondido); }
  • 19.  Tentativa 2.1: toggleClass • .escondido { display: none; } • $(#cpf).toggleClass(escondido);
  • 20.  Atalhos: • $(#cpf).hide() • $(#cpf).show()E por que não... • $(#cpf).toggle() • Aí sim !
  • 21.  Vai recuperar/alterar valor? • val Vai recuperar/alterar estilo? • css Vai recuperar/alterar atributos gerais? • attr Vai remover atributos? • removeAttr
  • 22.  Quer checar existência de classe? • hasClass Quer adicionar classe? • addClass Quer remover classe? • removeClass Quer alternar classe? • toggleClass
  • 23.  Exibir elemento? • show Ocultar elemento? • hide Alternar exibição de elemento? • toggle
  • 24.  Seletores Um ou muitos Atributos • attr • val • class • hide/show/toggle
  • 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.  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.  remove • Remove elementos do DOM • $(table).remove() remove / hide • hide() apenas esconde, usando display: none • remove() efetivamente remove do DOM
  • 28.  prepend / append remove / hide
  • 29.  Métodos • fadeOut, fadeIn, fadeToggle • slideUp, slideDown, slideToggle • toggle Tempo em milissegundos, fast ou slow • fast  200ms • slow  600ms
  • 30.  fade slide toggle
  • 31.  Pseudoclasses CSS • :first / :last • :odd / :even • :checked • :enabled / :disabled • :has(seletor-filhos) • :contains(string-conteúdo) • Etc.
  • 32.  add • $(table#resultados).add(div#topo).remove() Atalho • $(table#resultados, div#topo).remove()
  • 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.  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.  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.  bind • $(input:text).bind(onchange, function() { alert(Elemento alterado: + this); }) Atalho • $(input:text).change(function() {...});
  • 37.  Atalhos • onchange  change • onclick  click • onfocus  focus • onblur  blur • onselect  select • onsubmit  submit • ...
  • 38.  ready • Disparado quando elemento foi carregado • $(div#principal).ready(function() {...}) • $(document).ready(function() {...}) Atalho • $(function() {...}) // Aplica ao document
  • 39.  Vantagens • Cross-browser • Acumula eventos • Permite desativá-los facilmente
  • 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.  $.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.  AJAX • $.ajax • $.get • $.post
  • 43.  $.ajax(url [, settings]) $.ajax(/usuarios, { type: PUT, data: { nome: Joao, idade: 20}, success: function() {...}, error: function() {...}; });
  • 44.  $.ajax(url [, settings]) $.ajax(/usuarios, { type: PUT, data: { nome: Joao, idade: 20}, statusCode: { 200: function() { alert(OK); }, 404 : function() { ... } } });
  • 45.  $.get(url [, data] [, success]) $.get(usuarios/index.html, function(result) { alert(result); });
  • 46.  $.post(url [, data] [, success]) var joao = { nome: Joao, idade: 20 }; $.post(usuarios/new, joao, funcaoTratarAjax);
  • 47.  .each(function(index, element) { }) • $(input.valores).each(function(i, el) { alert(Índice: + i + , elemento: + el); })
  • 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.  live • Associa evento a elemento(s) ainda não existente(s) • $(button).live(click, function() { ... })
  • 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.  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.  Implementar em jQuery: • Seleção múltipla • Remoção • Animação • Zebrado
  • 53.  http://jquery.com • Informações gerais • Download • Plugins http://api.jquery.com • Informações detalhadas sobre API • Destaque para busca e categorização