Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Estilização e seletores jQuery

Publicado em: 2008-11-22 — 36.603 visualizacoes         

Este tutorial 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: 2×0 = 0 (primeira ocorrência), 2×1=2 (terceira ocorrência), 2×2=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

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

Esta matéria foi publicada em: 2008-11-22 (sábado). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2008/11/22/estilizacao-e-seletores-jquery/trackback no seu site.

5 comentários na matéria: “Estilização e seletores jQuery”

  1. jQuery教學資源 - 工作達人(Job Da Ren) disse:

    […] Estilização e seletores jQuery Fundamentos básicos de seleção e estilização com uso da biblioteca jQuery. […]

  2. Leandro FielNo Gravatar disse:

    Nossa, muito bom o artigo Maujor!
    Me ajudou bastante.
    Parabéns!

  3. Victor BauerNo Gravatar disse:

    Muito boa, Maujor!!

    Senscional matéria! vou com prar o livro!! rsrs

    (apenas uma correção: na “Aplicação prática, linha 14” o atributo “fontWeight” precisa ser fechado…)

    Abcs

  4. André SimõesNo Gravatar disse:

    Adorei o tutorial. Tentei uma vez fazer esta seleção de elementos em sequencia mas não tinha conseguido, agora já sei como fazer. Muito obrigado!

    Nos últimos 30 dias li, “Princípios do Web Design Maravilhoso” e “Não me faça pensar!”, com certeza o próximo livro será o seu!

  5. Pedro RogérioNo Gravatar disse:

    Muito, muito bom, isso vai ajudar muita gente. Parabéns.

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo