No jQuery, quase tudo começa com a função $().
É através dela que selecionamos elementos HTML e aplicamos ações, como alterar texto, cores, classes ou responder a eventos.

Os seletores jQuery utilizam a mesma lógica dos seletores CSS, o que torna a sua aprendizagem mais simples e intuitiva.

Selecionar elementos por ID

Para selecionar um elemento pelo seu id, utiliza-se o símbolo #.

HTML:

jQuery:

Este código seleciona o parágrafo com o id mensagem e altera o seu conteúdo.

Selecionar elementos por classe

Para selecionar elementos por classe, utiliza-se o símbolo ..

HTML:

jQuery:

Neste caso, todos os elementos com a classe info são selecionados e a sua cor é alterada.

Selecionar elementos por tag

Também é possível selecionar todos os elementos de um determinado tipo HTML.

HTML:

jQuery:

Todos os parágrafos da página passam a ter o texto a negrito.

Seletores múltiplos

É possível selecionar vários elementos ao mesmo tempo, separando-os por vírgula.

Este código seleciona todos os títulos <h1> e todos os parágrafos.

O seletor this

O seletor this refere-se ao elemento que está a ser usado no momento, sendo muito útil em eventos.

Exemplo:

Quando um parágrafo é clicado, apenas esse parágrafo muda de cor, e não todos.

Utilizar seletores com document.ready

Tal como visto na aula anterior, todo o código jQuery deve estar dentro de:

Exemplo completo:

Exercício 1 — Seletores básicos

Cria uma página HTML que contenha:

• Um título (h1)

• Dois parágrafos com a mesma classe

• Um botão

Quando o botão for clicado:

• O título deve mudar de cor

• Os parágrafos devem mudar o texto

Exercício 2 — Utilização do this

Na mesma página:

• Faz com que, ao clicar num parágrafo, apenas esse parágrafo mude a cor de fundo.