Javascript Fácil com jQuery: Interação com eventos, animações e Ajax

Na edição anterior, apresentamos a biblioteca jQuery, explicando recursos básicos como seletores, mudança de aparência (css) e manipulação de atributos. Nessa segunda parte, concluímos a série ensinando um pouco mais sobre filtros, mudança de conteúdo na página, interação com o usuário, animações e Ajax. No final do artigo comentamos sobre plugins e projetos de extensão baseados nessa biblioteca.

Se você não teve a oportunidade de conhecer esse projeto ainda, o jQuery é uma solução completa para o desenvolvimento de páginas web, utilizando uma sintaxe simples e elegante, além de abstrair problemas de compatibilidade entre navegadores. Tudo nessa biblioteca gira em torno da função $, que serve para encapsular elementos do DOM (Document Object Model) e manipulá-los de forma padronizada e consistente.

O jQuery possui um conjunto de seletores (strings) que podemos passar como parâmetro para a função $, permitindo localizar elementos em uma página HTML. Embora a primeira parte do artigo já tenha abordado o assunto de seletores, existem alguns filtros que complementam essa funcionalidade e adicionam mais flexibilidade ao seu código. Precisamos explicar um pouco mais sobre esses filtros para um melhor entendimento do assunto.

Filtros complementares

O jQuery define diferentes métodos que, na maioria das vezes, são redundantes com relação aos seletores. Por exemplo (e relembrando o artigo anterior), podemos pegar todos os parágrafos que contêm a classe “menu” com $(“p.menu”). Também podemos selecionar esses mesmos elementos com $(“p”).filter(“.menu”). Os dois casos são idênticos, mas o método filter (que recebe um seletor como parâmetro) é vantajoso em casos onde você precisa trabalhar sobre um subconjunto dos elementos já selecionados. A Tabela 1 apresenta uma lista com esses métodos que complementam o trabalho dos seletores.

Para entender alguns desses métodos, temos uma página de teste na Listagem 1 (veja a tela na Figura 1). Comece observando a função exemplo1() definida no head da página. Temos o seguinte trecho de código:

  div.alfa, div.beta { 
    background: lightblue;
    margin: 2px; 
    padding: 2px 4px;
    display: inline;
  }
  div.gama { 
    display: inline;
    background: #ee7777; 
    padding: 5px;
  }
  #texto { display: block; margin: 2px; }
  function exemplo1() {
    $("div").filter(".alfa").css("border", "2px solid red");
    
    var meuFiltro = function(index) {
      return index == 4 || $(this).attr("id") == "d6";
    };      
    $("div").filter(meuFiltro).css("border", "2px solid blue");        
  };
  
  function exemplo2() {
    $("#grupo").children("div.alfa").css("background-color", "tan");
    $("#d2").prev().html("Primeiro");
    $("#d5").next().html("Último");        
  };
  
  function exemplo3() {
    $("#d1").append("<b>-inicio</b>");
    $("#d6").prepend("<b>fim-</b>");
    
    $("#grupo").before("<br>Antes do grupo");
    $("#grupo").after("<br>Depois do grupo");
  };      
  
  function exemplo4() {
    $("div.alfa").wrap("");
    $("#d5").replaceWith("5");
    $("#d6").wrapInner("");
  };

$("div").filter(".alfa").css("border", "2px solid red");

var meuFiltro = function(index) {
 return index == 4 || $(this).attr("id") == "d6";
}; 
$("div").filter(meuFiltro).css("border", "2px solid blue");

A primeira linha de código coloca uma borda vermelha nos elementos que possuem a classe alfa definida. Em seguida, criamos uma função chamada meuFiltro e a passamos como parâmetro para o método $(“div”).filter(). Repare que essa função só retorna true se o índice for 4 ou o id for d6. Uma borda azul de 2px é colocada nos elementos retornados. Veja como fica essa tela na Figura 2.

Um segundo exemplo está na função exemplo2() com o seguinte código:

