tutoriais mais recente desenvolvimento web
 

jQuery - Obter conteúdo e atributos


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


jQuery DOM Manipulação

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

jQuery vem com um monte de métodos relacionados DOM que tornam mais fácil de acessar e manipular elementos e atributos.

DOM = Document Object Model

O DOM define um padrão de acesso a documentos HTML e XML:

"O modelo de objeto do W3C DOM (Document) é uma interface de plataforma e linguagem neutra que permite que programas e scripts para acessar e atualizar o conteúdo, estrutura e estilo de um documento dinamicamente."


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

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

  • 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 obter o conteúdo com o jQuery text() e html() métodos:

Exemplo

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

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

Exemplo

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

Obter Atributos - attr()

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

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

Exemplo

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

O próximo capítulo explica como definir valores (mudança) de conteúdo e atributos.


Teste-se com exercícios!

Exercício 1 » Exercício 2» Exercício 3 » Exercício 4»


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 .