Introdução a manipulação do DOM
No primeiro exemplo “Hello, world!” desse tutorial, nós comparamos o trabalho de encontrar um elemento e atribuir um texto a ele usando primeiro jQuery e então JavaScript. Esta é apenas a ponta do iceberg, porém, e nos capítulos seguintes você verá como é fácil manipular o conteúdo dos seus documentos com jQuery.
Pegando e atribuindo conteúdo [text(), html() and val()]
Felizmente para nós, o jQuery vem com um método para cara um dos três, nos permitindo recuperar e atribuir essas propriedades: Os métodos text(), html() e val(). Aqui está um pequeno exemplo que mostrará a você a diferença entre eles e como eles são simples de usar:
- Código:
<div id="divTest">
<b>Test</b>
<input type="text" id="txtTest" name="txtTest" value="Input field" />
</div>
<script type="text/javascript">
$(function()
{
alert("Text: " + $("#divTest").text());
alert("HTML: " + $("#divTest").html());
alert("Value: " + $("#divTest").val());
alert("Text: " + $("#txtTest").text());
alert("HTML: " + $("#txtTest").html());
alert("Value: " + $("#txtTest").val());
});
</script>
Então uma chamada para um desses métodos sem parâmetros irá simplesmente retornar a propriedade desejada, Se nós queremos atribuir a propriedade em vez disso, nós simplesmente especificamos um parâmetro extra. Aqui está um exemplo completo:
- Código:
<div id="divText"></div>
<div id="divHtml"></div>
<input type="text" id="txtTest" name="txtTest" value="Input field" />
<script type="text/javascript">
$(function()
{
$("#divText").text("A dynamically set text");
$("#divHtml").html("<b><i>A dynamically set HTML string</i></b>");
$("#txtTest").val("A dynamically set value");
});
</script>
E isso é o quão fácil é para atribuir texto, HTML e valores.
Essas três funções vêm com uma sobrecarga a mais, onde você especifica uma função de callback como primeiro e único parâmetro. Essa função de callback será chamada com dois parâmetros pela jQuery, o índice do elemento corrente na lista de elementos selecionados, assim como o valor existente, antes dele ser substituído com um novo valor. Você então retorna a string que você deseja usar como o novo valor para função. Essa sobrecarga funciona para ambos html(), text() e val(), mas por motivo de simplicidade, nós apenas usamos a versão do text() neste exemplo:
- Código:
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<script type="text/javascript">
$(function()
{
$("p").text(function(index, oldText) {
return "Existing text: " + oldText + ". New text: A dynamically set text (#" + index + ")";
});
});
</script>
Nós começamos com três elementos de parágrafos semelhantes, que o texto é a única diferença deles. No código jQuery, nós selecionamos todos eles e então usamos a versão especial do método text() para substituir o texto atual com um novo texto construído, baseado nos dois parâmetros que jQuery fornece a nós: O índice do elemento atual e também o seu texto atual. Esse novo texto é então retornado ao jQuery, que irá substituir texto atual pelo novo.
Fontes:
jquery-tutorial.net
Spigando e Aprendendo