$("#grupo").children("div.alfa").css("background-color", "tan");
$("#d2").prev().html("Primeiro");
$("#d5").next().html("Último");

Nessa função, a primeira linha filtra os filhos do elemento que possui id=“grupo”. O filtro pega apenas os filhos que possuem a classe “alfa” definida (três primeiros divs) e depois coloca uma cor marrom como cor de fundo. Depois, utilizamos os métodos prev() e next() para pegar, respectivamente, o elemento anterior ao #d2 e posterior ao #d5, trocando os seus textos. O resultado está ilustrado na Figura 3.

Mudança de conteúdo

Para modificar o conteúdo de uma página, o jQuery define um conjunto de métodos para manipular a árvore do DOM. A lista com esses métodos está apresentada na Tabela 2. Os métodos html() e text() não foram incluídos porque já foram explicados na primeira parte desse artigo.

Para trabalhar um pouco nosso conhecimento sobre esses métodos, temos as funções exemplo3() e exemplo4() no código da Listagem 1. Começando pela função exemplo3(), temos o seguinte trecho:

$("#d1").append("-inicio");
$("#d6").prepend("fim-");
 
$("#grupo").before("Antes do grupo");
$("#grupo").after("Depois do grupo");

O resultado desta execução está ilustrado na Figura 4. Repare que a primeira linha acima coloca o texto “-inicio” dentro do elemento cujo id é d1. Esse texto é concatenado ao final do que já existia no elemento #d1, resultando no texto “1-inicio”. A segunda linha acima é bem parecida, embora o texto seja adicionado no início do elemento #d6, virando o texto “fim-6”. A terceira e a quarta linha adicionam, respectivamente, textos antes e depois do elemento cujo id é grupo.

A função exemplo4() apresenta o seguinte código:

$("div.alfa").wrap("");
$("#d5").replaceWith("5");
$("#d6").wrapInner("");

A Figura 5 mostra como fica essa execução. A primeira linha envolve todos os elementos div que possuem classe alfa com um outro elemento div que possui classe gama. A classe gama está definida no documento e possui um fundo avermelhado (#ee7777). A segunda linha é parecida, mas ela substitui todo o elemento que possui id=“d5” por um novo div com a classe gama. Isso remove o fundo azul desse elemento, já que só resta a classe gama agora. Por fim, a última linha envolve o conteúdo do elemento cujo id é d6 com um span que aumenta a fonte para 300%.

Eventos

A parte de tratamento de eventos com a biblioteca jQuery está muito bem servida. Além de oferecer uma sintaxe bem elegante, a biblioteca padroniza essa codificação para eliminar problemas de compatibilidade entre navegadores que normalmente infernizam a vida do desenvolvedor.

Como uma regra geral, os eventos do jQuery são métodos que recebem uma função como parâmetro, a qual é executada quando o evento ocorre. Por exemplo, podemos tratar um clique do mouse sobre um elemento qualquer fazendo:

$(elemento).click(function() {
 // tratamento do clique
});

Se o objeto jQuery encapsula vários elementos do DOM, todos eles passam a tratar o evento com a função especificada. Nesses casos, o argumento this é muito importante para saber qual deles foi o alvo do evento. Como exemplo, podemos tratar o clique do mouse em todos os elementos div da seguinte forma:

$(“div”).click(function() {
 $(this).css(“background-color”, “red”);
});

Utilizando o argumento this, podemos colocar uma cor de fundo vermelha somente no elemento que foi clicado.

Uma outra forma, mais genérica, para criar tratadores de eventos é utilizar o método bind(). Basicamente, precisamos passar uma string com o nome do evento e a função a ser chamada quando ele ocorrer:

$(“div”).bind(“click”, function() {
 $(this).css(“background-color”, “red”);
});

Por outro lado, temos o método unbind() que serve para remover os tratadores de eventos e desfazer essa amarração. Podemos passar o nome do evento que desejamos remover ou simplesmente não passar nenhum parâmetro como forma de remover todos os eventos tratados:

// Remove o click
$(“div”).unbind(“click”);
// Remove todos os tratadores
$(“div”).unbind();

Realizando tarefas quando a página está pronta

Como as páginas html são carregadas aos poucos pelo navegador, o código javascript precisa saber em que momento os elementos do DOM estão prontos para serem acessados, tratados e manipulados na página. Para esse fim, a biblioteca jQuery define um evento chamado ready(), o qual é executado justamente quando tudo está pronto para começar.

O evento ready() é um substituto definitivo para o antigo evento window.onload, já que ele ocorre antes do carregamento final da página e, como conseqüência, consegue antecipar a execução do javascript e tornar a página mais rápida. Para executar um código quando a árvore do DOM está pronta, podemos então fazer:

$(document).ready(function(){
 // seu código aqui...
});

Vale lembrar que você pode criar vários eventos ready() na mesma página. Nesses casos, as funções são chamadas na ordem em que elas foram adicionadas. Além disso, o evento ready() não elimina a existência do evento onload do documento. Conforme veremos a seguir, o evento onload também faz parte dos eventos que podem ser tratados pela biblioteca caso você precise.

Principais eventos

A Tabela 3 apresenta a lista dos principais eventos que podem ser tratados pelo jQuery. Todos os eventos recebem como parâmetro a função a ser executada.

Para destacar o uso desses métodos, temos na Listagem 2 uma página com alguns exemplos de tratamento de eventos. A página contém um pequeno quadrado (inicialmente em azul claro) que reage aos diferentes estímulos do mouse, ficando verde quando o mouse passa sobre ele, azul quando é clicado, vermelho quando ocorre um clique duplo e marrom quando o mouse deixa o quadrado. A Figura 6 mostra essas diferentes situações.

#area { 
  background: lightblue;
  width: 50px;
  height: 50px;
  margin:2px; 
}
#texto { display:block; margin: 2px; }
    

