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.
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. ...
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;
}
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>
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.
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');
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. });
id e classA 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');
h3.ul.id – seleciona o elemento com id="topo".id – seleciona o elemento com id="principal".class – seleciona o(s) elemento(s) com class="separador".class – seleciona o(s) elemento(s) com class="destaque".: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.
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.
next() — seleciona o elemento seguinte na marcação do documento.children() — seleciona o(s) elemento(s) filho(s).addClass() — adiciona uma classe no(s) elemento(s) selecionado(s).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>
ready().id="um" e aplica uma cor de fundo amarela.id="dois" e usando a sintaxe para múltiplas declarações CSS aplica vários estilos.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.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.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.href.Dúvidas com seletores CSS? Consulte:
Seletores CSS 2.1
Seletores CSS 3
Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…
Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…
Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…
HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…
Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…
Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…
View Comments
Seus artigos sempre me ajudando, espero poder comprar seu livro. Parabéns Maujor!
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.