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  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.

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.

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

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

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

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

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

Alterando Atributos – attr()  E possível alterar mais de um atributo por vez. $("button").click(function(){ $("#w3s").attr({ "href" : " "title" : "W3Schools jQuery Tutorial" }); });

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

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

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

Removendo Elementos  Permite facilmente remover elementos HTML existentes.  remove() – remove o elemento selecionando (e seus filho)  empty() – remove os filhos de um elemento selecionado.

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

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

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.

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

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

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

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

Dimensões  width()  height()  innerWidth()  innerHeight()  outerWidth()  outerHeight()

Dimensões

 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.

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

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.

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

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

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

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

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