$(document).ready(function() {
  var $area = $("#area");
  $area.click(function(){
    $(this).css("background", "blue");
    $("#texto").html("click");
  });
  
  $area.dblclick(function(){
    $(this).css("background", "red");
    $("#texto").html("double click");
  });
  
  $area.mousemove(function(){
    $(this).css("background", "lightgreen");
    $("#texto").html("mouse move");
  });  
  
  $area.mouseout(function(){
    $(this).css("background", "tan");
    $("#texto").html("mouse out");
  });  
});

Repare que a inicialização dos eventos é feita dentro do evento ready() do documento, pois é o momento em que o DOM está pronto para ser acessado. Dessa forma, pegamos o div que representa o quadrado e o armazenamos na variável $area para que cada evento seja adicionado:

$(document).ready(function() {
 var $area = $("#area");
 ...
 // tratamento de eventos...
});

Os eventos são adicionados método a método conforme visto na Tabela 3. Por exemplo, adicionamos o tratamento do clique fazendo:

$area.click(function(){
 $(this).css("background", "blue");
 $("#texto").html("click");
});

Os outros eventos seguem essa mesma linha.

Chamada de eventos

Os objetos jQuery permitem que você chame eventos nos elementos do DOM utilizando métodos como click(), blur(), submit(), etc. Assim, se você precisa forçar um clique em um elemento, pode fazer:

$(elemento).click();

Isso chamará o código para o evento click() no elemento. Na verdade, os métodos que você pode chamar são aqueles que estão listados na Tabela 3, porém sem passar nenhum parâmetro. Outra forma de fazer isso é usando o método trigger(), passando o nome do evento como parâmetro:

$(elemento).trigger(“click”);

Ainda temos outro método interessante chamado triggerHandler() que executa o código do evento, mas não executa a ação padrão do navegador. Por exemplo, se chamarmos o método triggerHandler(“submit”) em um formulário, o código do evento é executado, mas o formulário não é enviado ao servidor.

Cursos de jQuery

O que é jQuery?

Curso

Primeiros passos com a jQuery

Curso

Validação de formulários com jQuery

Curso

Efeitos visuais

