Introdução à jQuery: Caminho, Verdade e Vida

Artigo criado por Cadu Carvalho    6 Comentários Tweet

Esse artigo foi criado pelo @carvalhocadu que gentilmente nos enviou por email. E a propósito este já é o segundo post dele aqui, o primeiro foi sobre o Google Goggles.

Se você também quer ter um artigo publicado aqui no Algoritmizando, envie para contato<arroba>algoritmizando.com, vamos fazer uma avaliação e publicaremos, dando os devidos créditos.

Boa Leitura…

jQuery

Quem acompanha um pouco do que eu posto no twitter (@carvalhocadu), deve ter visto pelo menos uma vez alguma coisa parecida com “jQuery é Caminho, Verdade e Vida”. Como vejo muita gente interessada no assunto, achei conveniente escrever esta pequena introdução, começando com um resuminho histórico.

Um pouco de história…

Em 2006, o desenvolvedor John Resig lançou a primeira versão do que seria hoje a biblioteca Javascript mais utilizada nos sites. Mesmo não sendo pioneiro em seu meio, já que precederam ao jQuery bibliotecas como o Prototype e o script.aculo.us, hoje é o mais difundido, presente nativamente em ferramentas de desenvolvimento da Microsoft e da Nokia, e também em sistemas de gerenciamento de conteúdo, como o Drupal.

Afinal, o que é jQuery?

