1. JQUERY Aula 03 – Manipulando HTML

2. JQuerycontemmetodosquepermitemmanipularelementos do HTML e seusatributosalem da manipulação do DOM. • DOM = Document Object Model • Define a padronização de acesso entre documentos HTML e XML e um padrão da W3C que e um plataformaneutraquepermitequeprogramasacessemdinamicamente a edição de conteudo, estruturas e estilos de um documento.

3. Conteúdo- text(), html(), e val() • text() – editaouretorna o texto do elementoselecionado. • html() - editaouretorna o HTML do elementoselecionado (com as tags) • val() - editaouretorna o valor de objetos de formulario.

4. Conteúdo - text(), html(), e val() $("#btn1").click(function(){  alert("Text: " + $("#test").text());}); $("#btn2").click(function(){  alert("HTML: " + $("#test").html());});

5. Conteúdo - text(), html(), e val() • $("#btn1").click(function(){  alert("Value: " + $("#test").val());});

6. Lendo Atributos – attr() • Usado para consultar atributos de um objeto HTML. $("button").click(function(){  alert($("#w3s").attr("href"));});

7. Conteúdo - text(), html(), e val() $("#btn1").click(function(){  $("#test1").text("Hello world!");}); $("#btn2").click(function(){  $("#test2").html("<b>Hello world!</b>");}); $("#btn3").click(function(){  $("#test3").val(“Digiteseunome");});

8. Alterando Atributos – attr() • E possível alterar um atributo de um objeto selecionando. • O primeiro parâmetro e o nome do atributo o segundo e o valor associado. $("button").click(function(){  $("#w3s").attr("href","http://www.norton.net.br");});

9. Alterando Atributos – attr() • E possível alterar mais de um atributo por vez. $("button").click(function(){  $("#w3s").attr({ "href" : "http://www.norton.net.br" , "title" : "W3Schools jQuery Tutorial"});});

10. Adicionando novos elementos HTML • append() – insere um conteudo no fim dos elementosselecionados • prepend() - insere um conteudo no inicio dos elementosselecionados • after() - insere um conteudodepois dos elementosselecionados • before() - insere um conteudo antes dos elementosselecionados

11. Adicionando novos elementos HTML $("p").append(“adicionando um texto"); $("ol").append("<li>adicionando um item</li>"); $("p").prepend(“inicio do texto"); $("ol").prepend("<li>iniciando elementos</li>");

12. Adicionando novos elementos HTML $("img").after("Some text after"); $("img").before("Some text before");

13. Removendo Elementos • Permite facilmente remover elementos HTML existentes. • remove() – remove o elementoselecionando (e seusfilho) • empty() – remove osfilhos de um elementoselecionado.

14. Removendo Elementos • $("#div1").remove(); • $("#div1").empty();

15. Filtrando elementos a serem removidos • O filtro deve seguir as regras de seletor do jquery e é passado como parâmetro. • $("p").remove(".italic");

16. Manipulando CSS • addClass() – adicionaumaoumais classes aoselementosselecionados. • removeClass() - remove umaoumais classes aoselementosselecionados. • toggleClass() – alterna entre adicionar/remover classes de elementosselecionados. • css() – carregaoualtera um atributocss do elemento.

17. Manipulando CSS $("button").click(function(){  $("h1,h2,p").addClass("blue");  $("div").addClass("important");}); • Você pode associar mais de uma classe $("button").click(function(){  $("#div1").addClass("important blue");});

18. Manipulando CSS $("button").click(function(){  $("h1,h2,p").removeClass("blue");}); $("button").click(function(){  $("h1,h2,p").toggleClass("blue");});

19. Atributos CSS • Retornando um valor de um atributo. $("p").css("background-color"); • Alterando um atributo CSS $("p").css("background-color","yellow");

20. Atributos CSS • Associando mais de um atributo $("p").css({ "background-color":"yellow", "font-size":"200%“ });

21. Dimensões • width() • height() • innerWidth() • innerHeight() • outerWidth() • outerHeight()

22. Dimensões

23. Dimensões • width() metodoqueretorna a largura de um elementonãoincluindo: padding, border, ou margin. • The height() metodoqueretorna a altura de um elementonãoincluindo: padding, border, ou margin.

24. Dimensões • $("button").click(function(){var txt="";  txt+="Width: " + $("#div1").width() + "</br>";  txt+="Height: " + $("#div1").height();  $("#div1").html(txt);});

25. Dimensões • innerWidth() metodoqueretorna a largura de um elementoincluindo o padding. • innerHeight() metodoqueretorna a altura de um elementoincluindo o padding.

26. Dimensões • $("button").click(function(){var txt="";  txt+="Inner width: " + $("#div1").innerWidth() + "</br>";  txt+="Inner height: " + $("#div1").innerHeight();  $("#div1").html(txt);});

27. Dimensões • outerWidth() metodoretornalargura do elemento(incluindo padding e border). • outerHeight() metodoretornaaltura do elemento (incluindo padding e border).

28. Dimensões • $("button").click(function(){var txt="";  txt+="Outer width: " + $("#div1").outerWidth() + "</br>";  txt+="Outer height: " + $("#div1").outerHeight();  $("#div1").html(txt);});

29. Dimensões • Largura e altura da tela e da janela $("button").click(function(){$(document).width();$(document).height(); $(window).width(); $(window).height();});

30. Dimensões • Para definir dimensões, basta passar o valor como parâmetro $("button").click(function(){  $("#div1").width(500).height(500);});