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