Getters e Setters

Alguns métodos jQuery podem ser utilizados tanto para leitura quanto para atribuições de algum valor em um elemento selecionado. Os principais métodos são o text(), o html(), o attr() e o val().

Quando esses métodos são invocados sem nenhum argumento, nos referimos a eles como getters, uma vez que será realizada a leitura do valor do elemento. Caso esses métodos sejam chamados com um valor como argumento, nos referimos a eles como setters, pois irão atribuir um novo valor ao elemento em questão.

Método text()

O método text() é utilizado para retornar o texto do elemento selecionado, ou então para atribuir um novo texto a esse mesmo elemento.

$(".btn-um").click(function () {
  var str = $("p").text(); // lendo o valor do elemento selecionado (getter)
  alert(str);
});

$(".btn-dois").click(function () {
  $("p.especial").text("Estou definindo um novo valor com o método text()"); // atribuindo um valor ao elemento selecionado (setter)
});

Método html()

O método html() é usado para ler ou escrever conteúdo em HTML de elementos.

$(".btn-dois").click(function () {
  var str = $("#p1").html(); // lendo o valor em HTML do elemento selecionado (getter)
  alert(str);
});

$(".btn-tres").click(function () {
  $("#p2").html(
    "Estou definindo um novo <strong>código HTML</strong> com o método html()" // atribuindo um valor em HTML ao elemento selecionado (setter)
  );
});

Método attr()

Você pode usar o método attr() para ler ou escrever o valor do atributo de um elemento.

$("#btn-ler-link").click(function () {
  var str = $("a").attr("href"); // lendo o valor do atributo `href`do elemento selecionado
  alert(str);
});

$("#btn-definir-link").click(function () {
  $("a").attr("href", "http://www.imd.ufrn.br"); // atribuindo um valor ao atributo `href`do elemento selecionado
});

Método val()

Por fim, o método val() é normalmente utilizado para retornar o valor atual de um elemento HTML de inserção, tais como o <input>, <select>, <textarea>, ou caso seja utilizado com parâmetro, para atribuir esse valor.

$(".get-nome").click(function () {
  var str = $("textarea").val(); // lendo o valor do elemento <textarea>
  alert(str);
});
$(".set-nome").click(function () {
  $("textarea").val("Fulano"); // atribuindo um valor ao elemento <textarea>
});