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:

AخA
1
$("*")

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

1
1
$("tipo_do_elemento")

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

1
1
$("div")

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

1
1
$("#id_do_elemento")

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:

1
1
$(".classeA")

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:

1
1
$("p.classeA").text("Combinando seletores!");

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

​x
1
<html>
2
    <head>
3
        <title>Aprendendo jQuery</title>
4
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
5
        <script type="text/javascript">
6
            $(document).ready(
7
                function()
8
                {
9
                    $("p.classeA").text("Combinando seletores!");
10
                });
11
        </script>
12
    </head>
13
​
14
    <body>
15
        <p class="classeA">Aprendendo jQuery</p>
16
        <p class="classeB">Aprendendo jQuery</p>
17
        <p class="classeC">Aprendendo jQuery</p>
18
    </body>
19
</html>

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:

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

Sumário

Versão 5.3 - Todos os Direitos reservados