Este é o terceiro artigo da série “jQuery – Início, Meio e Fim”. No primeiro artigo, apresentamos uma visão geral da biblioteca. Já no segundo artigo, apresentamos alguns aspectos fundamentais para quem deseja trabalhar com jQuery de forma correta. Se você está chegando agora e não possui conceitos equivalentes aos apresentados nos artigos anteriores, recomendo fortemente a leitura dos mesmos. Os links para leitura dos dois primeiros artigos podem ser encontrados abaixo.
- jQuery – Início, Meio e Fim – Parte 1 – Visão geral da biblioteca
- jQuery – Início, Meio e Fim – Parte 2 – Conceitos fundamentais sobre a biblioteca
No artigo de hoje, começaremos a falar especificamente sobre seletores. Sim, iniciaremos, pois, o completo entendimento dos seletores jQuery são a base para a construção de aplicações robustas com a biblioteca. Nesta primeira etapa (em relação aos seletores), falaremos da relação entre jQuery e seletores CSS. Como poderá ser constatado mais adiante, seletores CSS e jQuery formam uma dupla praticamente imbatível na implementação de RIA.
Alguns conceitos sobre seletores CSS
jQuery segue todas as recomendações da W3C em relação ao CSS, desde a versão 1 até a atual. Assim, a integração entre scripts jQuery e os seletores CSS é suave e funcional. É fundamental para o pretenso desenvolvedor jQuery, entender como se dá esta estrita relação. A seguir, veremos os principais aspectos desta abordagem.
Tipos de seletores CSS
- Seletor de Tipo: um seletor de tipo é uma string que faz menção a uma tag de marcação HTML. Considere a estrutura CSS apresentada pela Listagem 1. Com base na estrutura apresentada, podemos dizer que “p” é um seletor de tipo, pois, define um estilo padrão para todos os parágrafos da página.
[css]
p
{
font-family:”Lucida Sans Unicode”, Arial;
font-size: 100%;
text-align:left;
letter-spacing:-1px;
}
[/css]Listagem 1: Estrutura CSS para uma tag “p”
- Seletor com base em identificador: seletores de identificação única são aqueles que definem estilos para elementos marcados com uma string identificadora através de atributos “id” em tag’s HTML (<div id=”BoxImagem”></div>, por exemplo). Em CSS, tais strings são obrigatóriamente precedidas pelo caracter “#”, conforme apresenta a Listagem 2. Neste caso, nosso seletor é “#BoxImagem”.
[css]
#BoxImagem
{
width:200px;
height:100px;
background-image:url(‘/Imagens/bg.jpg’);
}
[/css]Listagem 2: Estrutura CSS para um identificador “BoxImagem”
- Seletor de classe: um seletor de classe é aquele que define um estilo genérico, que pode ser aplicado a n elementos HTML (div’s, textos, link’s, span’s, etc.). Para associação do estilo (classe) com o elemento HTML no arquivo, utiliza-se o atributo “class=nome_estilo”. A Listagem 3 apresenta apresenta a estrutura de um seletor para ser aplicada aos textos de uma página.
[css]
.TextoPadrao
{
font-family: Arial, Helvetica;
font-size:14px;
color: #000;
letter-spacing:-1px;
}
[/css]
Listagem 3: Estrtura CSS para um seletor do tipo “classe”
Ao contrário do que você possa estar pensando, este artigo não é sobre CSS, estamos apenas apresentando os conceitos básicos de seletores CSS para que possamos então entender como o jQuery se relaciona com eles. Por falar em jQuery, agora que entendemos os três tipos fundamentais de seletores CSS, podemos então analisar com mais calma o código apresentado pela Listagem 4.
[javascript]
//Selecionando seletores de tipo com jQuery
…
$(‘p’) //os alvos do seletor são todos os parágrafos da página
$(‘div’) //os alvos do seletor são todas as divs da página
…
//Selecionando seletores indentificadores com jQuery
…
$(‘#BoxImagem’) //o alvo (específico) do seletor jQuery é a div “BoxImagem”
…
//Selecionando seletores de classes com jQuery
…
$(‘.TextoPadrao’) //os alvos do seletor jQuery são todos os elementos que possuem o atributo class decorado com “TextoPadrao”
…
[/javascript]
Listagem 4: Consumindo seletores CSS através de seletores jQuery
Classificação de seletores CSS
Os seletores CSS podem ser classificados em três categorias. São elas:
- Seletor simples (unitário): seletores constituídos de apenas um elemento. Este elemento pode ser composto ou não, conforme apresentam as Listagens 5 e 6. Note que, na Listagem 5, no exemplo apresentado, temos as três possibilidades de composição, isto é, composição simples (apenas o elemento HTML, linha 1), associação do elemento HTML com uma classe (linha 2) e, por fim, associação do elemento HTML com uma pseudo-classe (linha 3). Na Listagem 6, o construtor do jQuery apenas aponta para os seletores CSS.
[css]
div {…}
div.Direita {…}
div#Titulo {…}
[/css]
Listagem 5: Seletores simples (com e sem composição)
[javascript]
$(‘div’)
$(‘div.Direita’)
$(‘div#Titulo’)
[/javascript]
Listagem 6: Seletores jQuery apontando para seletores CSS simples
- Seletor universal (global): são seletores que possuem o poder de indicar todas as instânicas de todos os elementos. Para realizar o apontamento com jQuery para este seletor (Listagem 8) referenciamos no construtor do jQuery o caracter “*”. A Listagem 7 apresenta a construção de um estilo para este seletor.
[css]
*
{
background-color: #FFF;
font-family:”Lucida Sans Unicode”;
}
[/css]
Listagem 7: Exemplo de estilo definido para seletor universal
[javascript]
…
$(‘*’)
…
[/javascript]
Listagem 8: Construtor do jQuery apontando para o seletor universal
- Seletor de atributo: este é um tipo especial de seletor, pois, trata do casamento com atributos definidos pelos elementos HTML. Por exemplo, para a tag de marcação <input type=”text” />, temos como atributo o elemento type=”text”. Com o seletor de atributo, é possível fazer combinações diversas, fazendo com que a página obtenha resultados interessantes. A Tabela 1 apresenta as possíveis combinações com os seletores.[TABLE=2]
Tabela 1: Combinações possíveis para seletores de atributos
A Listagem 9 apresenta a sintaxe CSS para a escrita de seletores de atributos e a Listagem 10 apresenta a sintaxe do construtor jQuery para apontar para estes seletores.
[css]
input[type] {…}
abbr[class=”destaque”] {…}
h1[class^=”Ex”] {…}
div[class$=”plo”] {…}
p[class*=”Fabricio”] {…}
[/css]Listagem 9: Seletores de atributos (sintaxe CSS)
[javascript]
$(‘input[type]’)
$(‘abbr[class=”destaque”]’)
$(‘h1[class^=”Ex”]’)
$(‘div[class$=”plo”]’)
$(‘p[class*=”Fabricio”]’)
[/javascript]Listagem 10: Construtores jQuery apontando para seletores CSS
- Seletores compostos: constituído pela combinação de no mínimo dois seletores simples. Para realizar a composição, quatro mecanismos são disponibilizados. A Tabela 2 apresenta estes recursos em detalhes.
[TABLE=3]
Tabela 2: Seletores compostos e seus significados
Bom pessoal, por hoje vamos ficando por aqui. No próximo artigo falaremos sobre funções padrão do jQuery e falaremos mais especificamente sobre seletores jQuery (com muitos exemplos). Não perca!
Não esqueça de deixar seus comentários, críticas e/ou sugestões. Eles são a única forma de melhorarmos a qualidade dos textos que são disponibilizados. Grande abraço e até lá! :-).
Facebook
Twitter
Instagram
LinkedIn
RSS