Aula 04
Wagner Silva
AgendaManipulação de HTML
Manipulação de CSS
Manipulação de Eventos
Wagner Silva # Web 2.0 com Ajax Aula 04
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
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
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
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
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
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
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
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
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
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
Manipulação de CSS Exercício: Centralizar uma div horizontal e
verticalmente.
Wagner Silva # Web 2.0 com Ajax Aula 04
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
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
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
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
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
Web 2.0 com Ajax # Aula 04 Próxima Aula:
Animação de Objetos
Ajax
E-mail: [email protected]
Twitter: twitter.com/web2softeam
Top Related