jQuery Obter/Configurar

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

O jQuery fornece métodos eficazes para manipular elementos HTML e propriedades.

Nesta seção, explicaremos como o jQuery obtém e define o conteúdo dos elementos e os valores das propriedades.

HTML DOM (Modelo de objeto de documento)

Modelo de objeto de documentoé conhecido comoDOMé uma parte importante para tornar o site interativo.

Modelo de objeto de documentoRepresenta um documento HTML exibido em uma janela.

É uma interface que permite que jQuery manipule o conteúdo, a estrutura e o estilo do site.

jQuery para obter ou definir conteúdo-html(), text() e val()

Com jQuery, podemos manipular facilmente elementos HTML.

Temos os seguintes métodos jQuery para operações DOM:

• html()

• text()

• val()

A seção seguinte mostrará como usar cada método.

Método jQuery html()

jQuery html()Método para obter ou definir o conteúdo do elemento selecionado (innerHTML).

O exemplo a seguir obtém o conteúdo do primeiro parágrafo ao clicar no botão:

$("button").click(function(){
　　alert($("p").html()));
});

O exemplo a seguir altera o conteúdo de todos os parágrafos ao clicar no botão:

$("button").click(function(){
　　$("p").html("Eu quero dizer: <b>Hello world</b>");
});

Método jQuery text()

jQuery text()Método para obter ou definir o conteúdo de texto do elemento selecionado (filhos incluídos).

O exemplo a seguir obtém o conteúdo de todos os parágrafos ao clicar no botão:

$("button").click(function(){
　　alert($("p").text()));
});

O exemplo a seguir altera o conteúdo de todos os parágrafos ao clicar no botão:

$("button").click(function(){
　　$("p").text("Eu quero dizer: Hello world");
});

diferenças entre html() e text()

html()etext()Os métodos html() e text() podem definir ou obter o conteúdo do elemento HTML, mas há diferenças:

html():

• Definir ou obter o conteúdo do elemento selecionado (texto+ marcadores HTML）

• ao usar o método html()obterao definir o conteúdo, ele retornaráo conteúdo do primeiro elemento selecionado

text():

• Definir ou obter o conteúdo do elemento selecionado (apenas texto）

• ao usar o método text()obterao definir o conteúdo, ele retornarátodos os elementos selecionadosde conteúdo de texto

A seguir, um exemplo demonstra a diferença entre os métodos html() e text():

$("#btn1").click(function(){
　　$("p").html("Eu quero dizer: <b>Hello world</b>");
});
$("#btn2").click(function(){
　　$("p").text("Eu quero dizer: <b>Hello world</b>");
});

Método jQuery val()

jQuery val()Método para obter ou definir a propriedade value do elemento de formulário selecionado.

A seguinte exemplo obtém<input>Valor do Campo:

$("button").click(function(){
　　$("input:text").val();
});

O exemplo a seguir define<input>Valor do Campo:

$("button").click(function(){
　　$("input").val("Hello world");
});

jQuery obtém ou define atributos-attr()

jQuery attr()Este método obtém ou define os atributos e valores dos elementos selecionados.

O exemplo a seguir obtém a imagemsrcValor do Atributo:

$("button").click(function(){
　　$("img").attr("src");
});

O exemplo a seguir define a imagemsrcValor do Atributo:

$("button").click(function(){
　　$("img").attr("src", "logo_jquery.png");
});

O exemplo a seguir define várias propriedades e valores:

$("button").click(function(){
　　$("img").attr({
　　　　alt: "Seagull Icon",
　　　　title: "Image por Seagull",
　　　　width: "350px",
　　　　height: "300px"
　　});
});

Referência jQuery HTML

Para referência completa dos métodos HTML, acesse nossojQuery HTML / Referência CSS.