Arquivos de sites
jQuery – Introdução a manipulação do DOM – Pegando e atribuindo conteúdo [text(), html() and val()]
Introdução a manipulação do DOM
Um dos mais importantes aspectos do JavaScript e desse modo jQuery, é a manipulação do DOM. O DOM significa Document Object Model (Modelo de Objeto de Documento) e é um mecanismo para representação e interação com nossos documentos HTML, XHTML ou XML. Ele lhe permite navegar e manipular seus documentos através de uma linguagem de programação, que no navegador será quase sempre JavaScript. A navegação e manipulação do DOM usando o JavaScript padrão pode muito complicado, mas felizmente para nós, o jQuery vem com um monte de métodos relacionado ao DOM, fazendo isso tudo muito mais fácil.
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()]
O aspecto mais simples da manipulação do DOM é recuperar e atribuir text (texto), valores (valores) e HTML. Essas três coisas podem parecer a mesma coisa, mas elas não são. Text é uma representação literal (sem HTML) do conteúdo interno para todos os elementos normais, values são para elementos de formulário e HTML é o mesmo que text, mas incluindo qualquer marcação (markup).
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:
<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:
<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:
<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.
Fonte: jquery-tutorial.net / jquery-tutorial.net