Web 2.0 com Ajax: JQuery/PHP

Treinamento ministrado para turma iniciante em 2011

Aula 04

Transcript

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