Treinamento ministrado para turma iniciante em 2011 Aula 04

1. Aula 04
Wagner Silva

2. Agenda
 Manipulação de HTML
 Manipulação de CSS
 Manipulação de Eventos
Wagner Silva # Web 2.0 com Ajax Aula 04

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. 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. 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. 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. 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. 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. 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. Manipulação de CSS
 seleção.height()
 Somente conteúdo
 seleção.innerHeight()
 Conteúdo + Padding
 seleção.outerHeight(true)
 Conteúdo + Padding + Borda + Margem
Wagner Silva # Web 2.0 com Ajax Aula 04

12. Manipulação de CSS
 seleção.width()
 Somente conteúdo
 seleção.innerWidth()
 Conteúdo + Padding
 seleção.outerWidth(true)
 Conteúdo + Padding + Borda + Margem
Wagner Silva # Web 2.0 com Ajax Aula 04

14. 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

16. Manipulação de CSS
 Exercício: Centralizar uma div horizontal e
verticalmente.
Wagner Silva # Web 2.0 com Ajax Aula 04

17. 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

18. 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

19. 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

20. 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

21. 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

22. Web 2.0 com Ajax # Aula 04
 Próxima Aula:
 Animação de Objetos
 Ajax
 E-mail: web2softeam@gmail.com
 Twitter: twitter.com/web2softeam