Estilização e seletores jQuery
Publicado em: 2008-11-22 — 44.075 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 comid="topo". - Linha 4 — Seletor
id– seleciona o elemento comid="principal". - Linha 5 — Seletor
class– seleciona o(s) elemento(s) comclass="separador". - Linha 6 — Seletor
class– seleciona o(s) elemento(s) comclass="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 deh2), usa o métodonext()para selecionar o elemento que vem depois dele (listaul), procura entre os filhoschildren()deulaquele que é o primeiro filhofirst-childe a ele aplica negrito. - Linha 15 — Seleciona os elementos
lique são descendente do elemento comclass="ficha", procura a quinta ocorrêncianth:child(5)e a ela aplica uma cor de fundo verde. - Linha 16 — Seleciona os elementos
citee 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 elementosciteda 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
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
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 https://www.maujor.com/blog/2008/11/22/estilizacao-e-seletores-jquery/trackback no seu site.
Seus artigos sempre me ajudando, espero poder comprar seu livro. Parabéns Maujor!
[…] Estilização e seletores jQuery Fundamentos básicos de seleção e estilização com uso da biblioteca jQuery. […]
Nossa, muito bom o artigo Maujor!
Me ajudou bastante.
Parabéns!
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
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!
Muito, muito bom, isso vai ajudar muita gente. Parabéns.