jquery aula 03 – manipulando html. jquery contem metodos que permitem manipular elementos do html...
Post on 07-Apr-2016
222 Views
Preview:
TRANSCRIPT
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);});
top related