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

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: web2softeam@gmail.com

Twitter: twitter.com/web2softeam