Capítulo 10

jQuery

"O primeiro problema para todos, homens e mulheres, não é aprender, mas desaprender" -- Gloria Steinem

Por conta das dificuldades enfrentadas pelos programadores JavaScript para páginas Web, foi criada uma biblioteca que traz diversas funcionalidades voltadas à solução dos problemas mais difíceis de serem contornados com o uso do JavaScript puro.

A principal vantagem na adoção de uma biblioteca de JavaScript é permitir uma maior compatibilidade de um mesmo código com diversos navegadores. Uma maneira de se atingir esse objetivo é criando funções que verificam quaisquer características necessárias e permitam que o programador escreva um código único para todos os navegadores.

Além dessa vantagem, o jQuery, que é hoje a biblioteca padrão na programação front-end para Web, traz uma sintaxe mais "fluida" nas tarefas mais comuns ao programador que são: selecionar um elemento do documento e alterar suas características.

10.1 jQuery - A função $

O jQuery é uma grande biblioteca que contém diversas funções que facilitam a vida do programador. A mais importante delas, que inicia a maioria dos códigos, é a função $.

Com ela é possível selecionar elementos com maior facilidade, maior compatibilidade, e com menos código. Por exemplo:

// JavaScript "puro"
var cabecalho = document.querySelector("#cabecalho");

if (cabecalho.attachEvent) {
  cabecalho.attachEvent("onclick", function (event) {
    alert("Você clicou no cabeçalho, usuário do IE!");
  });
} else if (cabecalho.addEventListener) {
  cabecalho.addEventListener("click", function (event) {
    alert("Você clicou no cabeçalho!")
  }, false);
}

// jQuery
$("#cabecalho").click(function (event) {
  alert("Você clicou no cabeçalho!");
});

Note como a sintaxe do jQuery é bem menor, e a biblioteca se encarrega de encontrar o modo mais compatível possível para adicionar o evento ao elemento cujo id é cabecalho.

Existem diversas funções que o jQuery permite que utilizemos para alterar os elementos que selecionamos pela função $, e essas funções podem ser encadeadas, por exemplo:

$("#cabecalho").css({"margin-top": "20px", "color": "#333333"})
            .addClass("selecionado");

No código acima, primeiramente chamamos a função $ e passamos como argumento uma string idêntica ao seletor CSS que utilizaríamos para selecionar o elemento de id cabecalho. Na sequência chamamos a função css e passamos um objeto como argumento, essa função adicionará ou alterará as informações desse objeto como propriedades de estilo do elemento que selecionamos com a função $. Em seguida chamamos mais uma função, a addClass, que vai adicionar o valor "selecionado" ao atributo class do elemento com o id cabecalho.

Dessa maneira, é possível fazer muito mais com muito menos código, e ainda por cima de uma maneira que funciona em diversos navegadores.

Já conhece os cursos online Alura?

A Alura oferece centenas de cursos online em sua plataforma exclusiva de ensino que favorece o aprendizado com a qualidade reconhecida da Caelum. Você pode escolher um curso nas áreas de Programação, Front-end, Mobile, Design & UX, Infra e Business, com um plano que dá acesso a todos os cursos. Ex aluno da Caelum tem 15% de desconto neste link!

Conheça os cursos online Alura.

10.2 jQuery Selectors

Um dos maiores poderes do jQuery está na sua capacidade de selecionar elementos a partir de seletores CSS.

Como já aprendemos, existem diversas formas de selecionarmos quais elementos ganharão determinado estilo. Infelizmente muitos desses seletores não funcionam em todos os navegadores. Contudo, no jQuery, temos todos à nossa disposição.

Por exemplo, se quisermos esconder todas as tags <td> filhas de um <tbody>, basta:

$('tbody td').hide();

Seletores mais comuns:

// pinta o fundo do formulário com id "form" de preto
$('#form').css('background', 'black');

// esconde todos os elementos com o atributo "class" igual a "headline"
$('.headline').hide();

