JQUERY Aula 03 Manipulando HTML JQuery contem metodos
- Slides: 30
JQUERY Aula 03 – Manipulando HTML
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 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()); }); $("#btn 2"). click(function(){ alert("HTML: " + $("#test"). html()); });
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(){ alert($("#w 3 s"). attr("href")); });
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 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"). 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 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 $("#div 1"). remove(); $("#div 1"). 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 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"); }); 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(){ $("h 1, h 2, p"). toggle. Class("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() inner. Width() inner. Height() outer. Width() outer. Height()
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: " + $("#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. 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() + "</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() metodo retorna altura do elemento (incluindo padding e border).
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). height(); $(window). width(); $(window). height(); });
Dimensões Para definir dimensões, basta passar o valor como parâmetro $("button"). click(function(){ $("#div 1"). width(500). height(500); });
- Xml to json jquery
- Jquery sqlite
- Workflow jquery
- Jquery optimization selectors
- W 3 schools
- Parallax transition
- Prepend jquery
- Jquery mobile
- Jquery utiliza seletores css para selecionar elementos?
- Jquery functionality
- 12.html?action=
- Bhtml?title=
- Doctype html html head
- 1
- Html
- Além da metáfora, os dois primeiros versos contêm:
- Projeções afiláticas
- Um recipiente termicamente isolado contém 500g de água
- Um recipiente termicamente isolado contém 500g de água
- Métodos dos incidentes críticos vantagens e desvantagens
- Intercepción
- Metodos contraceptivos
- Componentes da cultura organizacional
- Metodos del collar
- Metodos abortivos indirectos
- Esponja contraceptiva
- Condon vaginal
- Métodos para segmentar los costos semivariables
- Buscar ideas
- Metodos para fijar creencias
- Ajuste de curvas e interpolación