jQuery - Obter conteúdo e atributos


jQuery contém métodos poderosos para alterar e manipular elementos e atributos HTML.


Manipulação jQuery DOM

Uma parte muito importante do jQuery é a possibilidade de manipular o DOM.

jQuery vem com vários métodos relacionados ao DOM que facilitam o acesso e a manipulação de elementos e atributos.

DOM = Document Object Model

O DOM define um padrão para acessar documentos HTML e XML:

"O Document Object Model (DOM) do W3C é uma plataforma e uma interface de linguagem neutra que permite que programas e scripts acessem e atualizem estilo de um documento."


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

Três métodos jQuery simples, mas úteis, para manipulação de DOM são:

  • text() - Define ou retorna o conteúdo de texto dos elementos selecionados
  • html() - 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 obter conteúdo com jQuery text()e html()métodos:

Exemplo

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

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

Exemplo

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


Obter atributos - attr()

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

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

Exemplo

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

O próximo capítulo explica como definir (alterar) o conteúdo e os valores dos atributos.


Exercícios de jQuery

Teste-se com exercícios

Exercício:

Use um método jQuery para retornar o conteúdo de texto de um elemento <div>.

$("div").();


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 .