Neste artigo vamos conhecer alguns seletores existentes na jQuery. A jQuery faz uso dos seletores CSS para acessar os elementos da página, permitindo manipulá-los tanto individualmente quanto em grupo.

SELETORES SIMPLES

Seletor $(id): O seletor de id acessa os elementos cujo valor do atributo id for especificado no parâmetro. A sintaxe de id segue a mesma regra do CSS, onde o id do elemento é precedido por #.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Introdução jQuery </title>

    <!-- Referencia a biblioteca jquery (JS) -->
    <script type="text/javascript" src="jquery.js"></script>

    <!-- Funcionalidades da página -->
    <script type="text/javascript">
  function mostraParagrafo() 
    { 
    $("#paragrafo").fadeIn("slow"); 
    } 

    </script>
</head>
<body>
<input type="button" onclick="mostraParagrafo()" value="exibe paragrafo" /> 
<p id="paragrafo" style="display: none;"> 
  Este paragrafo é um exemplo 
</p>
</body>
</html>
Listagem 1. Exemplo Seletor $(id)
Resultado exemplo de uso seletor $(id)
Figura 1. Resultado exemplo de uso seletor $(id)

Como podemos observar no exemplo acima, utilizamos um botão para disparar o evento de exibição do parágrafo.

Seletor $(classe). O seletor $(classe) acessa o elemento, ou os elementos que tiverem o atributo class com o valor informado no parâmetro. A sintaxe do nome da classe segue as mesmas regras do CSS onde o nome da classe é precedido de ponto.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Introdução jQuery </title>
    <!-- Referencia a biblioteca jquery (JS) -->
    <script type="text/javascript" src="jquery.js"></script>
    <!-- Funcionalidades da página -->
  <style type="text/css"> 
    .escondido{ display: none; } 
  </style>
    <script type="text/javascript">
  function mostraParagrafo() 
  { 
  $(".escondido").slideDown("slow"); 
  }
    </script>
</head>
<body>
<input type="button" onclick="mostraParagrafo()" value="exibe paragrafo" /> 
<p class="escondido"> Paragrafo exemplo 1. </p> 
<p class="escondido"> Paragrafo exemplo 2. </p> 
<p class="escondido"> Paragrafo exemplo 3. </p>
</body>
</html>
Listagem 2. Exemplo seletor $(classe)
Exemplo Seletor $(classe)
Figura 2. Exemplo Seletor $(classe)

Nesse exemplo são exibidos os três parágrafos que tiverem o mesmo valor informado como parâmetro no atributo class.

Seletor $(ELEMENTO). O seletor $(elemento) é utilizado para referenciar uma tag ou conjunto de tags de nome “elemento”. Para isso vamos seguir o mesmo exemplo anterior, mas dessa vez referenciamos os elementos da página a partir da tag.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Introdução jQuery </title>
    <!-- Referencia a biblioteca jquery (JS) -->
    <script type="text/javascript" src="jquery.js"></script>
    <!-- Funcionalidades da página -->
  <style type="text/css"> 
    .escondido{ display: none; } 
  </style>
    <script type="text/javascript">
  function mostraParagrafo() 
  { 
  $("p").slideDown("slow"); 
  }
    </script>
</head>
<body>
<input type="button" onclick="mostraParagrafo()" value="exibe paragrafo" /> 
<p class="escondido"> Paragrafo exemplo 1. </p> 
<p class="escondido"> Paragrafo exemplo 2. </p> 
<p class="escondido"> Paragrafo exemplo 3. </p>
</body>
</html>
Listagem 3. Exemplo seletor $(elemento)
Exemplo do seletor $(elemento)
Figura 3. Exemplo do seletor $(elemento)

AGRUPAMENTO DE SELETORES

Podemos acessar um grupo de elementos da página utilizando um agrupamento de seletores. O agrupamento de seletores é referenciado por uma lista de seletores separados por virgula. Por exemplo: $(‘p, .escondido, #menu’). Vejamos um exemplo.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Introdução jQuery </title>
    <!-- Referencia a biblioteca jquery (JS) -->
    <script type="text/javascript" src="jquery.js"></script>
    <!-- Funcionalidades da página -->
  <style type="text/css"> 
    .escondido{ display: none; } 
  </style>
    <script type="text/javascript">
  $(document).ready(function() { 
    $("a, #menu, h1").css("font-family", "Verdana"); 
    });
    </script>
</head>
<body>
  <h1> Exemplo - Seletores </h1>
  <hr>
  <div id="menu">
  <a href=""> Home </a>--
  <a href=""> Artigos </a>--
  <a href="">Contato </a>
  </div> 
  
</body>
</html>
Listagem 4. Agrupamento de seletores
Resultado exemplo agrupamento de seletores
Figura 4. Resultado exemplo agrupamento de seletores

Como podemos observar nesse exemplo, ao ser carregada a página, a fonte dos elementos referenciados é alterada para “Verdana”.

Seletor :FIRST: Acessa a primeira ocorrência do conjunto de elementos selecionado pelo seletor.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Introdução jQuery </title>
    <!-- Referencia a biblioteca jquery (JS) -->
    <script type="text/javascript" src="jquery.js"></script>
    <!-- Funcionalidades da página -->
  <style type="text/css">
    div {
      width: 200px;
      heigth: 100px;
      border: 1px solid #000;
      margin: 20px;
  <style>
    <script type="text/javascript">
  $(document).ready(function() { 
    $(''#botao'').click(function()
      { 
      $(''p:first'').css(''background-color'', ''red'');
      });
    });
    </script>
</head>
<body>
  <input type="button" id="botao" value="adiciona cor vermelha" />
  <p>Paragrafo 1 irmão da div.</p> 
  <p>Paragrafo 2 irmão da div.</p> 
  <p>Paragrafo 3 irmão da div.</p>
</body>
</html>
Listagem 5. Exemplo de uso do seletor :FirstE

Nesse exemplo o primeiro parágrafo é marcado com o fundo em vermelho.

Exemplo do Seletor :First
Figura 5. Exemplo do Seletor :First

Esses são alguns exemplos de como utilizar os seletores existentes na jQuery. Os demais seletores CSS, inclusive das CSS3, podem ser igualmente utilizados.

Confira também