// muda o texto de todos os parágrafos
$('p').text('alô :D');

Mais exemplos:

$('div > p:first'); // o primeiro elemento <p> imediatamente filho de uma <div>

$('input:hidden'); // todos os inputs invisíveis

$('input:selected'); // todas os checkboxes selecionados

$('input[type=button]'); // todos os inputs com type="button"

$('td, th'); // todas as tds e ths

Lembre-se de que a função que chamamos após o seletor é aplicada para todos os elementos retornados. Veja:

// forma ineficiente
alert($('div').text() + $('p').text() + $('ul li').text());

// forma eficiente :D
alert($('div, p, ul li').text());

A função text() é chamada para todos os <div>s, <p>s, e <li>s filhos de <ul>s.

10.3 Filtros customizados e por DOM

Existem diversos seletores herdados do css que servem para selecionar elementos baseados no DOM. Alguns deles são:

$('div > p'); // <p>s imediatamente filhos de <div>
$('p + p'); // <p>s imediatamente precedidos por outro <p>
$('div:first-child'); // um elemento <div> que seja o primeiro filho
$('div:last-child'); // um elemento <div> que seja o último filho
$('div > *:first-child'); // um elemento que seja o primeiro filho direto de uma <div>
$('div > *:last-child'); // um elemento que seja o último filho direto de uma <div>
$('div p:nth(0)'); // o primeiro elemento <p> filho de uma <div>
$('div:empty'); // <div>s vazias

10.4 Utilitário de iteração do jQuery

O jQuery traz também entre suas diversas funcionalidades, uma função que facilita a iteração em elementos de um Array com uma sintaxe mais agradável:

$("#menu-departamentos li").each(function (index, item) {
  alert(item.text());
});

A função each chamada logo após um seletor executa a função que passamos como argumento para cada um dos itens encontrados. Essa função precisa de dois argumentos. O primeiro será o "índice" do elemento atual na coleção (0 para o primeiro, 1 para o segundo e assim por diante), e o segundo será o próprio elemento.

Também é possível utilizar a função each do jQuery com qualquer Array:

var pessoas = ["João", "José", "Maria", "Antônio"];

$.each(pessoas, function(index, item) {
  alert(item);
})

Nesse caso, chamamos a função each diretamente após o $, pois essa implementação é um método do próprio objeto $. Passamos dois argumentos, o primeiro é o Array que queremos percorrer e o segundo a função que desejamos executar para cada um dos itens do Array.

Saber inglês é muito importante em TI

Na Alura Língua você reforça e aprimora seu inglês! Usando a técnica Spaced Repetitions o aprendizado naturalmente se adapta ao seu conhecimento. Exercícios e vídeos interativos fazem com que você pratique em situações cotidianas. Além disso, todas as aulas possuem explicações gramaticais, para você entender completamente o que está aprendendo. Aprender inglês é fundamental para o profissional de tecnologia de sucesso!

Pratique seu inglês na Alura Língua.

10.5 Características de execução

Para utilizarmos o jQuery em nossos projetos com maior segurança, devemos tomar alguns cuidados.

Importação

Antes de mais nada é necessário incluir o jQuery em nossa página. Só assim o navegador executará seu código para que possamos utilizar suas funcionalidades em nosso código.

Por isso é necessário que a tag <script> do jQuery seja a primeira de todas na ordem de nosso documento:

<script type="text/javascript" src="scripts/jquery.js"></script>
<!-- só podemos utilizar o jQuery após sua importação -->
<script type="text/javascript" src="scripts/meuscript.js"></script>
<script type="text/javascript" src="scripts/meuoutroscript.js"></script>

Executar somente após carregar

Como estamos constantemente selecionando elementos do documento e alterando suas características, é importante garantir que os elementos que pretendemos utilizar já tenham sido carregados pelo navegador.

A melhor maneira de garantir isso é somente executar nosso script após o término do carregamento total da página com a função $ dessa maneira:

$(function () {
  $("#cabecalho").css({"background-color": "#000000"});
})

Essa função $ que recebe uma função anônima como argumento garante que o código dentro dela só será executado ao fim do carregamento de todos os elementos da página.

10.6 Mais produtos na home

Uma técnica comum de se implementar com JavaScript é a de permitir mais conteúdo ser mostrado na tela a partir de algum clique ou até ao se passar o mouse em cima.

Na nossa página, exibimos 6 produtos em cada painel de destaque. Poderíamos criar um botão para "Mostrar mais" produtos que exiba mais 6 produtos.

Para implementar, a maneira mais simples é inserir esses produtos adicionais no HTML e escondê-los com CSS usando display: none. Aí colocamos o botão de Mostrar Mais e, via JavaScript, exibimos quando o usuário clicar.

Carregamento de conteúdo com Ajax

No nosso exercício, vamos apenas esconder ou exibir o conteúdo usando CSS e JavaScript. Em alguns casos, pode ser interessante baixar conteúdo novo do servidor no momento do clique.

Esse tipo de página usa Ajax para requisitar novos dados ao servidor e inseri-los dinamicamente na página via JavaScript. Ajax e outras técnicas de JavaScript avançadas são tópicos do curso WD-47 da Formação Web da Caelum:

http://www.caelum.com.br/curso/wd47

10.7 Exercícios: jQuery na home

  1. Na página index.html, crie um <button> no final de cada section painel, logo após a </ol>. Esse será o botão responsável por exibir mais produtos.

     <button type="button">Mostrar mais</button>
    

    Já temos 6 produtos em cada painel na página index.html, precisamos acrescentar mais 6 produtos em cada painel para que esses apareçam quando apertarmos o botão que acabamos de criar. Adicione os produtos dentro das <ol> de cada painel, novidades e mais-vendidos.

  2. Para que possamos usar o jQuery, precisamos importá-lo na index.html. Inclua a seguinte linha imediatamente antes da importação de qualquer outro JavaScript que tenha sido importado:

    <script type="text/javascript" src="js/jquery.js"></script>
    

    Agora crie o arquivo home.js, onde vamos colocar nosso código para o botão funcionar, e o importe na index.html também:

    <script type="text/javascript" src="js/home.js"></script>
    
  3. Implemente a funcionalidade de compactar o painel de produtos para mostrar apenas os 6 primeiros por padrão. Vamos fazer isso no arquivo estilos.css, fora das media queries existentes.

    .painel li:nth-child(n+7) {
     display: none;
    }
    

    Vamos criar uma funcionalidade com a classe painel-aberto que vamos adicionar ao painel quando apertarmos o botão e assim aparecerá os produtos escondidos. Vamos fazer isso no arquivo estilos.css, fora das media queries existentes.

    .painel-aberto li:nth-child(n+7) {
     display: inline-block;
    }
    

    Essa classe, claro, só vai fazer efeito se adicionarmos ela na página. Para testar, vá na div com classe novidades e adicione a classe painel-aberto do lado.

  4. Vamos implementar a funcionalidade em JavaScript. O primeiro passo é remover a classe painel-aberto do HTML. Como ela é uma classe atrelada a funcionalidade JavaScript, vamos adicioná-la com jQuery, apenas se o botão for clicado.

    Vamos aplicar o JavaScript para o painel novidades. Implemente o evento de clique no botão e quando clicado, adiciona a classe painel-aberto. Adicione o código no arquivo home.js:

    $('.novidades button').click(function() {
     $('.novidades').addClass('painel-aberto');
    });
    

    Teste a funcionalidade no navegador.

  5. Agora quando clicamos no botão do painel novidades os produtos adicionais já aparecem, mas quando clicamos novamente no botão, não acontece nada. Para que isso aconteça, precisamos utilizar uma função do jQuery que consegue verificar se a classe já existe. Essa função remove a classe, se ela já existir e se não existir, ela adiciona. Essa função é a toggleClass. Altere o arquivo home.js:

    $('.novidades button').click(function() {
     $('.novidades').toggleClass('painel-aberto');
    });
    

    Teste a funcionalidade no navegador.

  6. (opcional) Implemente a mesma funcionalidade para o painel da direita, o mais-vendidos.

  7. (opcional trabalhoso) Podemos estilizar o botão de mostrar mais produtos com regras CSS3 que aprendemos. Adicionar no arquivo estilos.css, fora das media queries existentes.

     .painel button {
         /* posicionamento */
         float: right;
         margin-right: 10px;
         padding: 10px;
    
         /* estilo */
         background-color: #333;
         border: 0;
         border-radius: 4px;
         box-shadow: 1px 1px 3px rgba(30, 30, 30, 0.5);
         color: white;
         font-size: 1em;
         text-decoration: none;
         text-shadow: 1px 0 1px black;
    
         /* animação */
         transition: 0.3s;
     }
    
     .painel button:hover {
         background-color: #393939;
         box-shadow: 1px 0 20px rgba(200, 200, 120, 0.9);
     }
    

    Se tiver disposição, adicione mais detalhes:

     .painel button {
     /* posicionamento */
         position: relative;
         margin-bottom: 10px;
     }
    
     .painel button::after {
         /* elemento vazio */
         content: '';
         display: block;
         height: 0;
         width: 0;
    
         /* triângulo */
         border-top: 10px solid #333;
         border-left: 10px solid transparent;
         border-right: 10px solid transparent;
    
         /* posicionamento */
         position: absolute;
         top: 100%;
         left: 50%;
         margin-left: -5px;
    
         /* animação */
         transition: 0.3s;
     }
    
     .painel button:hover::after {
         border-top-color: #393939;
     }
    
  8. (opcional avançado) Em vez de escrever o código 2x para suportar os 2 painéis, podemos generalizá-lo e resolver as duas coisas de uma vez.

    $('.painel button').click(function() {
     $(this).parent().toggleClass('painel-aberto');
    });
    

