O JQuery emprestou do CSS o conceito de seletores para tornar fácil manipular qualquer elemento em uma pagina da web. Os seletores permitem acesso direto aos elementos de uma pagina utilizando varias técnicas diferentes, como seleção por atributos, seletores básicos, por filhos, utilizando filtros, forms, hierarquia, visibilidade e outros.
Os seletores hierárquicos são divididos em quatro tipos, eles são:
- $(parente>filho) – Seleciona todos os filhos do parente especificado.
- $(antecessor descendente) – Seleciona todos os antecessores de um determinado descendente.
- $(prévio + próximo) – Seleciona todos os próximos elementos adjacentes.
- $(prévio ~ irmãos) – Seleciona todos os elementos irmãos do elemento prévio.
JQuery – Seletor de Hierárquia
Exemplo:
Neste exemplo utilizamos tipos de seletores para selecionar e modificar os elementos CSS da pagina web. Preste atenção ao código HTML que contem elementos com identificadores que são os elementos prévios para se utilizar a seleção por hierarquia.
JQuery
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Desenvolvimento Aberto</title>
<!-- Está é uma instalação do JQuery, você apenas precisa apontar
para o respectivo script da versão que você deseja utilizar -->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>
<!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
Todo o script roda no evento equivalent ao OnLoad da pagina html-->
<script>
$( document ).ready(function() {
// Seleciona por ID
$("#header").css("background-color", "#000000")
.css("color", "white")
.css("padding", "5px")
.css("text-align","center");
$("#section").css("width", "850px")
.css("float","left")
.css("padding","15px");
$("#footer").css("background-color", "#000000")
.css("color", "white")
.css("text-align", "center")
.css("padding","5px");
// Seleciona por Classe
$(".caixa").css("-moz-box-shadow", "5px 5px 5px 5px #777777")
.css("-webkit-box-shadow", "5px 5px 5px 5px #777777")
.css("box-shadow", "5px 5px 5px 5px #777777")
.css("padding", "8px");
// Seleciona por elementos
$("td, th").css("border","none")
.css("background-color","#dddddd")
.css("padding","5px")
.css("width","100px")
$("a").css("color", "#000000");
// ****************************
// ** Seletores hierarquicos **
// ****************************
// Seleciona por elemento descendente
$("table span").css("background-color","yellow");
// Seleciona filhos
$("tr > th").css("background-color","limegreen");
// Seleciona irmãos (siblings)
$("#irmao ~ td").css("background-color","aqua");
// Seleciona adjacente
$("#adjacente + td").css("background-color","fuchsia");
});
</script>
</head>
<body>
<div id="header">
<h1>Desenvolvimento Aberto</h1>
</div>
<div id="section">
<table class="caixa">
<tr>
<th></th>
<th>10:00</th>
<th>14:00</th>
<th>16:00</th>
<th><span> 19:00</span></th>
</tr>
<tr>
<th>Segunda</th>
<td colspan="2" id="irmao">Java</td>
<td>C++</td>
<td>C#</td>
</tr>
<tr>
<th>Terça</th>
<td colspan="3">Ruby</td>
<td>Rails</td>
</tr>
<tr>
<th>Quarta</th>
<td colspan="2">Javascript</td>
<td>CSS</td>
<td>JQuery</td>
</tr>
<tr>
<th>Quinta</th>
<td colspan="3">Python</td>
<td>Linux</td>
</tr>
<tr>
<th>Sexta</th>
<td colspan="3" id="adjacente">Abap</td>
<td>NetWeaver</td>
</tr>
</table>
</div>
<p>
<span style="background-color:yellow;font-weight:bold">Seletor</span> de descendente.
</p>
<p>
<span style="background-color:limegreen;font-weight:bold">Seletor</span> de filhos.
</p>
<p>
<span style="background-color:aqua;font-weight:bold">Seletor</span> de irmãos.
</p>
<p>
<span style="background-color:fuchsia;font-weight:bold">Seletor</span> de adjacente.
</p>
<div id="footer">
Desenvolvimento Aberto © desevolvimento.aberto@live.com
</div>
</body>
</html>
Ricardo Mantovani
Desenvolvimento Código Aberto 