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.
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 ímparNota: 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.
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:
De 0 a 10, o quanto você recomendaria este artigo para um amigo?