Web 2.0 com Ajax: JQuery/PHP (Aula 04)

1.012 visualizações

Publicada em

Treinamento ministrado para turma iniciante em 2011

Aula 04

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
1.012
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
19
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Web 2.0 com Ajax: JQuery/PHP (Aula 04)

  1. 1. Aula 04Wagner Silva
  2. 2. Agenda  Manipulação de HTML  Manipulação de CSS  Manipulação de EventosWagner Silva # Web 2.0 com Ajax Aula 04
  3. 3. Manipulação de HTML  seleção.html()  $(“p”).html()  $(“p#assinantes”).html(“<b>Conteúdo Bloqueado</b>”)  seleção.text()  $(“p”).text()  $(“p#assinantes”).text(“Conteúdo disponível somente para assintantes!”)Wagner Silva # Web 2.0 com Ajax Aula 04
  4. 4. Manipulação de HTML  seleção.val()  $(“:text[name=email]”).val()  $(“:text[name=email]”).val(“Digite aqui o seu e-mail...”)  seleção.attr()  $(“img”).attr(“src”)  $(“img”).attr(“src”,”imagem.png”)Wagner Silva # Web 2.0 com Ajax Aula 04
  5. 5. Manipulação de HTML  seleção.removeAttr()  $(“table”).removeAttr(“bgcolor”)  seleção.prepend(objeto)  $(“#scraps”).prepend(“<div class=‘user’> <img>Fulano</div><div class=‘msg’>Recado de Fulano</div>”)Wagner Silva # Web 2.0 com Ajax Aula 04
  6. 6. Manipulação de HTML  seleção.append(objeto)  $(“div#emails”).append(“<br><input type=‘text’ name=‘email’>”)  seleção.before(objeto)  $(“.nome”).before(“<img>”)Wagner Silva # Web 2.0 com Ajax Aula 04
  7. 7. Manipulação de HTML  seleção.after(objeto)  $(“#usuarios > tr:last”).after(“<tr><td><input type=‘text’ name=‘uNome’></td></tr>”)  seleção.clone()  $(“div.carimbo”).clone()  seleção.remove()  $(“img”).remove()Wagner Silva # Web 2.0 com Ajax Aula 04
  8. 8. Manipulação de HTML  Exercício: Criar tabela onde será possível manipular a ordem das linhas.Wagner Silva # Web 2.0 com Ajax Aula 04
  9. 9. Manipulação de CSS  seleção.css(propriedade,valor)  $(“body”).css(“background-color”,”#ff0000”);  seleção.addClass()  $(“img”).addClass(“miniatura”);  seleção.removeClass()  $(“img”).removeClass(“miniatura”);Wagner Silva # Web 2.0 com Ajax Aula 04
  10. 10. Manipulação de CSS  seleção.height()  Somente conteúdo  seleção.innerHeight()  Conteúdo + Padding  seleção.outerHeight(true)  Conteúdo + Padding + Borda + MargemWagner Silva # Web 2.0 com Ajax Aula 04
  11. 11. Manipulação de CSS  seleção.width()  Somente conteúdo  seleção.innerWidth()  Conteúdo + Padding  seleção.outerWidth(true)  Conteúdo + Padding + Borda + MargemWagner Silva # Web 2.0 com Ajax Aula 04
  12. 12. Manipulação de CSS  seleção.offset()  Referente à página  seleção.position()  Referente ao “pai”Wagner Silva # Web 2.0 com Ajax Aula 04
  13. 13. Manipulação de CSS  Exercício: Centralizar uma div horizontal e verticalmente.Wagner Silva # Web 2.0 com Ajax Aula 04
  14. 14. Manipulação de CSS  seleção.blur(função)  seleção.change(função)  seleção.click(função)  seleção.dbclick(função)  seleção.focus(função)Wagner Silva # Web 2.0 com Ajax Aula 04
  15. 15. Manipulação de CSS  seleção.keydown(função)  seleção.keypress(função)  seleção.keyup(função)  seleção.mousedown(função)  seleção.mouseout(função)Wagner Silva # Web 2.0 com Ajax Aula 04
  16. 16. Manipulação de CSS  seleção.mouseover(função)  seleção.mouseup(função)  seleção.submit(função)  seleção.scroll(função)  seleção.mouseout(função)Wagner Silva # Web 2.0 com Ajax Aula 04
  17. 17. Manipulação de CSS  seleção.delegate(descendente, evento, função)  Novos elementos da página  Herança de comportamento $(“#galeria”).delegate(“.miniatura”,”mouseover”,function(){ $(this).attr(“src”,this.id+”_2x.jpg”); });Wagner Silva # Web 2.0 com Ajax Aula 04
  18. 18. Manipulação de CSS  Exercício: Modificar todas as funções da simulação do GMail e adicionar as funções de seleção, arquivar, e desarquivar.Wagner Silva # Web 2.0 com Ajax Aula 04
  19. 19. Web 2.0 com Ajax # Aula 04 Próxima Aula:  Animação de Objetos  Ajax E-mail: web2softeam@gmail.com Twitter: twitter.com/web2softeam

×