Entendendo o jQuery – Parte 2

O jQuery é uma biblioteca/framework de Javascript orientado a objetos (OO)… O que significa que nele trabalhamos com objetos, atributos e métodos.. E não apenas com funções que é o que acontece na programação procedural comum. Todos nós começamos trabalhando com programação procedural e por isso o jQuery segue um “caminho” diferente do que estamos acostumados.
De primeiro contato o jQuery parece sim muito complicado… São vários códigos em uma só linha… Tudo dentro de function() sem nome e, com uma documentação toda em inglês, as pessoas não tem muito por onde começar.
O que vocês precisam entender é que o jQuery é, quase que literalmente, uma conversa entre o desenvolvedor e o código. Se você souber inglês então, não há com o que se preocupar… Mas se você não sabe inglês, procure começar a jogar, ler ou ver filmes sem legenda… No mundo de hoje em dia não dá pra ser um bom desenvolvedor/programador só lendo artigos escritos em português… Mas isso vai ficar para um outro artigo.
A coisa que vocês mais vão ver no jQuery é a própria função jQuery(), que também é usada no formato $(). Esta função sempre irá retornar um objeto jQUery: um vetor (array) com todos os elementos encontrados pelo seletor passado como 1º parâmetro da função jQuery ou um novo elemento DOM (Document Object Model) criado caso o 1º parâmetro um elemento HTML.
Veja alguns exemplos:

$('p'); // Retorna uma lista de todos os parágrafos na página

$('a.azul'); // Retorna uma lista de todos os links com classe "azul"

$('form input[type="text"]'); // Retorna uma lista de todos os inputs (que sejam type="text") e estejam dentro de um formulário

Como vocês podem ver, os seletores de jQuery se assemelham muito aos seletores de CSS, e existem formas de você selecionar praticamente qualquer elemento de seu HTML… Lembra que eu disse que jQuery é como uma conversa? Suponhamos que você precise selecionar todos os p, que estão dentro e uma div com classe a “links”, e que não possuam um link dentro desse p… O seletor ficaria assim:

$('div.links p:not(:has(a))');

Mas você, a esse ponto, já deve ter se perguntado: de que adianta selecionar elementos se nada for feito com eles?
É ai que entram os métodos do jQuery! Sempre que você estiver usando jQuery, você irá trabalhar da seguinte forma:

Selecione os elementos que você quer manipular/alterar/trabalhar;
Execute métodos nativos do jQuery (ou de um plugin de jQuery).

Ou seja: primeiro selecionamos os elementos e depois executamos um (ou mais) métodos nos elementos encontrados.

Um exemplo prático

Vamos supor que vocês queiram criar aquele efeito legal de abrir e fechar um elemento com um + no cantinho. O nome desse efeito, em inglês, é collapse.
Vamos criar o seguinte HTML de exemplo:

<div class="box">

    <h2>Meus linksh2>

    <a href="#" title="Abrir ou fechar" class="trocar">abrir/fechara>

    <ul class="conteudo">

        <li><a href="#" title="Primeiro link">Primeiro linka>li>

        <li><a href="#" title="Segundo link">Segundo linka>li>

        <li><a href="#" title="Terceiro link">Terceiro linka>li>

    ul>

div>

O efeito que nós queremos é: ao clicar no link com classe “trocar” (a.trocar) que estiver dentro de uma div com classe “box” (div.box a.trocar), a lista desordenada com classe “conteudo” (ul.conteudo) que estiver logo após esse link (que recebeu o clique) irá deslizar, fechando e abrindo a cada clique.
Uma das primeiras coisas que se aprende no jQuery é que ele trabalha com os elementos HTML da página, e para poder acessar esses elementos ele precisa ser executado depois que a página carregou. Isso não é obrigatório, mas por motivos didáticos, vamos seguir essa regra.
Para isso, precisamos colocar em nosso código javascript um código que permita executar outros códigos (jQuery ou não) após o carregamento do site… Lembram do “onload” do body? É praticamente a mesma coisa:

1$(document).ready(function() {

2    // O que estiver aqui será executado após o carregamento do site

3});

Com o código acima criamos um evento ready (pronto) no documento (todo o site) que executará uma function() quando o site estiver carregado (método ready()).
Documentação do método ready(): http://api.jquery.com/ready/
Faça o seguinte teste para entender melhor:

1$(document).ready(function() {

2    alert('O site terminou de carregar!');

3});

Veja um exemplo do código acima funcionando: http://jsbin.com/upuxa3/
Agora vamos continuar e voltar ao nosso exemplo de collapse: precisamos criar um evento de clique (método click()) no link que tem a classe “trocar”, fazemos isso da seguinte forma:

1$(document).ready(function() {

2    $('div.box a.trocar').click();

3});

Com o código acima criamos um evento vazio que na verdade irá “clicar” no link… Precisamos colocar uma função como parâmetro desse método click() para que, ao invés de clicar no link, um outro código seja executado.
Documentação do método click(): http://api.jquery.com/click/
Vamos a um pequeno exemplo que irá disparar um alerta ao clicar no link:

1$(document).ready(function() {

2    $('div.box a.trocar').click(function() {

3        alert('Você clicou no link...');

4    });

5});

Veja um exemplo do código acima funcionando: http://jsbin.com/upuxa3/2/
Antes de continuar com o nosso exemplo, precisamos notar que, estamos adicionando um evento de clique a um link que, por padrão, já é um elemento que possui clique, certo? Todo link é “clicável”, mesmo que seu endereço leve a lugar nenhum.
Mas o jQuery não é esperto (ou seria maleducado?) o suficiente para substituir o comportamento padrão de clique naquele link… Ao adicionarmos o evento click() no link o jQuery é executado antes, mas quando termina o comportamento padrão acontece… Então se o href (endereço) do link apontasse para “http://thiagobelem.net” vocês iriam ver o meu site depois de receber o alerta.
Existem duas formas de evitar o comportamento padrão de um clique em um link quando se trabalha com o método click(): no mais deselegante é retornado false (falso) na função que está no clique. A outra forma, mais correta e elegante, é assim:

1$(document).ready(function() {

2    $('div.box a.trocar').click(function(evento) {

3        evento.preventDefault();

4        alert('Você clicou no link...');

5    });

6});

É só adicionar um argumento (com o nome que você quiser) à função que é executada no evento click() do link e, dentro da função, usar o método preventDefault() nesse argumento, evitando assim o comportamento padrão do navegador, que seria mandan o visitante para o endereço link após o evento do jQuery ser executado.
Veja um exemplo do código acima funcionando: http://jsbin.com/upuxa3/3/
Agora nós podemos continuar nosso exemplo selecionando a lista de links com classe “conteudo” (ul.conteudo) que esta logo após o link que foi clicado:

1$(document).ready(function() {

2    $('div.box a.trocar').click(function(evento) {

3        evento.preventDefault();

4        $(this).next('ul.conteudo');

5    });

6});

Partimos do link que recebeu o clique $(this) e procuramos uma ul.conteudo que esteja logo em seguida usando o método next().
Percebam que dessa vez, usamos a função jQuery no this, que retorna o elemento que ativou o evento de clique, e depois “caminhamos” até o próximo elemento que satisfaça o seletor ul.conteudo. Esse “caminhar” é, em inglês, chamado de traversal e nos ajuda a, partindo de um elemento, encontrar outros elementos que tenham algum tipo de relação com o elemento no qual “estamos”.
Documentação do método next(): http://api.jquery.com/next/
Mas, como foi dito anteriormente, não adianta nada selecionar um elemento se não fizermos nada com ele… Já conseguimos encontrar a lista de links e agora precisamos fazer ela aparecer e sumir a cada clique… Fazemos isso dessa forma:

1$(document).ready(function() {

2    $('div.box a.trocar').click(function(evento) {

3        evento.preventDefault();

4        $(this).next('ul.conteudo').slideToggle();

5    });

6});

Com o método slideToggle() faz com que o elemento feche quando estiver aberto, e abra quando estiver fechado. Ou seja, cada vez que clicarmos no link de “abrir/fechar” o jQuery irá verificar se a lista de links está aberta ou não e irá trocar o seu estado, abrindo-a ou fechando-a.
Veja um exemplo do código acima funcionando: http://jsbin.com/anafo3/
Poderíamos parar por aqui… Mas se você for um usuário chato, vai clicar 300 vezes no link rapidamente e vai perceber que, depois de alguns cliques seguidos (e muito rápidos) a lista para de abrir e fechar e “buga”.
Para evitar esse tipo de comportamento precisamos filtrar o seletor e evitar rodar o slideToggle() enquanto ainda esteja acontecendo uma animação… Ou seja: executamos o método slideToggle() apenas na lista que não (not) estiver animada (animated):

1$(document).ready(function() {

2    $('div.box a.trocar').click(function(evento) {

3        evento.preventDefault();

4        $(this).next('ul.conteudo:not(:animated)').slideToggle();

5    });

6});

Documentação do seletor :not(): http://api.jquery.com/not-selector/
Viram que simples?! Com exatamente quatro linhas, eu disse QUATRO LINHAS, criamos um efeito super “maneiro” que você pode usar em praticamente qualquer HTML de qualquer site! O jQuery é ou não é uma maravilha?
Veja um exemplo do código acima funcionando: http://jsbin.com/anafo3/2/
E o nosso exemplo longo mas prático está pronto.

Olha como isso tudo é uma conversa com o código:

Quando o documento carregar crie um evento de clique no a com classe “trocar” (e que estiver dentro de uma div com classe “box”) e, quando esse evento for chamado, previna o comportamento padrão do navegador, vá até a lista com classe “conteudo” links que estiver logo após esse link e, se ele não estiver no meio de uma animação, troque o seu estado fechando-a ou abrindo-a

Fonte: Thiago Belem: Entendendo o jQuery – Parte 2