Aprenda se divertindo na Alura Start!

Você conhece alguém que tem potencial para tecnologia e programação, mas que nunca escreveu uma linha de código? Pode ser um filho, sobrinho, amigo ou parente distante. Na Alura Start ela vai poder criar games, apps, sites e muito mais! É o começo da jornada com programação e a porta de entrada para uma possível carreira de sucesso. Ela vai estudar em seu próprio ritmo e com a melhor didática. A qualidade da conceituada Alura, agora para Starters.

Conheça os cursos online da Alura Start!

10.8 Plugins jQuery

Além de usar os componentes JavaScript que vêm prontos no Bootstrap, podemos baixar outros plugins feitos para o jQuery ou para o Bootstrap que trazem novas funcionalidades.

A grande riqueza do jQuery é justo sua vasta gama de plugins disponíveis. Há até um diretório no site deles:

http://plugins.jquery.com/

Cada plugin é um arquivo JavaScript que você inclui na página e adiciona uma funcionalidade específica. Muitos exigem que escrevamos um pouco de código pra configurar seu uso; outros são mais plug and play.

Você vai precisar consultar a documentação do plugin específico quando for usar.

10.9 Exercícios: plugin

  1. Um plugin que podemos usar na nossa página é máscaras numéricas para digitar em campos como CPF ou CEP. Isso ajuda bastante o usuário.

    Para usar esse plugin, basta invocar seu arquivo JavaScript no final da página do checkout.html, logo após a chamada do jQuery.js e do bootstrap.js:

     <script type="text/javascript" src="js/inputmask-plugin.js"></script>
    
  2. Cada campo que for usar uma máscara numérica precisa definir o atributo data-mask com o formato a ser usado.

    No <input> do CPF, adicione o atributo:

     data-mask="999.999.999-99"
    

    No <input> do número do cartão com código de verificação, podemos adicionar:

     data-mask="9999 9999 9999 9999 - 999"