View
118
Download
0
Category
Preview:
Citation preview
JQUERY – PARTE 3
Linguagem de scripts
Obter conteúdo e atributos do HTML
jQuery contém poderosos métodos para alterar e manipular os elementos e atributos HTML.
Uma parte muito importante da jQuery é a possibilidade de manipular o DOM possuindo diversos métodos relacionados DOM que tornam mais fácil para acessar e manipular os elementos e atributos.
DOM = Document Object Model O DOM define um padrão de acesso a
documentos HTML e XML:
Obter conteúdo – text, html e val Três métodos simples para manipulação
DOM são: text () - Define ou retorna o conteúdo de
elementos selecionados do texto html () - Define ou retorna o conteúdo de
elementos selecionados (incluindo as tags do HTML)
val () - Define ou retorna o valor dos campos do formulário
Obter conteúdo – text, html e val $("#btn1").click(function(){ alert("Text: " + $("#test").text());});$("#btn2").click(function(){ alert("HTML: " + $("#test").html());});
Obter conteúdo – text, html e val O exemplo a seguir demonstra como obter o
valor de um campo de entrada com o método val(): $("#btn1").click(function(){ alert("Value: " + $("#test").val());});
Atributos – attr
O exemplo a seguir demonstra como obter o valor do atributo href de um link:
$("button").click(function(){ alert($("#w3s").attr("href"));});
Definir conteúdo e atributos
Usaremos os mesmos três métodos do slide anterior para definir conteúdo: text () - Define ou retorna o conteúdo de
elementos selecionados do texto html () - Define ou retorna o conteúdo de
elementos selecionados (incluindo a marcação HTML)
val () - Define ou retorna o valor dos campos do formulário
Definir conteúdo e atributos
$("#btn1").click(function(){ $("#test1").text("Hello world!");});$("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>");});$("#btn3").click(function(){ $("#test3").val("Dolly Duck");});
Função Callback para text(), html() e val()
Todos os três métodos : text (), html () e val (), também vêm com uma função callback.
A função de callback tem dois parâmetros: o índice do elemento atual na lista de elementos selecionados e o valor original (old).
Você, então, retornar a string que você deseja usar como o novo valor da função.
Função Callback para text(), html() e val()
$("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; });});
$("#btn2").click(function(){ $("#test2").html(function(i,origText){ return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; });});
Definindo Atributos - attr
O método attr jQuery () também é usado para definir / alterar os valores dos atributos. $("button").click(function(){
$("#w3s").attr("href","http://www.w3schools.com/jquery");});
Definindo Atributos - attr
O método attr () também permite definir vários atributos ao mesmo tempo.
O exemplo a seguir demonstra como definir a href e atributos de título ao mesmo tempo:
$("button").click(function(){ $("#w3s").attr({ "href" : "http://www.w3schools.com/jquery", "title" : "W3Schools jQuery Tutorial" });});
Função Callback para attr
O método jQuery attr (), também vêm com a função callback.
A função de callback tem dois parâmetros: o índice do elemento atual na lista de elementos selecionados e o valor do atributo original (de idade). Você, então, retornar a string que você deseja usar como o novo valor do atributo da função.
Função Callback para attr
$("button").click(function(){ $("#w3s").attr("href", function(i,origValue){ return origValue + "/jquery"; });});
Adicionando Elementos
É fácil adicionar novos elementos e conteúdos utilizando os métodos: append() - Insere conteúdo no final dos
elementos seleccionados prepend() - Insere conteúdo no inicio dos
elementos seleccionados after() – Insere conteúdo após os elementos
selecionados before() - Insere conteúdo antes dos
elementos selecionados
Adicionando Elementos – append() O método append() insere conteúdo no
final de elementos HTML selecionados. $("p").append("Some appended text.");
Adicionando Elementos – prepend() O método insere o conteúdo no início de
elementos HTML selecionados. $("p").prepend("Some prepended text.");
Adicionar vários novos elementos com append e prepend
No exemplo a seguir, criamos vários novos elementos. Os elementos são criados com texto / HTML, jQuery e JavaScript / DOM. Depois, acrescente os novos elementos do texto com o append () método (este teria trabalhado para prepend () também):
Adicionar vários novos elementos com append e prepend
function appendText(){var txt1="<p>Text.</p>";
// Create element with HTML var txt2=$("<p></p>").text("Text.");
// Create with jQueryvar txt3=document.createElement("p");
// Create with DOMtxt3.innerHTML="Text.";$("p").append(txt1,txt2,txt3);
// Append the new elements }
Métodos after() e before()
$("img").after("Some text after");
$("img").before("Some text before");
Adicionar vários novos elementos com after e before
function afterText(){var txt1="<b>I </b>";
// Create element with HTML var txt2=$("<i></i>").text("love ");
// Create with jQueryvar txt3=document.createElement("big");
// Create with DOMtxt3.innerHTML="jQuery!";$("img").after(txt1,txt2,txt3);
// Insert new elements after img}
Removendo Elementos
Podemos remover elementos do HTML utilizando os seguintes métodos: remove() – remove o elemento
selecionado(e os seus filhos) empty() - Removes the child elements from
the selected element
Recommended