O DOM (Document Object Model) representa a estrutura da página web. Sempre que utilizamos jQuery para alterar texto, mostrar ou esconder elementos, estamos a manipular o DOM.

O jQuery disponibiliza vários métodos simples para modificar conteúdos e estilos sem recarregar a página.

Alterar texto com text()

O método text() permite alterar apenas o texto de um elemento.

HTML:

jQuery:

Este método remove qualquer conteúdo anterior e substitui-o pelo novo texto.

Inserir HTML com html()

Quando é necessário inserir código HTML dentro de um elemento, utiliza-se html().

Neste caso, o conteúdo é interpretado como HTML e não apenas como texto.

Alterar estilos com css()

O método css() permite modificar propriedades CSS diretamente.

Também é possível alterar várias propriedades ao mesmo tempo:

Trabalhar com classes CSS

Em vez de alterar estilos diretamente, é boa prática usar classes CSS.

Adicionar uma classe:

Remover uma classe:

Alternar uma classe:

Este método é muito usado em jogos e interfaces interativas para mostrar estados diferentes (certo/errado, ativo/inativo).

Mostrar e esconder elementos

O jQuery permite controlar facilmente a visibilidade dos elementos.

Ou alternar automaticamente:

Exemplo completo

HTML:

jQuery:

Ao clicar no botão, o texto é alterado e uma classe CSS é aplicada.

Exercício 1 — Conteúdo dinâmico

Cria uma página com:

• Um botão

• Um parágrafo

Quando o botão for clicado:

• O texto do parágrafo deve ser alterado

• Deve ser aplicada uma classe CSS que altere a cor e o tamanho do texto

Exercício 2 — Mostrar e esconder elementos

Na mesma página:

• Cria dois botões: Mostrar e Esconder

• Usa jQuery para controlar a visibilidade de um bloco de texto