Obter conteúdo e atributo do jQuery

O jQuery possui métodos poderosos para operar em elementos e atributos HTML.

Operações DOM do jQuery

Uma parte muito importante do jQuery é a capacidade de operar no DOM.

O jQuery oferece uma série de métodos relacionados ao DOM, o que facilita o acesso e a operação de elementos e atributos.

Dica:DOM = Document Object Model (Modelo de Objetos de Documento)

DOM define os padrões para acessar documentos HTML e XML:

O W3C Document Object Model é uma interface independente de plataforma e linguagem que permite que programas e scripts acessem e atualizem dinamicamente o conteúdo, estrutura e estilo do documento.

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

Três métodos simples e úteis para operações DOM do jQuery:

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

O exemplo a seguir demonstra como obter o conteúdo usando os métodos jQuery text() e html():

Exemplo

$("#btn1").click(function(){
  alert("Texto: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

Experimente você mesmo

O exemplo a seguir demonstra como obter o valor do campo de entrada usando o método jQuery val():

Exemplo

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

Experimente você mesmo

Obter atributo - attr()

O método jQuery attr() é usado para obter valores de atributo.

O exemplo a seguir demonstra como obter o valor do atributo href do link:

Exemplo

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

Experimente você mesmo

O próximo capítulo explicará como configurar (mudar) o conteúdo e os valores de atributo.

Manual de referência jQuery HTML

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