JQUERY Aula 03 Manipulando HTML JQuery contem metodos

  • Slides: 30
Download presentation
JQUERY Aula 03 – Manipulando HTML

JQUERY Aula 03 – Manipulando HTML

 JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem

JQuery contem metodos que permitem manipular elementos do HTML e seus atributos alem da manipulação do DOM = Document Object Model � Define a padronização de acesso entre documentos HTML e XML e um padrão da W 3 C 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

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() $("#btn 1"). click(function(){ alert("Text: " + $("#test"). text());

Conteúdo - text(), html(), e val() $("#btn 1"). click(function(){ alert("Text: " + $("#test"). text()); }); $("#btn 2"). click(function(){ alert("HTML: " + $("#test"). html()); });

Conteúdo - text(), html(), e val() $("#btn 1"). click(function(){ alert("Value: " + $("#test"). val());

Conteúdo - text(), html(), e val() $("#btn 1"). click(function(){ alert("Value: " + $("#test"). val()); });

Lendo Atributos – attr() Usado para consultar atributos de um objeto HTML. $("button"). click(function(){

Lendo Atributos – attr() Usado para consultar atributos de um objeto HTML. $("button"). click(function(){ alert($("#w 3 s"). attr("href")); });

Conteúdo - text(), html(), e val() $("#btn 1"). click(function(){ $("#test 1"). text("Hello world!"); });

Conteúdo - text(), html(), e val() $("#btn 1"). click(function(){ $("#test 1"). text("Hello world!"); }); $("#btn 2"). click(function(){ $("#test 2"). html("<b>Hello world!</b>"); }); $("#btn 3"). click(function(){ $("#test 3"). val(“Digite seu nome"); });

Alterando Atributos – attr() E possível alterar um atributo de um objeto selecionando. O

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

Alterando Atributos – attr() E possível alterar mais de um atributo por vez. $("button").

Alterando Atributos – attr() E possível alterar mais de um atributo por vez. $("button"). click(function(){ $("#w 3 s"). attr({ "href" : "http: //www. norton. net. br" , "title" : "W 3 Schools j. Query Tutorial" });

Adicionando novos elementos HTML append() – insere um conteudo no fim dos elementos selecionados

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

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");

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

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 $("#div 1"). remove(); $("#div 1"). empty();

Removendo Elementos $("#div 1"). remove(); $("#div 1"). empty();

Filtrando elementos a serem removidos O filtro deve seguir as regras de seletor do

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 add. Class() – adiciona uma ou mais classes aos elementos selecionados. remove.

Manipulando CSS add. Class() – adiciona uma ou mais classes aos elementos selecionados. remove. Class() - remove uma ou mais classes aos elementos selecionados. toggle. Class() – alterna entre adicionar/remover classes de elementos selecionados. css() – carrega ou altera um atributo css do elemento.

Manipulando CSS $("button"). click(function(){ $("h 1, h 2, p"). add. Class("blue"); $("div"). add. Class("important");

Manipulando CSS $("button"). click(function(){ $("h 1, h 2, p"). add. Class("blue"); $("div"). add. Class("important"); }); Você pode associar mais de uma classe $("button"). click(function(){ $("#div 1"). add. Class("important blue"); });

Manipulando CSS $("button"). click(function(){ $("h 1, h 2, p"). remove. Class("blue"); }); $("button"). click(function(){

Manipulando CSS $("button"). click(function(){ $("h 1, h 2, p"). remove. Class("blue"); }); $("button"). click(function(){ $("h 1, h 2, p"). toggle. Class("blue"); });

Atributos CSS Retornando um valor de um atributo. $("p"). css("background-color"); Alterando um atributo CSS

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%“ });

Atributos CSS Associando mais de um atributo $("p"). css({ "background-color": "yellow", "font-size": "200%“ });

Dimensões width() height() inner. Width() inner. Height() outer. Width() outer. Height()

Dimensões width() height() inner. Width() inner. Height() outer. Width() outer. Height()

Dimensões

Dimensões

Dimensões width() metodo que retorna a largura de um elemento não incluindo: padding, border,

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: " + $("#div 1"). width() + "</br>"; txt+="Height:

Dimensões $("button"). click(function(){ var txt=""; txt+="Width: " + $("#div 1"). width() + "</br>"; txt+="Height: " + $("#div 1"). height(); $("#div 1"). html(txt); });

Dimensões inner. Width() metodo que retorna a largura de um elemento incluindo o padding.

Dimensões inner. Width() metodo que retorna a largura de um elemento incluindo o padding. inner. Height() metodo que retorna a altura de um elemento incluindo o padding.

Dimensões $("button"). click(function(){ var txt=""; txt+="Inner width: " + $("#div 1"). inner. Width() +

Dimensões $("button"). click(function(){ var txt=""; txt+="Inner width: " + $("#div 1"). inner. Width() + "</br>"; txt+="Inner height: " + $("#div 1"). inner. Height(); $("#div 1"). html(txt); });

Dimensões outer. Width() metodo retorna largura do elemento (incluindo padding e border). outer. Height()

Dimensões outer. Width() metodo retorna largura do elemento (incluindo padding e border). outer. Height() metodo retorna altura do elemento (incluindo padding e border).

Dimensões $("button"). click(function(){ var txt=""; txt+="Outer width: " + $("#div 1"). outer. Width() +

Dimensões $("button"). click(function(){ var txt=""; txt+="Outer width: " + $("#div 1"). outer. Width() + "</br>"; txt+="Outer height: " + $("#div 1"). outer. Height(); $("#div 1"). html(txt); });

Dimensões Largura e altura da tela e da janela $("button"). click(function(){ $(document). width(); $(document).

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(){ $("#div 1").

Dimensões Para definir dimensões, basta passar o valor como parâmetro $("button"). click(function(){ $("#div 1"). width(500). height(500); });