Seletores CSS com jQuery
Postado em: 18 de novembro de 2008 por Pedro RogérioO Framework JavaScript jQuery nos oferece uma grande facilidade para manipular css na página de forma dinâmica. A única coisa que precisamos aprender é como acessar esses distintos elementos em nossa página web. Basta ter um pouco de conhecimento dos seletores que o jQuery disponibiliza: Seletores CSS, XPath, de formulário, mas os que você irá mais utilizar no seu dia-a-dia são os seguintes:
Elemento: foo
Todos os elementos que são do tipo foo. Exemplo:
$("div")
Seleciona todas as divs do documento HTML.
ID: #meuid
O elemento cujo o ID seja igual a #meuid. Exemplo:
$("#meuid")
Lembrem-se que os IDs nas páginas devem ser únicos, caso sejam repetidos, ele só irá pegar o primeiro elemento na página com ID citado.
Class: .minhaclasse
Seleciona todos os elementos que tenham a classe “minhaclasse”. Exemplo:
$(".minhaclasse") //Todos os elementos com a classe .minhaclasse
$("p.minhaclasse") //Todas as tags p com a classe .minhaclasse
$("div.minhaclasse") //Todas as divs com a classe .minhaclasse
Descendentes: E F
Seleciona todos os elementos coincidentes com F que sejam descendentes de E. Exemplo:
$("#container p") //Seleciona todos os elementos p que sejam descendentes de um elemento cujo o id seja #container
Filhos diretos: E > F
Seleciona todos os elementos coincidentes com F que sejam filhos diretos de E. Exemplo:
$("#nav > li") //Seleciona todas as tags li's que sejam filhos diretos de um elemento com o id igual a #nav
Seletores irmão: E + F
Seleciona todos os elementos coincidentes com F que venham imediatamente depois de E. Exemplo:
$("label + input") //Seleciona todos os inputs que tiverem um label antes
Seletores irmão de combinação: E ~ F
Seleciona todos os elementos coincidentes com F que estão no mesmo nível e após E. Exemplo:
$("h2 ~ p") //Seleciona o elemento p que esteja no mesmo nível e após o h2
Pseudo seletores
:first
Seleciona apenas o primeiro li filho do elemento que contenha o id #nav:
$("#nav li:first")
$("#nav li:first-child") // Uma outra forma alternativa que também funciona
:last-child
Seleciona apenas o último li filho do elemento que contenha o id #nav:
$("#nav li:last")
$("#nav li:last-child") // Uma outra forma alternativa que também funciona
dd
Seleciona todos os td’s que sejam pares na árvore do HTML:
$("td:odd")
:even
Seleciona todos os td’s que sejam ímpares na árvore do HTML:
$("td:even")
:text
Seleciona todos os inputs que sejam do tipo texto:
$(":text")
Ampliando os seletores
No guia ofcial do jQuery, você pode encontrar mais seletores do tipo:
css( name )
Devolve o valor do estilo de uma propriedade CSS para o primeiro elemento encontrado. Se atentem ao seguinte HTML:
<p style="font-weight: bold;">Texto de exemplo</p>
O JavaScript fica da seguinte forma:
$(document).ready(function() {
var fonte = $("p").css("font-weight");
alert(fonte);
});
Retorna um alert com o texto “bold”
css( properties )
Estabele propriedades específicadas a todos os elementos coincidentes. Útil quando devemos estabelecer várias propriedades:
<div>Texto de exemplo</div>
O JavaScript fica da seguinte forma:
$(document).ready(function() {
$("div").css({ color: "#FFFFFF", background: "#000000" });
});
Aqui definimos que a cor do texto será branco e o fundo preto.
css( name, value )
Estabelece um valor a propriedade especificada em todos os elementos coincidentes. Muito semelhante a regra anterior, seu uso seria:
$(document).ready(function() {
$("p").css("color","red");
});
height()
Obtém a altura em px do primeiro elemento coincidente:
$("#div1").height();
Nos retornaria a altura em px do elemento cujo id seja #div1.
width()
Obtém a largura em px do primeiro elemento coincidente:
$("#div1").width();
Nos retornaria a largura em px do elemento cujo id seja #div1.
Em um exemplo muito simples, vamos alterar a cor de fundo da página ao clicar em um elemento. Se atentem ao seguinte código:
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("p").click(function () {
alert("OK");
$("body").css("background","red");
});
});
</script>
</head>
<body>
<p>Clique aqui para alterar o fundo da página</p>
</body>
</html>
Agora é só ver o exemplo funcionando.
Isso pode lhe interessar:
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web é proprietário do blog CSS no Lanche, blog voltado ao desenvolvimento front-end.
Neto disse: 18.11.08 ás 08:37
Ótimo artigo! Bons exemplos, parabéns!
Celso disse: 18.11.08 ás 08:48
E eu vou falar o que hein mostro sagrado rs meus parabéns Pedrão!
Alex Batista disse: 18.11.08 ás 09:21
Muito básico. O nível já foi mais alto!
Leo Caseiro disse: 18.11.08 ás 09:58
jQuery trabalha perfeitamente com DOM e CSS!
Esse é “O FRAMEWORK”
Danilo disse: 18.11.08 ás 10:51
legal o post… será muito bom quando podermos trabalhar com CSS3. Vai dar muito poder ao css, eliminar bastante javascript e “if” de linguagem de servidor…
fernando filho disse: 05.12.08 ás 08:04
Exelente! resumo perfeito! Seria mais interessante alguns exemplos com combinações de seletores.
Alexandre disse: 17.04.09 ás 15:08
Nossa … d+ … jQuery é revolucionador … impressionante … hoje pesquisando ainda encontrei tbm um outro script de imagens panorâmicas … jQuery na cabeça e na veia! ^^
Ótimo post!
Tiago disse: 24.06.09 ás 10:11
Bom post!
Me ajudou a resolver um problema.
vlw!