Explicando de forma mais precisa, jQuery é uma biblioteca para trabalhar com o jQuery. A princípio, isso não explica muita coisa, por isso tentarei utilizar um exemplo (um conselho antes de continuarmos: antes de prosseguir, tenha certeza de que está com seus conhecimentos de HTML e CSS afiados): se quisermos esconder uma lista ordenada de classe exemplo (que no documento HTML deve estar descrito como <ol class=”exemplo”>...</ol>? Uma linha de código simples como $(‘ol.exemplo’).css(‘display’, ‘none’); resolve esta tarefa de maneira simples. Se quisermos ser ainda mais simples: $(‘ol.exemplo’).hide();.

Aprofundando um pouco mais neste exemplo: agora queremos deixar a lista visível, mas queremos esconder somente o segundo item: $(‘ol.exemplo li:nth-child(2)’).hide();. Quem é versado em CSS (se não é, deveria ser) logo reconhece que a descrição do elemento sobre o qual se deseja aplicar algum procedimento é a mesma utilizada nas próprias folhas de estilo. Para mostrar ainda mais a semelhança: se eu quiser esconder dessa mesma lista os itens 2 e 4, eu uso $(‘ol.exemplo li:nth-child(2), ol.exemplo li:nth-child(4)’).hide(), da mesma forma que seria feito ao declarar na folha de estilos.

Outro destaque do jQuery é a possibilidade de criar efeitos visuais rapidamente, por meio de métodos como animate, slideToggle, entre outros, que permitem adicionar maior riqueza à interatividade de um site, além de contar com uma forte

Contanto, é preciso fazer algumas observações quanto ao seu uso. O mais importante é que ele não é um substituto para o Javascript, mas sim um poderoso complemento. Declaração de variáveis, funções e classes, operadores matemáticos, estrutura de loops, entre outras coisas, são as mesmas do Javascript tradicional. O que realmente muda com a adição do jQuery é a facilidade em acessar e manipular elementos; isto simplifica algo que é mais contraproducente no Javascript, que é utilizar aquele monte de getElementById() e getElementsByTagName() (e como vocês devem ter reparado, não existe um método getElementByClassName(), acessar um elemento por meio de sua classe é uma aventura paralela). Contando com os recursos interessantes que são nativos do Javascript, isto se torna uma boa adição.

Em um futuro artigo, comentarei também outra qualidade do jQuery: seus métodos facilitam muito a adoção de código não-obstrusivo, que não interfere na leitura do documento e permite que ele seja lido se os scritps não forem carregados. Como isso diz respeito a outro tema maior, por enquanto fica só como uma qualidade que eu gosto de comentar.

Como eu prometi um mini-tutorial para este artigo, vamos fazer algo simples: um menu retrátil (um nome mais vulgar: “acordeom”). Nem vou mexer com CSS porque o interessante é mostrar como funciona: a aparência é o leitor que cuida.

Aprenda fazendo…

Primeiramente, vamos adicionar um link para utilizarmos o jQuery remotamente, utilizando a biblioteca do Google API’s (https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js). Isto pode ser utilizado se houver conexão disponível. Além do link, utilizaremos uma lista não-ordenada para criar nosso menu, com ID menu.

<ul id="menu">
      <li><a href="#">Quem somos</a></li>
      <li><a href="#">Serviços</a>
            <ul>
                  <li><a href="#">Consultoria</a></li>
                  <li><a href="#">Administração</a></li>
                  <li><a href="#">Planejamento</a></li>
                  <li><a href="#">Reconhecimento</a></li>
            </ul>
      </li>
      <li><a href="#">Produtos</a>
            <ul>
                  <li><a href="#">Softwares</a></li>
                  <li><a href="#">Equipamentos</a></li>
                  <li><a href="#">Convênios</a></li>
            </ul>
      </li>
      <li><a href="#">Blogs</a>
            <ul>
                  <li><a href="#">Linha direta</a></li>
                  <li><a href="#">Tech Addict</a></li>
                  <li><a href="#">Quem gosta de administrar?</a></li>
            </ul>
      </li>
      <li><a href="#">Contato</a></li>
</ul>

São cinco itens, três deles com sub-itens, que a princípio, devemos esconder. Seria simples esconder os submenus utilizando somente CSS, mas para fins de mantermos a não-obstrusão de código, faremos isso pelo próprio jQuery. Dentro do cabeçalho do documento (dentro da tag head), teremos as linhas de código:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">

      $(document).ready(function() {

            $('ul#menu li ul').hide();

      });

</script>

A linha $(document).ready(function() {...}); contém todo o algoritmo que será executado assim que o documento for carregado. Fora dele, podem ser declaradas funções e “classes” (o Javascript não conta com classes nativamente, mas há artifícios que fazem variáveis e funções funcionarem como classes). A linha $('ul#menu li ul').hide(); faz com que todos os sub-menus sejam escondidos.

Vamos supor que eu quero que este menu apareça quando o usário passar o mouse sobre o item principal. incluiremos no nosso código as seguintes linhas:

$('ul#menu li').mouseover(function() {

      $(this).children('ul').slideDown('slow');

});

A primeira linha inicia o método mouseenter, que executará uma função assim que o elemento selecionado (ul#menu li) receber o cursor sobre si.

A linha $(this).children('ul').slideDown('slow'); contém o método children, que faz com que os métodos seguintes sejam aplicados aos elementos contidos dentro do elemento declarado anteriormente. Em miúdos: fará com que o ul dentro do li principal receba a ação do método slideDown, que faz com que um elemento se abra.

Intuitivamente, assim como existem os métodos mouseover, children e slideDown, também existem os métodos mouseleave, parent e slideUp, como em vários outros métodos do jQuery. Fazermos com que nosso menu suba quando o cursor for embora, incluiremos as seguintes linhas dentro do nosso código:

$('ul#menu li ul').hide();

$('ul#menu li').mouseover(function() {

      $(this).children('ul').slideDown('slow');

}).mouseleave(function() {

      $(this).children('ul').slideUp('slow');

});

Temos os dois métodos, mouseouver e mouseleave, concatenados e funcionando: quando o cursor atravessa o item principal, este se desdobra e mostra os sub-itens, que recolhem-se quando o cursor vai embora. Este comportamento aplica-se de maneira específica para cada submenu graças ao $(this), que repete dentro da função o elemento sobre o qual um método está sendo aplicado.

Podemos fazer esta brincadeira também fazendo com que todos os submenus abram-se de uma vez, de modo não seletivo. Para isso, precisamos somente trocar alguns elementos do código, para que ele fique assim:

$('ul#menu li ul').hide();

$('ul#menu').mouseover(function() {

      $('ul#menu li ul').slideDown('fast');

}).mouseleave(function() {

      $('ul#menu li ul').slideUp('fast');

});

Quando o mouse atravessa o menu em qualquer parte, todo o conteúdo dele se desdobra, tornando o menu completamente visível. Nos métodos slideUp e slideDown, trocamos a velocidade de slow para fast, que reduz o tempo de execução da animação. Essa velocidade pode ser expressa verbalmente, por slow, medium ou fast, ou numericamente, em milésimos de segundo.

Nosso script funciona, mas vamos supor que o usuário tire o cursor por algum acidente e coloque-o de volta rapidamente; um usuário menos acostumado irá estranhar o menu se fechando e abrindo novamente. Se isso acontecer muitas vezes, o usuário poderá sentir repulsa pelo menu principal, e se não houver outra estrutura de navegação mais amigável, ele não mais acessará o site. Para tal, vamos misturar um recurso nativo do Javascript, os métodos setTimeout e clearTimeout, com os recursos do jQuery.

O fato: precisamos atrasar um pouco o fechamento do menu para que o usuário não se perca ao tirar o cursor acidentalmente. Para tal, utilizaremos o método setTimeout, que permite chamar uma função uma vez após um determinado tempo. Vamos, primeiramente, criar funções separadas para cada ação:

$('ul#menu li ul').hide();

$('ul#menu').mouseover(function() {

      abrirMenus();

}).mouseleave(function() {

      fecharMenus();

});

function abrirMenus() {

      $('ul#menu li ul').slideDown('medium');

}

function fecharMenus() {

      $('ul#menu li ul').slideUp('medium');

}

Tirar os procedimentos de dentro do script principal (ou seja: fora do $(document).ready(function() {...});) e mandá-lo para funções externas não altera o funcionamento dele, mas ajuda a manter o código mais organizado. Com isso, podemos atrasar por uma fração de tempo a função fecharMenus:

$('ul#menu li ul').hide();

var atraso;

$('ul#menu').mouseover(function() {

      abrirMenus();

});

$('ul#menu').mouseleave(function() {

      atraso = setTimeout('fecharMenus()', 500);

});

Isto fará com que o menu recolha-se apenas meio segundo após o cursor deixá-lo, fazendo com que a variável atraso chame a função fecharMenus 500 milésimos de segundo após o gatilho. No entanto, isto não impedirá que ele se feche mesmo que o cursor saia e volte antes do tempo. Para que possamos evitar este fechamento incondicional, podemos adicionar o método clearTimeout, que cancela algum chamado corrente do método setTimeout. Nosso código, então, ficará assim:

$('ul#menu li ul').hide();

var atraso;

$('ul#menu').mouseover(function() {

      abrirMenus();

      clearInterval(atraso);

});

$('ul#menu').mouseleave(function() {

      atraso = setTimeout('fecharMenus()', 500);

});

Caso o cursor saia do menu e retorne antes do tempo necessário para o menu fechar, ele manter-se-á aberto sem incomodar o usuário, como desejávamos. Ao final deste exercício, o cabeçalho do nosso documento HTML deverá estar assim:

<head>

      <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

      <title>Exemplo</title>

      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

      <script type="text/javascript">

            $(document).ready(function() {

                  $('ul#menu li ul').hide();

                  var atraso;

                  $('ul#menu').mouseover(function() {

                        abrirMenus();

                        clearTimeout(atraso);

                  });

                  $('ul#menu').mouseleave(function() {

                        atraso = setTimeout('fecharMenus()', 500);

                  });

            });

            function abrirMenus() {

                  $('ul#menu li ul').slideDown('fast');

            }

            function fecharMenus() {

                  $('ul#menu li ul').slideUp('fast');

            }

      </script>

</head>

Algumas ressalvas:

• Sim, o código que escrevemos no cabeçalho pode ser escrito em um arquivo externo e ser chamado por uma tag <script>, assim como fizemos com o código do jQuery; 2: sim, podemos fazer o download do código do jQuery e mantê-lo localmente; 3: sim, podemos avançar ainda mais neste código e implementar coisas novas.
• Não mencionei nada sobre CSS porque isso diz respeito a estilo, e isto é individual para cada site. No entanto, quem estiver realmente interessado em estudar jQuery deve ter uma noção básica de Javascript e, mais importante, estar com os conhecimentos de HTML(5) e CSS(3) bem afiados, já que eles são a matéria-prima de qualquer site.

Tentarei em breve, postar mais a respeito desta incrível biblioteca, e outros assuntos interessantes de desenvolvimento de front-end.