jQuery - Definir conteúdo e atributos
Definir conteúdo - text(), html() e val()
Usaremos os mesmos três métodos da página anterior para definir o conteúdo :
text()- Define ou retorna o conteúdo de texto dos elementos selecionadoshtml()- Define ou retorna o conteúdo dos elementos selecionados (incluindo marcação HTML)val()- Define ou retorna o valor dos campos do formulário
O exemplo a seguir demonstra como definir o conteúdo com os métodos jQuery text(), html()e :val()
Exemplo
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
Uma função de retorno de chamada para text(), html() e val()
Todos os três métodos jQuery acima: text(), html(), e val(), também vêm com uma função de retorno de chamada. A função callback tem dois parâmetros: o índice do elemento atual na lista de elementos selecionados e o valor original (antigo). Você então retorna a string que deseja usar como o novo valor da função.
O exemplo a seguir demonstra text()e html()com uma função de retorno de chamada:
Exemplo
$("#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 + ")";
});
});
Definir atributos - attr()
O método jQuery attr()também é usado para definir/alterar valores de atributos.
O exemplo a seguir demonstra como alterar (definir) o valor do atributo href em um link:
Exemplo
$("button").click(function(){
$("#w3s").attr("href", "https://www.w3schools.com/jquery/");
});
O attr()método também permite definir vários atributos ao mesmo tempo.
O exemplo a seguir demonstra como definir os atributos href e title ao mesmo tempo:
Exemplo
$("button").click(function(){
$("#w3s").attr({
"href" : "https://www.w3schools.com/jquery/",
"title" : "W3Schools jQuery Tutorial"
});
});
Uma função de retorno de chamada para attr()
O método jQuery attr(), também vem com uma função de retorno de chamada. A função callback tem dois parâmetros: o índice do elemento atual na lista de elementos selecionados e o valor do atributo original (antigo). Você então retorna a string que deseja usar como o novo valor de atributo da função.
O exemplo a seguir demonstra attr()com uma função de retorno de chamada:
Exemplo
$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery/";
});
});
Exercícios de jQuery
Referência HTML jQuery
Para uma visão geral completa de todos os métodos HTML do jQuery, acesse nossa Referência HTML/CSS do jQuery .