Home
índice
Página anterior

Seletores de Filtro

Os seletores de filtro permitem a identificação de um elemento, baseado na ordem de seu aparecimento, no índice de uma coleção. Na documentação da jQuery serão encontrados dentro de Seletors, os filtros básicos. Seletores Em Basic Filter tem por exemplo:

• :animated Selector
• :eq()Selector

Permite a seleção baseado em um índice específico. (começa da posição zero). No exemplo abaixo o índice 3.

	 No javaScript:
	 $(document).ready(function(){
	 $("tbody tr:eq(3)")
	.css("background", "#CCC");
	 });
    

• :even Selector

Seleciona os elementos seguindo uma ordem par ou ímpar. Efeito de zebra em tabelas.

     No javaScript:
	 $(document).ready(function(){
	 $("tbody tr:even")
	 .css("background", "#CCC");
	 });
 

• :odd Selector

Seleciona os elementos seguindo uma ordem ímpar. Efeito de zebra em tabelas.

    No javaScript:
	$(document).ready(function(){
	$("tbody tr:odd")
	.css("background", "#CCC");
	});
 

• :first Selector

Seleciona o primeiro elemento dentro da coleção.

 No javaScript:
  $(document).ready(function(){
  $("tbody tr:first")
  .css("background", "#CCC");
  });
 

• :gt() Selector

Greater than, maior que um determinado índice. Depois do índice especificado todas as faixas ficam coloridas.

 No javaScript:
 $(document).ready(function(){
 $("tbody tr:gt(1)")
 .css("background", "#CCC");
 });
 

• :lt() Selector

Less than, menor que um determinado índice. Antes do índice especificado todas as faixas ficam coloridas.

$(document).ready(function(){

$("tbody tr:lt(2)")

.css("background", "#CCC");

});

• :header Selector
• :last Selector - Seleciona o último elemento dentro da coleção.:

No javaScript:
$(document).ready(function(){:
$("tbody tr:last"):
.css("background", "#CCC");:
});:

Para Aplicar Cores em Tabelas

No Html:
 <table border="1">
 <thead>
   <tr>
	<th scope="row">Carro</th>
	<td>Marca</td>
	<td>Cor</td>
   </tr>

   </thead> 

   <tbody> 

   <tr>
	<th scope="row">Uno</th>
	<td>Fiat</td>
	<td>Azul</td>
   </tr>

   <tr>
	<th scope="row">Pálio</th>
	<td>Fiat</td>
	<td>Prata</td>
   </tr>

   <tr>
	<th scope="row">Gol;/th>
	<td>Volkswagem</td>
	<td>Preto</td>
   </tr>

   <tr>
	<th scope="row">Fiesta</th>
	<td>Ford</td>
	<td>Prata</td>
   </tr>
 </tbody>
 </table>
 

No javaScript:
$(document).ready(function(){
$("tbody") //aqui a tabela toda fica colorida
.css("background", "#CCC");
});

Carro	Marca	Cor
Uno	Fiat	Azul
Pálio	Fiat	Prata
Gol	Volkswagem	Preto
Fiesta	Ford	Prata
Parati	Volkswagem	Beige
Fiesta	Ford	Preto