JQUERYAula 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("<b>Hello world!</b>");});

$("#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","http://www.norton.net.br");});

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"

  });});

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("<li>adicionando um item</li>");

$("p").prepend(“inicio do texto");

$("ol").prepend("<li>iniciando elementos</li>");

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

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() + "</br>";  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() + "</br>";  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() + "</br>";  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);});