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.
Você pode saber mais sobre os seletores de atributos no seguinte link:
Basic Filter: http://api.jquery.com/category/selectors/attribute-selectors/
JQuery – Seletores de Atributos
Exemplo:
Neste exemplo utilizamos tipos de seletores para selecionar e modificar os elementos CSS da pagina web.
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", "400px")
.css("float","left")
.css("padding","15px");
$("#footer").css("background-color", "#000000")
.css("color", "white")
.css("clear","both")
.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 de Filtro Atributos **
// ***********************************
// Atributo nome
$("td[colspan]").css("background-color", "yellow");
// Atributo valor
$("td[colspan=3]").css("background-color", "limegreen");
// Atributo por partes do conteudo
$("td[title*=Achar]").css("background-color", "aqua");
// Atributo por partes finais do conteudo
$("td[title$=final]").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>19:00</th>
</tr>
<tr>
<th>Segunda</th>
<td colspan="2"><span>Java</span></td>
<td>C++</td>
<td title="Achar um valor no conteudo do atributo">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 title="Procure minha palavra final">JQuery</td>
</tr>
<tr>
<th>Quinta</th>
<td colspan="3">Python</td>
<td>Linux</td>
</tr>
<tr>
<th>Sexta</th>
<td colspan="3" >Abap</td>
<td><span>NetWeaver</span></td>
</tr>
</table>
</div>
<p>
<span style="background-color:yellow;font-weight:bold">Atributo</span> busca um atributo da tag.
</p>
<p>
<span style="background-color:limegreen;font-weight:bold">Atributo</span> busca um atributo da tag por valor.
</p>
<p>
<span style="background-color:aqua;font-weight:bold">Atributo</span> busca um atributo da tag por partes do valor.
</p>
<p>
<span style="background-color:fuchsia;font-weight:bold">Atributo</span> busca um atributo da tag pelo valor final.
</p>
<div id="footer">
Desenvolvimento Aberto © desevolvimento.aberto@live.com
</div>
</body>
</html>
Ricardo Mantovani
Desenvolvimento Código Aberto 