jQuery definir conteúdo e atributo

Definir conteúdo - text(), html() e val()

Vamos usar os três métodos idênticos do capítulo anterior para definir o conteúdo:

  • text() - Definir ou retornar o conteúdo de texto do elemento selecionado
  • html() - Definir ou retornar o conteúdo do elemento selecionado (incluindo tags HTML)
  • val() - Definir ou retornar o valor do campo do formulário

O exemplo a seguir demonstra como definir o conteúdo usando os métodos 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");
});

Experimente você mesmo

Função de callback de text(), html() e val()

Os três métodos jQuery: text(), html() e val() também possuem funções de callback. As funções de callback têm dois parâmetros: o índice do elemento atual na lista de elementos selecionados e o valor original (antigo). Em seguida, a função retorna o valor novo que você deseja usar.

O exemplo a seguir demonstra o uso de funções de callback com text() e html():

Exemplo

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Texto antigo: " + origText + " Novo texto: Hello world!
    (index: " + i + ")";
  });
});
$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Html antigo: " + origText + " Novo html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

Experimente você mesmo

Definir atributo - attr()

O método attr() do jQuery também é usado para definir/mudar valores de atributo.

O exemplo a seguir demonstra como alterar (definir) o valor do atributo href do link:

Exemplo

$("button").click(function(){
  $("#w3s").attr("href","http://www.codew3c.com/jquery");
});

Experimente você mesmo

O método attr() também permite que você defina várias propriedades ao mesmo tempo.

O exemplo a seguir demonstra como definir atributos href e title ao mesmo tempo:

Exemplo

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.codew3c.com/jquery",
    "title" : "CodeW3C.com Tutorial jQuery"
  });
});

Experimente você mesmo

Função de callback do attr()

O método attr() do jQuery também oferece função de callback. A função de callback recebe dois parâmetros: o índice do elemento atual na lista de elementos selecionados e o valor original (antigo). Em seguida, a função retorna a string que você deseja usar como novo valor.

O exemplo a seguir demonstra o método attr() com função de callback:

Exemplo

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
});

Experimente você mesmo

Manual de referência HTML do jQuery

Para obter conteúdo completo dos métodos HTML do jQuery, acesse o seguinte manual de referência: