Set Conteúdo - text(), html() e val()
Usaremos os mesmos três métodos da página anterior paradefinir o conteúdo:
- text() - Define ou retorna o conteúdo de texto de elementos selecionados
- html() - Define ou retorna o conteúdo dos elementos seleccionados (incluindo marcação HTML)
- val() - Define ou retorna o valor de campos de formulário
O exemplo a seguir demonstra como definir o conteúdo com o jQuery text(), html() e val() métodos:
Exemplo
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
Tente você mesmo " A função de retorno 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. A função callback tem dois parâmetros: o índice do elemento atual na lista de elementos selecionados e o valor original (antiga). Você, então, retornar a string que você deseja usar como o novo valor da função.
O exemplo a seguir demonstra text() e html() com uma função de chamada de retorno:
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 + ")";
});
});
Tente você mesmo " Defina os atributos - attr()
O jQuery attr() método também é usado para definir / alterar valores de atributos.
O exemplo a seguir demonstra como alterar (set) o valor do href atributo em um link:
Exemplo
$("button").click(function(){
$("#w3s").attr("href", "http://www.w3ii.com/jquery");
});
Tente você mesmo " O attr() método também permite definir vários atributos ao mesmo tempo.
O exemplo a seguir demonstra como definir a href e título atributos ao mesmo tempo:
Exemplo
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3ii.com/jquery",
"title" : "w3ii jQuery Tutorial"
});
});
Tente você mesmo " A função de retorno para attr()
O método jQuery attr() , também vêm com uma função de retorno. A função callback tem dois parâmetros: o índice do elemento atual na lista de elementos selecionados eo original (antiga) valor do atributo. Você, então, retornar a string que você deseja usar como o novo valor do atributo da função.
O exemplo a seguir demonstra attr() com uma função de chamada de retorno:
Exemplo
$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery";
});
});
Tente você mesmo " Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 »
jQuery HTML Referência
Para uma visão completa de todos os métodos jQuery HTML, por favor, vá ao nosso jQuery HTML / CSS Referência .