Vitor A. Vale

Como eu já havia dito no primeiro post jQuery Framework – Write Less, Do More nós podemos manipular elementos DOM, efetuar requisições AJAX e manipular os recursos de CSS 1-3 de forma simples. Está manipulação é feita através dos seletores HTML e alguns seletores específicos do próprio jQuery. Para começar veremos alguns seletores utilizados frequentemente para a manipulação de CSS.

Primeiramente precisamos conhecer os principais seletores utilizados em jQuery para a manipulação dos elementos e posteriormente os seletores utilizados para manipulação direto do CSS.

Elemento: nome

Trata diretamente todos os elementos do tipo (foo) determinado, caso quiséssemos selecionar todos os DIVs do documento:

$("div")

ID: #nome_id

Pega o elemento cujo o ID (sempre precedido por # – sharp) for igual ao informado, no nosso caso seria #nome_id:

$("#nome_id")

Lembrando que quando aplicamos um ID ele dever ser único, para utilizá-lo em mais de um elemento você deve definir como uma classe.

Class: .NomeDaClasse

Seleciona os elementos pertencentes a classe “NomeDaClasse” (sempre precedida por . – ponto final):

$(".NomeDaClasse") //Todos os elementos com essa classe
$("span.NomeDaClasse") //Todos os SPANs que contiverem a classe NomeDaClasse
$("div#box p.NomeDaClasse") //Todos os Ps que contiverem a classe NomeDaClasse e estiverem dentro da DIV com ID box (div#box)

Descendentes: P F

Seleciona todos os elementos F que estejam presentes (descendentes de) em P:

$("#box p") //todos os Ps que estiverem presente dentro de um elemento com ID box

Filhos Direto: P > F

Seleciona todos os elementos F que sejam filhos direto do elemento P:

$("ul#menu > li") //Seleciona todos os li's que sejam filhos direto do ul#menu

Seletores Irmãos: P + F

Seleciona todos os elementos F que venham diretamente após o elemento P:

$("label + input") //Selecionará todo input que tiver um label antecedendo-o

Com conhecimento destes seletores básicos nós já podemos começar a manipular os elementos do CSS, mas caso você queira conhecer outros seletores e sua forma de aplicação visite o GUIA OFICIAL DO JQUERY.

css( name )

Retorna o valor atual da propriedade informada

<div id="box" style="width: 500px"></div>

Agora o javascript ficará:

$(document).ready(function(){
     var divSize = $("div#box").css("width");
     alert(divSize);
});

Teremos como retorno a largura da div

css( name, value )

Permite que modifiquemos as propriedades dos elementos css através do nome do seletor:

<p>Hoje foi um bom dia!</p>

Agora o javascript ficará:

$(document).ready(function(){
     $("p").css("background-color","yellow");
});

Isto definirá a cor de fundo dos elementos Ps como amarelo

Para conhecer os outros seletores acesse o GUIA OFICIAL / SELETORES CSS