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

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!”)


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”)


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>”)


Manipulação de HTML seleção.append(objeto)

$(“div#emails”).append(“<br><input type=‘text’ name=‘email’>”)

seleção.before(objeto)

$(“.nome”).before(“<img>”)


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()


Manipulação de HTML Exercício: Criar tabela onde será possível manipular a

ordem das linhas.


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”);


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


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


Manipulação de CSS seleção.offset()

Referente à página

seleção.position()

Referente ao “pai”


Manipulação de CSS Exercício: Centralizar uma div horizontal e

verticalmente.


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)


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)


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)


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”);

});


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.


Web 2.0 com Ajax # Aula 04 Próxima Aula:

Animação de Objetos

Ajax

E-mail: [email protected]

Twitter: twitter.com/web2softeam

Documents

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