JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML...
-
Upload
thiago-carvalho-marroquim -
Category
Documents
-
view
222 -
download
2
Transcript of JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML...
![Page 1: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/1.jpg)
JQUERYAula 03 – Manipulando HTML
![Page 2: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/2.jpg)
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.
![Page 3: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/3.jpg)
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.
![Page 4: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/4.jpg)
Conteúdo - text(), html(), e val()
$("#btn1").click(function(){ alert("Text: " + $("#test").text());});
$("#btn2").click(function(){ alert("HTML: " + $("#test").html());});
![Page 5: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/5.jpg)
Conteúdo - text(), html(), e val() $("#btn1").click(function(){
alert("Value: " + $("#test").val());});
![Page 6: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/6.jpg)
Lendo Atributos – attr() Usado para consultar atributos de um
objeto HTML.
$("button").click(function(){ alert($("#w3s").attr("href"));});
![Page 7: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/7.jpg)
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");});
![Page 8: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/8.jpg)
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");});
![Page 9: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/9.jpg)
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"
});});
![Page 10: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/10.jpg)
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
![Page 11: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/11.jpg)
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>");
![Page 12: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/12.jpg)
Adicionando novos elementos HTML
$("img").after("Some text after");
$("img").before("Some text before");
![Page 13: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/13.jpg)
Removendo Elementos Permite facilmente remover elementos
HTML existentes. remove() – remove o elemento
selecionando (e seus filho) empty() – remove os filhos de um
elemento selecionado.
![Page 14: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/14.jpg)
Removendo Elementos $("#div1").remove();
$("#div1").empty();
![Page 15: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/15.jpg)
Filtrando elementos a serem removidos
O filtro deve seguir as regras de seletor do jquery e é passado como parâmetro.
$("p").remove(".italic");
![Page 16: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/16.jpg)
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.
![Page 17: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/17.jpg)
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");});
![Page 18: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/18.jpg)
Manipulando CSS$("button").click(function(){
$("h1,h2,p").removeClass("blue");});
$("button").click(function(){ $("h1,h2,p").toggleClass("blue");});
![Page 19: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/19.jpg)
Atributos CSS Retornando um valor de um atributo.$("p").css("background-color");
Alterando um atributo CSS$("p").css("background-color","yellow");
![Page 20: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/20.jpg)
Atributos CSS Associando mais de um atributo$("p").css({"background-color":"yellow","font-size":"200%“});
![Page 21: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/21.jpg)
Dimensões width() height() innerWidth() innerHeight() outerWidth() outerHeight()
![Page 22: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/22.jpg)
Dimensões
![Page 23: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/23.jpg)
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.
![Page 24: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/24.jpg)
Dimensões $("button").click(function(){
var txt=""; txt+="Width: " + $("#div1").width() + "</br>"; txt+="Height: " + $("#div1").height(); $("#div1").html(txt);});
![Page 25: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/25.jpg)
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.
![Page 26: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/26.jpg)
Dimensões $("button").click(function(){
var txt=""; txt+="Inner width: " + $("#div1").innerWidth() + "</br>"; txt+="Inner height: " + $("#div1").innerHeight(); $("#div1").html(txt);});
![Page 27: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/27.jpg)
Dimensões outerWidth() metodo retorna largura do
elemento (incluindo padding e border). outerHeight() metodo retorna altura do
elemento (incluindo padding e border).
![Page 28: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/28.jpg)
Dimensões $("button").click(function(){
var txt=""; txt+="Outer width: " + $("#div1").outerWidth() + "</br>"; txt+="Outer height: " + $("#div1").outerHeight(); $("#div1").html(txt);});
![Page 29: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/29.jpg)
Dimensões Largura e altura da tela e da janela$("button").click(function(){
$(document).width();$(document).height();$(window).width(); $(window).height();});
![Page 30: JQUERY Aula 03 – Manipulando HTML. JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM. DOM.](https://reader036.fdocument.pub/reader036/viewer/2022062411/5706385f1a28abb8238febda/html5/thumbnails/30.jpg)
Dimensões Para definir dimensões, basta passar o
valor como parâmetro$("button").click(function(){
$("#div1").width(500).height(500);});