Desenvolvimento - Javascript

jQuery — Seletores e estilização

Esta matéria tem por finalidade mostrar os fundamentos básicos de seleção e estilização com uso da biblioteca jQuery.

por Maurício Samy Silva


Esta matéria tem por finalidade mostrar os fundamentos básicos de seleção e estilização com uso da biblioteca jQuery.

Desenvolvemos uma página de apoio ao tutorial na qual é possível verificar na prática o funcionamento do script aqui mostrado. A página encontra-se neste endereço e sinta-se à vontade para visitá-la e constatar seu funcionamento antes de prosseguir a leitura.

Marcação HTML

Observe com cuidado a marcação da página de apoio na qual aplicaremos os scripts de seleção e estilização.

1.   ...
2.   <h1>jQuery — Seletores</h1>
3.    <p>Página criada...</p>
4.   <h2 id="um">Apresentação da jQuery</h2>
5.    <p>jQuery é uma poderosa biblioteca...</p>
6.    <p>Desenvolvedores especialistas em JavaScript...</p>
7.   <h2 id="dois">Livro jQuery do Maujor</h2>
8.    <p>Este livro, na primeira parte...</p>
9.    <p>Na segunda parte...</p>
10.   <p><a href="http://www.livrojquery.com.br">Visite...</a></p>
11.  <h2 id="tres">Ficha Cadastral</h2>
12.   <ul class="ficha">
13.    <li>Título: jQuery</li>
14.    <li>Subtítulo: A biblioteca do programador JavaScript</li>
15.    <li>Autor: Maurício Samy Silva</li>
16.    <li>Nacionalidade do autor: Brasileiro</li>
17.    <li>ISBN: 978-85-7522-178-5</li>
18.    <li>Dimensões: 17x24 cm</li>
19.    <li>Número páginas: 432</li>
20.    <li>Preço: R$75,00</li>
21.    <li>Tiragem: 2.000 exemplares</li>
22.    <li>Palavras-chave: jQuery, JavaScript...</li>
23.   </ul>
24.  ...

CSS

A folha de estilos para o layout e apresentação da página de apoio não será analisada por ser irrelevante para o funcionamento do script. Contudo, há uma classe CSS chamada bloco, não constante da marcação, com respectiva regra CSS que será usada pelo script para demonstrar a adição de uma classe com uso do método addClass, como veremos adiante. A regra CSS é a seguinte:

1.   .bloco {
	display:block;
	border:1px solid #000;
	}

Linkando os scripts

Scripts tal como folhas de estilos devem ser linkados ao documento onde serão empregados. Um documento que use a biblioteca jQuery deve estar linkado a ela como mostrado a seguir.

1.   <head>
2.   ...
3.   <script type="text/javascript" src="jquery-x.x.x.mini.js"></script>
4.   </head>

E os scripts que desenvolvemos para adicionar efeitos jQuery nas páginas devem ser também linkados ao(s) documento(s) que o(s) utilize(m). Na página de apoio usaremos o script incorporado ao documento para facilitar a consulta e estudo quando da visualização do código-fonte da página.

Scripts escritos em linguagem JavaScript e que façam busca de elementos da marcação para aplicar seus efeitos não funcionarão se forem declarados antes que o documento tenha sido carregado.
Quando colocamos um script na seção head do documento precisamos de um mecanismo para informar ao script que espere o documento ser carregado para entrar em ação. Em JavaScript tradicional a sintaxe consiste em encapsular o script em uma função definida para o método window.onload como mostrado a seguir.

1.   <head>
2.   ...
3.   <script type="text/javascript">
4.     window.onload = function() {
5.       ...script aqui...
6.     }
7.   </script>

A biblioteca jQuery usa um método próprio chamado ready() que é o equivalente ao método window.onload conforme mostrado a seguir.

1.   <head>
2.   ...
3.   <script type="text/javascript">
4.    $(document).ready(function() {
5.       ...script aqui...
6.       })
7.   </script>

Agora estamos com o documento em condições de receber os scripts jQuery. A seção head contém o seguinte.

1.   <head>
2.   ...
3.   <script type="text/javascript" src="jquery-x.x.x.mini.js"></script>
4.   <script type="text/javascript">
5.    $(document).ready(function() {
6.       ...script aqui...
7.       })
8.   </script>

Método para adicionar estilos

A biblioteca jQuery dispõe do método css() que permite adicionar estilos aos elementos de um documento. O método admite duas sintaxes conforme mostrado a seguir.

Sintaxe para uma declaração CSS

Usada para regra CSS com apenas uma declaração a ser aplicada no elemento alvo do seletor. As propriedades CSS compostas de mais de um termo como são font-size, line-height, border-top-width têm seus equivalentes JavaScripts em grafia conhecida como camelCase e devem ser escritas fontSize, lineHeight, borderTopWidth respectivamente.

Exemplos:

1.   css("color", "#fd6");
2.   css("fontSize", "14px");
3.   css("background", "blue");
4.   css("lineHeight", "1.2");
5.   css("border", "1px dotted #333");

Sintaxe para mais de uma declaração CSS

Usada para regra CSS com mais de uma declaração a ser aplicada no elemento alvo do seletor.

Exemplo:

1.   css({
2.   color: "#fd6",
3.   background: "blue",
4.   lineHeight: "1.2",
5.   border: "1px dotted #333"
6.   });

Seletores tipo, id e class

A biblioteca jQuery faz uso dos seletores CSS para selecionar seus alvos na árvore do documento (DOM — Document Object Model). Tal como as CSS existem os seletores tipo, de identificador único e de classe cuja sintaxe é mostrada a seguir.

1.   $("h3"); 
2.   $("ul"); 
3.   $("#topo");
4.   $("#principal");
5.   $(".separador");
6.   $(".destaque");

Código comentado

  • Linha 1 — Seletor tipo - seleciona os elementos h3.
  • Linha 2 — Seletor tipo - seleciona os elementos ul.
  • Linha 3 — Seletor id - seleciona o elemento com id="topo".
  • Linha 4 — Seletor id - seleciona o elemento com id="principal".
  • Linha 5 — Seletor class - seleciona o(s) elemento(s) com class="separador".
  • Linha 6 — Seletor class - seleciona o(s) elemento(s) com class="destaque".

Pseudoseletor :eq()

Uma funcionalidade poderosa da biblioteca jQuery é que as seleções retornam um conjunto que pode ser manipulado como array. Isto significa que ao contrário do que ocorre com a linguagem JavaScript formal não há necessidade de construção de loops para se percorrer uma seleção de elementos no DOM. O pseudo seletor :eq() permite selecionar uma ou mais ocorrências de uma seleção jQuery, conforme esclarecem os exemplos a seguir.

1.   $("h2:eq(0)"); // seleciona a 1a. ocorrência de h2 
2.   $("ul li:eq(5)"); // seleciona a 6a. ocorrência do item de uma lista
3.   $("p:eq(2n)"); // seleciona parágrafos de ordem ímpar

Nota: O parâmetro de seleção deste peseudoseletor pode ser um número ou uma expressão e segue o sistema de contagem padrão da linguagem JavaScript, isto é a contagem inicia em zero e não em um. Razão pela qual o seletor mostrado na linha 3 do código acima seleciona ocorrências ímpares e não pares, pois: 2x0 = 0 (primeira ocorrência), 2x1=2 (terceira ocorrência), 2x2=4 (quinta ocorrência), e assim por diante.

Métodos next(), children() e addClass()

Para a página de apoio que preparamos para demonstrar os efeitos estudados nesta matéria usaremos estes três métodos cuja finalidade é a seguinte.

  • Método next() — seleciona o elemento seguinte na marcação do documento.
  • Método children() — seleciona o(s) elemento(s) filho(s).
  • Método addClass() — adiciona uma classe no(s) elemento(s) selecionado(s).

Aplicação prática

Vamos aplicar os conceitos de estilização e seleção estudados anteriormente para desenvolver o script que faz funcionar a página de apoio que você visitou, conforme sugerido no início desta matéria. A sintaxe é tão simples que eu tenho certeza que um simples análise do código mostrado a seguir permitirá chegar-se a conclusão sobre o funcionamento do script.
Consultando a marcação apresentada no início da matéria acompanhe atentamente o script a seguir.

1.  <script type="text/javascript">
2.  $(document).ready(function(){
3.    $("#um").css("background", "#ff6"); 
4.    $("#dois").css({
5.      background: "#f00",
6.      color: "#fff",
7.      padding: "5px 0",
8.      textAlign: "center"
9.    }); 
10.   $("h2:eq(2)").css("color", "blue");
11.   $("#tres")
12.     .next()
13.     .children("li:first-child")
14.     .css("fontWeight, "bold");
15.   $(".ficha li:nth-child(5)").css("background", "#0f0");
16.   $("cite").addClass("bloco");
17.   $("a[href*="livro"]").css("color", "#ff4500");
18. });
19.  </script>

Código comentado

  • Linhas 2 até 19 — Container do método ready().
  • Linha 3 — Seleciona o elemento com id="um" e aplica uma cor de fundo amarela.
  • Linhas 4 até 9 — Seleciona o elemento com id="dois" e usando a sintaxe para múltiplas declarações CSS aplica vários estilos.
  • Linha 10 — Usa o pseudoseletor :eq() para selecionar a terceira ocorrência de cabeçalho nível 2 e aplica a cor azul para o seu texto.
  • Linha 11 até 14 — Seleciona o elemento com id="tres" (terceira ocorrência de h2), usa o método next() para selecionar o elemento que vem depois dele (lista ul), procura entre os filhos children() de ul aquele que é o primeiro filho first-child e a ele aplica negrito.
  • Linha 15 — Seleciona os elementos li que são descendente do elemento com class="ficha", procura a quinta ocorrência nth:child(5)e a ela aplica uma cor de fundo verde.
  • Linha 16 — Seleciona os elementos cite e a eles adiciona a classe bloco. Notar que foi definida uma regra de estilo para esta classe e em consequência quando o script entrar em ação os elementos cite da página seguirão esta regra CSS.
  • Linha 17 — Usa um seletor de atributo para mudar a cor dos links que contenham a palavra "livro" no atributo href.

Dúvidas com seletores CSS? Consulte:
Seletores CSS 2.1
Seletores CSS 3