1 / 30

JQUERY

JQUERY. Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM = Document Object Model

cecilia-hess
Download Presentation

JQUERY

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

More Related