jQuery РSeletores e estiliza̤̣o

dezembro 15, 2008 by admin
Filed under: JavaScript/Ajax, Programação 

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 a este artigo 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.

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

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:

.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.

   <head>
   ...
   <script type="text/javascript" src="jquery-x.x.x.mini.js"></script>
   </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.

  <head>
  ...
   <script type="text/javascript">
     window.onload = function() {
       ...script aqui...
     }
   </script>

A biblioteca jQuery usa um método próprio chamado ready() que é o
equivalente ao método window.onload conforme mostrado a seguir.
   <head>
   ...
   <script type="text/javascript">
    $(document).ready(function() {
       ...script aqui...
       })
   </script>

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

   <head>
   ...
   <script type="text/javascript" src="jquery-x.x.x.mini.js"></script>
   <script type="text/javascript">
    $(document).ready(function() {
       ...script aqui...
       })
   </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:

   css('color', '#fd6');
   css('fontSize', '14px');
   css('background', 'blue');
   css('lineHeight', '1.2');
   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:

   css({
   color: '#fd6',
   background: 'blue',
   lineHeight: '1.2',
   border: '1px dotted #333'
   });

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.

   $('h3');
   $('ul');
   $('#topo');
   $('#principal');
   $('.separador');
   $('.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.

   $('h2:eq(0)'); // seleciona a 1a. ocorrência de h2
   $('ul li:eq(5)'); // seleciona a 6a. ocorrência do item de uma lista
   $('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 uma simples análise do código mostrado a seguir permitirá chegar-se à conclusão sobre o funcionamento do script.

Consultando a marcação apresentada no início da matéria acompanhe atentamente o script a seguir.

  <script type="text/javascript">
  $(document).ready(function(){
    $('#um').css('background', '#ff6');
    $('#dois').css({
      background: '#f00',
      color: '#fff',
      padding: '5px 0',
      textAlign: 'center'
    });
   $('h2:eq(2)').css('color', 'blue');
   $('#tres')
     .next()
     .children('li:first-child')
     .css('fontWeight, 'bold');
   $('.ficha li:nth-child(5)').css('background', '#0f0');
   $('cite').addClass('bloco');
   $('a[href*="livro"]').css('color', '#ff4500');
 });
  </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:

Tags: , ,

Comments

Tell me what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!





SEO Powered by Platinum SEO from Techblissonline
Monetizado com WP-HOTWords.