Upload
cecilia-hess
View
16
Download
0
Embed Size (px)
DESCRIPTION
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 - PowerPoint PPT Presentation
Citation preview
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("<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);});