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

Apresentação em tema: "JQUERY Aula 03 – Manipulando HTML.  JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM.  DOM."— Transcrição da apresentação:

1 JQUERY Aula 03 – Manipulando HTML

2  JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem 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 plataforma neutra que permite que programas acessem dinamicamente a edição de conteudo, estruturas e estilos de um documento.

3 Conteúdo - text(), html(), e val()  text() – edita ou retorna o texto do elemento selecionado.  html() - edita ou retorna o HTML do elemento selecionado (com as tags)  val() - edita ou retorna 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(" Hello world! "); }); $("#btn3").click(function(){ $("#test3").val(“Digite seu nome"); });

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 elementos selecionados  prepend() - insere um conteudo no inicio dos elementos selecionados  after() - insere um conteudo depois dos elementos selecionados  before() - insere um conteudo antes dos elementos selecionados

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

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 elemento selecionando (e seus filho)  empty() – remove os filhos de um elemento selecionado.

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() – adiciona uma ou mais classes aos elementos selecionados.  removeClass() - remove uma ou mais classes aos elementos selecionados.  toggleClass() – alterna entre adicionar/remover classes de elementos selecionados.  css() – carrega ou altera um atributo css 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  width() metodo que retorna a largura de um elemento não incluindo: padding, border, ou margin.  The height() metodo que retorna a altura de um elemento não incluindo: padding, border, ou margin.

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

25 Dimensões  innerWidth() metodo que retorna a largura de um elemento incluindo o padding.  innerHeight() metodo que retorna a altura de um elemento incluindo o padding.

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

27 Dimensões  outerWidth() metodo retorna largura do elemento (incluindo padding e border).  outerHeight() metodo retorna altura do elemento (incluindo padding e border).

28 Dimensões  $("button").click(function(){ var txt=""; txt+="Outer width: " + $("#div1").outerWidth() + " "; 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); });