Aulas
Disciplinas

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

arrow_back Aula 07 - jQuery (Parte 1)

Seletores Básicos

Pois bem, vamos definir melhor o que são os seletores usados no jQuery. Você irá notar que alguns seletores representam elementos específicos e únicos da página, já outros representam um conjunto de elementos.

Por exemplo, você pode, por meio do seletor a seguir, selecionar todos os elementos da página HTML:

Por outro lado, se quisermos selecionar apenas os elementos de um determinado tipo, basta passar o nome do tipo entre aspas, como em:

Veja isto aplicado a um exemplo concreto, onde queremos selecionar todos os elementos do tipo 'div' (tag <div> do HTML):

Caso você queira selecionar um elemento específico, poderá fazê-lo por meio de seu id, passado entre aspas e iniciado pelo caractere '#':

Você pode também selecionar elementos pela sua classe. Para isso, dentro do seletor, utilize o caractere ponto (.) seguido pelo nome da classe (atributo 'class' da tag HTML). Por exemplo, para selecionar todos os elementos cuja classe é 'classeA', basta utilizar o seletor '.classeA', como mostrado a seguir:

Observe que é possível misturar os exemplos acima para compor um só seletor. Por exemplo, para selecionar todos os parágrafos (tag <p>) cuja classe seja 'classeA' (<p class='classeA'>), utilizamos o seguinte:

Veja, agora, um exemplo de código HTML completo que faz uso do jQuery para mudar o texto mostrado na tela:

Algumas observações sobre esse código:

  • A função $(document).ready() (linha 7) informa ao navegador que, após carregar toda página HTML, a função passada como parâmetro deve ser invocada. Note que essa função produz o mesmo resultado que especificar o atributo 'onload' da tag 'body' (veja nas aulas anteriores).
  • A função 'text()' (linha 10) define o texto do (s) elemento (s) selecionado (s).

Ao acessar esse código por um navegador web, você observará o seguinte resultado:

Versão 5.3 - Todos os Direitos reservados