Com a biblioteca jQuery, você pode criar efeitos que adicionam impacto à sua interface e melhoram a usabilidade das páginas, podendo orientar melhor os usuários sobre as mudanças que estão ocorrendo na tela.

Os efeitos show() e hide() já foram apresentados no primeiro artigo, e servem para mostrar e esconder os elementos do DOM, respectivamente. Esses métodos normalmente não recebem parâmetros, mas você também pode informar o tempo que o efeito leva para terminar. Como exemplo, podemos fazer um elemento aparecer mais devagar chamando show(2000), onde o valor 2000ms (dois segundos) é o tempo total da animação. Também é possível passar as strings “slow” (devagar = 0.6 segundos) ou “fast” (rápido = 0.2 segundos) como parâmetro:

$(elemento).show(“slow”);

A chamada sem nenhum parâmetro executa a animação em 0.4 segundos. Além disso, se você precisa executar algum código quando a animação terminar, basta passá-lo em forma de função no segundo parâmetro:

$(elemento).show(2000, function() {
 alert(“Fim da animação.”);
});

Animações avançadas

A biblioteca define alguns métodos para criar animações mais avançadas, os quais estão resumidos na Tabela 4. Para mostrar como alguns deles funcionam, temos um exemplo na Listagem 3 com duas animações diferentes. Veja como esta página é apresentada na Figura 7.

div { 
  background:lightgreen; 
  margin:3px; 
  width:80px; 
  height:40px; 
}
    
 
$(document).ready(function() {
  $("#deslizar").click(function() {
    $("div").slideToggle(1000);
  });
  
  $("#desbotar").click(function() {
    $("span").fadeIn(300).fadeOut(300);
  });
});

Nessa tela podemos ver dois botões e um retângulo verde. O primeiro botão, cujo título é “Deslizamento”, está implementado da seguinte forma:

$("#deslizar").click(function() {
 $("div").slideToggle(1000);
});

Quando clicamos nesse botão, o retângulo verde desliza para cima ou para baixo (dependendo do seu estado atual) em uma animação que dura um segundo. Como inicialmente o retângulo está visível, o primeiro clique faz com que ele deslize para cima (reduzindo a altura até sumir da tela).

O segundo botão, cujo título é “Desbotar”, contém o seguinte trecho de código:

$("#desbotar").click(function() {
 $("span").fadeIn(300).fadeOut(300);
});

Observe que essa implementação encadeia duas animações, sendo que a primeira faz o span surgir transparente até ficar opaco, e a segunda é justamente o inverso (desbota o span até ele desaparecer). Cada animação dura 300ms, o que totaliza 600ms de movimento.

Ajax

A tecnologia Ajax não poderia ficar de fora dessa biblioteca tão versátil. Os objetos jQuery possuem métodos para todos os tipos de ocasião.

Ajax é uma tecnologia que mistura javascript assíncrono e xml. Para mais detalhes: Primeiros passos no Ajax.

Para começar, temos o método load() que serve para carregar o HTML de uma página externa dentro de um elemento do DOM. Por exemplo, podemos carregar uma página dentro de um div com:

$(“#meuDiv”).load(“pagina.html”);

Quando apenas a URL da página é passada como parâmetro, é feito um request do tipo GET. Outra forma de fazer isso é usar o próprio método get() da biblioteca:

$.get("pagina.html", function(data){
 // O parametro data contém os dados retornados.
 $(“#meuDiv”).html(data);
});

Para fazer um request do tipo POST, temos o método post(), que recebe a URL da página externa, um objeto com os dados a serem enviados e uma função para ser executada quando tudo terminar:

var info = { nome: “Hugo”, cidade: “Rio de Janeiro” };
$.post(“pagina.jsp”, info, function(data) {
 // O parametro data contém os dados retornados.
 $(“#meuDiv”).html(data);
});

O método load() (visto acima) também pode fazer requests do tipo POST. Para isso, basta chama-lo passando os dados a serem enviados em forma de objeto como segundo parâmetro:

var info = { nome: “Hugo”, cidade: “Rio de Janeiro” };
$(“#meuDiv”).load(“pagina.jsp”, info);

Outro método muito utilizado é o getScript(), o qual carrega e executa um arquivo de Javascript de forma assíncrona:

$.getScript("http://exemplo.com/codigo.js");

Se por alguma razão os métodos acima não servirem para você, ainda existe o método genérico ajax() que pode ser configurado de inúmeras formas diferentes para atender a todos os casos. Esse método só recebe um único parâmetro, o qual é um objeto com dados que explicam o que você pretende fazer. Para se ter uma noção de como esse método funciona, veja um pequeno exemplo (visite a documentação desse método no site jquery.com para mais detalhes):

$.ajax({
 type: "POST",
 url: "pagina.jsp",
 data: "nome=Hugo&cidade=Rio%20de%20Janeiro",
 success: function(){
 alert( "Dados enviados com sucesso");
 }
});

Eventos para Ajax

Para observar os requests feitos com a tecnologia Ajax, o jQuery define alguns eventos que podemos codificar para tornar a interface mais informativa. Os métodos são ajaxComplete() (ocorre quando um request termina), ajaxError() (quando um request falha), ajaxSend() (quando um request é enviado), ajaxStart() (quando um request começa) e ajaxStop() (quando todos os requests terminam). Todos esses métodos recebem apenas um parâmetro, que é a função a ser executada quando o evento ocorre.

Um exemplo clássico de utilização desses métodos é a apresentação de uma mensagem na tela enquanto algum request está em andamento.

Para controlar a apresentação dessa mensagem, podemos fazer:

$(document).ready(function() {
 $(“#carregando”).ajaxStart(function() {
 $(this).show();
 });

 $(“#carregando”).ajaxStop(function() {
 $(this).hide();
 });
});

Dessa forma, teremos o texto Carregando... na tela sempre que algum request estiver em andamento, o que distrai o usuário e evita pensamentos como “será que a página travou?” caso o servidor estiver lento.

Plugins e projetos de extensão

O projeto jQuery foi criado com o intuito de ser estendido por outros desenvolvedores e, assim, permitir a criação de vários plugins para os mais diferentes objetivos. A biblioteca oferece o método extend() que você pode usar para adicionar novos métodos ao objeto jQuery e personalizar o seu código.

Para criar um novo plugin e adicionar novos métodos, por exemplo, você pode fazer:

jQuery.meuPlugin.extend({
 canta: function() {
 alert(“Cantei”);
 },
 pula: function(param) {
 alert(“Pulei: ” + param);
 }
});

Colocando esse código em um arquivo como jquery.meuplugin.js, podemos disponibilizá-lo para que outras pessoas reutilizem esse código. Um exemplo de chamada para nossos métodos seria:

$.meuPlugin.canta();
$.meuPlugin.pula(“corda”);

Atualmente existem mais de quatrocentos e cinqüenta plugins para o jQuery, desde pequenos seletores até controles complexos para interface com o usuário. No site plugins.jquery.com você encontra uma lista completa separada por categorias. Além disso, ainda existe um projeto desenvolvido à parte, chamado jQuery UI, com componentes de interface gráfica avançados que facilitam muito o desenvolvimento de telas ricas em interação.

Conclusões

Essa foi a segunda parte do artigo sobre a biblioteca jQuery, onde apresentamos o básico sobre eventos, animações e ajax, além de oferecer uma idéia sobre como os plugins são criados. Existem detalhes que não foram explorados devido ao vasto escopo desse projeto, mas você pode complementar o seu aprendizado lendo a documentação no site oficial jQuery.

É importante lembrar que esse é um dos projetos mais completos já desenvolvidos na área de Javascript e vem sendo usado por sites de respeito, como Google, Amazon, Digg, Dzone, entre outros. Dentre as bibliotecas existentes nessa área, poucas têm recebido tanta atenção e contribuições quanto o jQuery.

Confira também

Cursos de JavaScript

Cursos

Curso de Introdução ao JavaScript

Curso

Gerando uma ação durante inatividade do usuário

Curso