Aulas
Disciplinas

Cursos / Informática para Internet / Desenvolvimento Web II / Aula

arrow_back Aula 07 - jQuery (Parte 1)

Métodos – HTML

Neste momento da aula, veremos os métodos da API do jQuery cuja finalidade é inserir, apagar ou modificar a estrutura HTML da página:

play_circle_filled
Vídeo 04 - Funções e Eventos pt.2
Método Descrição
$(seletor).text(conteúdo) Recupera ou define o texto dos elementos.
$(seletor).val(conteúdo) Recupera ou define o valor dos elementos de um formulário (Ex.: campos do tipo input, select e radio).
$(seletor).html(conteúdo) Recupera ou define o conteúdo interno dos elementos (Ex.: o  código HTML contido dentro uma 'div').
$(seletor).append(conteúdo) Adiciona o conteúdo informado ao fim do conteúdo interno dos elementos.
$(seletor).prepend(conteúdo) Adiciona o conteúdo informado ao início do conteúdo interno dos elementos.
$(seletor).after(conteúdo) Adiciona o conteúdo informado após os elementos.
$(seletor).before(conteúdo) Adiciona o conteúdo informado após os elementos.

O exemplo a seguir mostra como utilizar cada uma das ações HTML apresentadas nesta seção. Este exemplo é composto de alguns elementos HTML, os quais, após pressionar o botão 'Teste', sofrerão modificações.

Código da página (arquivo acoesHtml.html):

​x
1
<html>
2
​
3
<head>
4
  <script src="http://code.jquery.com/jquery-2.1.3.js"></script>
5
</head>
6
​
7
<body>
8
​
9
  <script type="text/javascript">
10
     $(document).ready(function() {
11
​
12
       $("#b1").click(function() {
13
         $("[type='text']").val("novo valor!");
14
         $("[type='text']").before("Rotulo:");
15
         $("[type='text']").after("<br><br>");
16
         $("#d1").prepend("Aula 22 - ");
17
         $("#d1").append(" - parte 1");
18
         $("#d2").html("Programacao Web - jQuery - 2010");
19
       });
20
​
21
     });
22
  </script>
23
  <div id="d1"
24
     style="border-width: 1px; border-style: dotted; border-color: red;">
25
  Aprendendo jQuery</div>
26
​
27
  <br>
28
  <input type="text" value="aprendendo jQuery 1">
29
  <input id="b1" type="button" value="Teste">
30
  <br>
31
  <br>
32
  <div id="d2"
33
     style="border-width: 1px; border-style: dotted; border-color: red;">rodape
34
  </div>
35
​
36
</body>
37
</html>

Ao executar esse código no navegador, as páginas apresentadas nas Figuras 1 e 2 serão exibidas.

Figura 01 - Antes de pressionar o botão
Antes de pressionar o botão

 

Figura 02 - Após pressionar o botão
Após pressionar o botão

Notas

  1. A linha 13 utiliza a função ‘val’ para modificar o conteúdo do campo texto selecionado.

Observe que essa mesma função, quando invocada sem argumentos, ao invés de definir o valor do elemento, retorna o valor corrente dele. Para verificar, experimente substituir o código da linha 12 por:

1
1
alert($("[type='text']").val());
  1. As linhas 14 e 15 utilizam os métodos ‘before’ e ‘after’, respectivamente, para inserir texto antes e depois do campo texto.
  2. As linhas 16 e 17 utilizam os métodos ‘prepend’ e ‘append’ para modificar o conteúdo interno do elemento cujo id é ‘d1’, adicionando, respectivamente, textos no início e no final do texto original.
  3. A linha 18 utiliza o método ‘html’ para definir o conteúdo interno do elemento cujo id é ‘d2’.

Note que esse método, assim como o método ‘val’, quando utilizado sem argumentos, ao invés de definir o valor do elemento, retorna o valor corrente do mesmo. Nesse caso, retorna o conteúdo interno do elemento.

[A] Anterior
8/12
Próxima [D]

Sumário

Versão 5.3 - Todos os Direitos reservados