Javascript com jQuery: Eventos, Animações e Ajax
Javascript Fácil com jQuery: Interação com eventos, animações e Ajax
Utilize o jQuery para criar páginas interativas, com animações visuais e comunicação assíncrona com o servidor (Ajax).
Artigos JavaScript 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.
hasClass(class) Retorna true se pelo menos um dos elementos selecionados possui a classe indicada. Retorna false caso contrário. $("#m2").hasClass("menu"): Retorna true se o elemento #m2 possuir a classe "menu" definida. Retorna false caso contrário.
filter(seletor) Remove todos os elementos que não atendem ao seletor especificado. $("p").filter(".lado"): Seleciona os parágrafos que possuem a classe lado definida.
filter(funcao) Utiliza uma função para remover os elementos indesejados. A função deve retornar true para os elementos desejados e false para os indesejados. $("p").filter(function(i) { return i==3; }): Seleciona o quarto parágrafo.
is(seletor) Retorna true se pelo menos um dos elementos se enquadra na condição do seletor. Retorna false caso contrário. $("div.menu").is(":contains('java')"): Retorna true se algum dos divs (que possuem classe "menu") contém o texto "java".
map(funcao) Retorna um array de valores, onde cada valor está ligado a um elemento selecionado. Os valores são retornados pela função passada como parâmetro. $("div").map(function(){ return $(this).attr('id');}): Retorna um array com os ids (strings) de todos os divs da página (ex.: ['id1', 'id2', ...]).
not(seletor) Remove os elementos que satisfazem à condição do seletor. $("div").not(".menu, .top"): Retorna um objeto jQuery que encapsula todos os divs da página, menos aqueles que possuem as classes "menu" ou "top" definidas.
slice(inicio, fim) Retorna um objeto jQuery contendo um sub-conjunto da seleção atual, começando no índice inicio (o primeiro elemento possui índice zero) e terminando no índice fim (exclusivo). O segundo parâmetro é opcional. Se esse não for informado, a seleção vai até o último elemento. $("div").slice(3, 6): Retorna um objeto jQuery com os elementos de índice 3, 4 e 5 da seleção atual. $("div").slice(4): Retorna um objeto jQuery com os elementos de índice 4 em diante.
add(seletor) Adiciona mais elementos à seleção atual, onde os novos elementos atendem ao seletor. $("div").add("p"): Adiciona todos os parágrafos à seleção de todos os divs da página.
children(seletor) Retorna um objeto jQuery com os filhos imediatos dos elementos atuais. É possível passar um seletor para filtrar esses filhos. $("#menu").children(): Retorna todos os filhos do elemento que possui id="menu". $("#menu").children(".submenu"): Retorna os filhos do elemento #menu que possuem a classe submenu definida.
contents() Seleciona todos os descendentes da seleção atual (incluindo texto). $("#p1").contents(): Seleciona todos os descendentes do elemento #p1, incluindo textos, links, etc.
find(seletor) Seleciona elementos descendentes que satisfazem ao seletor. $("p").find("span"): Seleciona todos os elementos que estão dentro de parágrafos.
next([seletor]) Seleciona os elementos únicos que vêm logo após os elementos da seleção atual (ou seja, o próximo elemento irmão). Você pode passar um seletor para filtrar esse conjunto. $("#menu").next(): Seleciona o elemento que vem logo após o elemento que possui id="menu". $("p").next(".item"): Seleciona os elementos que possuem a classe "item" e estão logo após um parágrafo.
nextAll(seletor) Seleciona todos os irmãos imediatamente após os elementos atuais. Você pode passar um seletor para filtrar esse conjunto. $("div:first").nextAll(): Seleciona todos os divs irmãos do primeiro div da página.
parent(seletor) Seleciona os pais de todos os elementos da seleção atual. Você pode passar um seletor para filtrar esse conjunto. $("p").parent(): Seleciona os elementos que são pai dos parágrafos da página.
parents(seletor) Seleciona todos os ancestrais dos elementos atuais, indo até a raiz . Você pode passar um seletor para filtrar esse conjunto. $("#menu").parents(): Seleciona todos os ancestrais do elemento que possui id="menu".
prev(seletor) Seleciona os elementos únicos que vêm antes dos elementos da seleção atual (ou seja, o elemento irmão anterior). Você pode passar um seletor para filtrar esse conjunto. $("#menu").prev(): Seleciona o elemento que vem antes o elemento que possui id="menu". $("p").prev(".item"): Seleciona os elementos que possuem a classe "item" e estão antes de um parágrafo.
prevAll(seletor) Seleciona todos os irmãos imediatamente anteriores aos elementos atuais. Você pode passar um seletor para filtrar esse conjunto. $("div:last").prevAll(): Seleciona todos os divs irmãos do último div da página.
siblings(seletor) Seleciona todos os irmãos dos elementos atuais. Você pode passar um seletor para filtrar esse conjunto. $("#menu").siblings(".item"): Seleciona todos os irmãos do elemento que possui id="menu", mas somente aqueles que possuem a classe "item" definida.
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 {
div.gama {
background: #ee7777;
#texto { display: block; margin: 2px; }
$("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");
$("#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("");
Listagem 1. exemplo1.html
Figura 1. Tela da página exemplo1.html sobre filtros e modificação de conteúdo
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:
Figura 2. Execução da função exemplo1() na página exemplo1.html
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.
Figura 3. Execução da função exemplo2() na página exemplo1.html
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.
append(conteudo) Insere o conteúdo especificado dentro (ao final) dos elementos selecionados. $("p").append("java") - Insere a string "java" (em negrito) ao final de todos os parágrafos da página.
appendTo(seletor) Move os elementos selecionados para dentro (ao final) dos elementos especificados pelo seletor. $("#menu").appendTo("#lateral") - Move o elemento que possui id="menu" para dentro (ao final) do elemento que possui id="lateral".
prepend(conteudo) Insere o conteúdo especificado dentro (no início) dos elementos selecionados. $("p").prepend("java") - Insere a string "java" (em negrito) no início de todos os parágrafos da página.
prependTo(seletor) Move os elementos selecionados para dentro (no início) dos elementos especificados pelo seletor. $("#menu").prependTo("#lateral") - Move o elemento que possui id="menu" para dentro (no início) do elemento que possui id="lateral".
after(conteudo) Insere o conteúdo especificado após os elementos selecionados. $("p").after("java") - Insere a string "java" (em negrito) após cada parágrafo da página.
before(conteudo) Insere o conteúdo especificado antes dos elementos selecionados. $("p").before("java") - Insere a string "java" (em negrito) antes de cada parágrafo da página.
insertAfter(seletor) Move os elementos selecionados para logo após os elementos especificados pelo seletor. $("#menu").insertAfter("#lateral") - Move o elemento que possui id="menu" para logo após o elemento que possui id="lateral".
insertBefore(seletor) Move os elementos selecionados para logo antes dos elementos especificados pelo seletor. $("#menu").insertBefore("#lateral") - Move o elemento que possui id="menu" para logo antes do elemento que possui id="lateral".
wrap(html) Envolve os elementos selecionados com o html especificado. $("p").wrap("") - Envolve os parágrafos da página com elementos div.
wrapAll(html) Envolve todos os elementos selecionados com um único elemento (passado como parâmetro). $("p").wrapAll("") - Envolve todos os parágrafos da página com um único div, envolvendo todo o conjunto.
wrapInner(html) Envolve todos os filhos (incluindo texto) com o html especificado. $("p").wrapInner("") - Envolve com elementos todos os filhos (incluindo texto) dos parágrafos da página.
replaceWith(conteudo) Substitui os elementos selecionados pelo conteúdo especificado. $("button").replaceWith("botão") - Substitui os botões da página pelo texto "botão" em negrito.
replaceAll(seletor) Substitui todos os elementos (especificados pelo seletor) pelos elementos atuais. $("Paragrafo").replaceAll("p") - Substitui todos os parágrafos pela string "Paragrafo" em negrito.
empty() Remove todos os filhos dos elementos selecionados. $("#menu").empty() - Remove todos os filhos do elemento que possui id="menu".
remove([seletor]) Remove da página todos os elementos selecionados. É possível passar um seletor para filtrar essa remoção. $("p").remove() - Remove todos os parágrafos da página. $("p").remove(":contains('java')") - Remove todos os parágrafos que contêm a string "java".
clone() Retorna um objeto jQuery com clones dos elementos selecionados. $("div").clone() - Retorna clones dos elementos div da página.
clone(true) Semelhante ao método clone(), mas os tratadores de eventos também são clonados. $("div").clone(true) - Retorna clones dos elementos div da página, incluindo seus tratadores de eventos.
Tabela 2. Métodos para manipular a árvore do DOM
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.
Figura 4. Execução da função exemplo3() na página exemplo1.html
A função exemplo4() apresenta o seguinte código:
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%.
Figura 5. Execução da função exemplo4() na página exemplo1.html
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:
$(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() {
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:
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.
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.
blur(fn) Trata o evento blur nos elementos selecionados. Esse evento ocorre quando o elemento perde o foco na página. $("#campoNome").blur(function() { alert("blur"); }) - Emite um alerta quando o elemento que possui id="campoNome" perde o foco.
change(fn) Trata o evento change nos elementos selecionados. Esse evento ocorre quando o elemento perde o foco e o seu conteúdo foi modificado. $("#campoNome").change(function() { alert("change"); }) - Emite um alerta quando o elemento que possui id="campoNome" perdeu o foco e foi modificado.
click(fn) Trata o evento click nos elementos selecionados. Esse evento ocorre quando o usuário clica com o mouse sobre o elemento. $("p").click(function() { alert("clicou"); }) - Emite um alerta quando o usuário clica sobre um parágrafo.
dblclick(fn) Trata o evento double click nos elementos selecionados. Esse evento ocorre quando o usuário clica duas vezes com o mouse sobre o elemento. $("p").dblclick(function() { alert("clicou duas vezes"); }) - Emite um alerta quando o usuário clica duas vezes sobre um parágrafo.
error(fn) Trata o evento error nos elementos selecionados. Cada elemento define o erro de uma forma diferente. Exemplo: erro de javascript na página, imagem que não pode ser exibida, etc. $("img").error(function(){$(this).hide();}) - Esconde as imagens que não puderam ser exibidas na página.
focus(fn) Trata o evento focus nos elementos selecionados. Esse evento ocorre quando o elemento recebe o foco. $("input").focus(function () {alert("focus");}) - Emite um alerta quando os campos input recebem o foco na página.
keydown(fn) Trata o evento keydown nos elementos selecionados. Esse evento ocorre quando uma tecla é pressionada. $(window).keydown(function(e) {alert("tecla: " + e.keyCode)}) - Emite um alerta com o código da tecla pressionada.
keypress(fn) Trata o evento keypress nos elementos selecionados. Esse evento ocorre quando uma tecla é pressionada e depois solta. $("input").keypress(function(e) {alert("tecla: " + e.keyCode)}) - Emite um alerta com o código da tecla que foi digitada.
keyup(fn) Trata o evento keyup nos elementos selecionados. Esse evento ocorre quando uma tecla (que está pressionada) é solta. $("input").keyup(function(e) {alert("tecla: " + e.keyCode)}) - Emite um alerta com o código da tecla que foi solta.
load(fn) Trata o evento load nos elementos selecionados. Esse evento ocorre quando o elemento e todo o seu conteúdo foram carregados. $(window).load(function() { alert("pagina carregada"); }) - Emite um alerta quando a página terminou de carregar.
mousedown(fn) Trata o evento mousedown nos elementos selecionados. Esse evento ocorre quando o mouse é pressionado sobre o elemento. $("p").mousedown(function() { alert("mouse pressionado"); }) - Emite um alerta quando o mouse é pressionado sobre um parágrafo.
mousemove(fn) Trata o evento mousemove nos elementos selecionados. Esse evento ocorre quando o mouse é movimentado sobre o elemento. $("div").mousedown(function(e) { $(this).html ("x=" + e.pageX + ", y=" + e.pageY); }) - Escreve sobre os divs a posição do mouse atual.
mouseout(fn) Trata o evento mouseout nos elementos selecionados. Esse evento ocorre quando o mouse sai dos limites do elemento. $("p").mouseout(function() { alert("mouse saiu"); }) - Emite um alerta quando o mouse sai de cima de um parágrafo.
mouseover(fn) Trata o evento mouseover nos elementos selecionados. Esse evento ocorre quando o mouse entra nos limites do elemento. $("p").mouseover(function() { alert("mouse entrou"); }) - Emite um alerta quando o mouse entra em um parágrafo.
mouseup(fn) Trata o evento mouseup nos elementos selecionados. Esse evento ocorre quando o mouse (que estava pressionado) é solto. $("p").mouseup(function() { alert("mouse foi solto"); }) - Emite um alerta quando o mouse foi solto em cima de um parágrafo.
resize(fn) Trata o evento resize nos elementos selecionados. Esse evento ocorre quando a visão do documento é redimensionada. $(window).resize(function() { alert("resized"); }) - Emite um alerta quando a janela é redimensionada.
scroll(fn) Trata o evento scroll nos elementos selecionados. Esse evento ocorre quando a barra de rolagem do elemento é movimentada. $(window).scroll(function() { alert("scroll"); }) - Emite um alerta quando a barra de rolagem da janela é movimentada.
select(fn) Trata o evento select nos elementos selecionados. Esse evento ocorre quando o usuário seleciona algum texto em um campo input ou textarea. $(document).select(function() { alert("algum texto foi selecionado"); }) - Emite um alerta quando algum texto foi selecionado em algum campo do documento.
submit(fn) Trata o evento submit nos elementos selecionados. Esse evento ocorre quando os dados de um formulário são enviados ao servidor. $("form").submit(function() { alert("enviado"); }) - Emite um alerta quando algum formulário foi enviado ao servidor.
unload(fn) Trata o evento unload nos elementos selecionados. Esse evento ocorre quando o elemento é eliminado do navegador. $(window).unload (function() { alert("tchau!"); }) - Emite um alerta quando a página é fechada.
Tabela 3. Principais eventos para criar interações com o usuário
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.
#texto { display:block; margin: 2px; }
$area.click(function(){
$("#texto").html("click");
$area.dblclick(function(){
$("#texto").html("double click");
$area.mousemove(function(){
$("#texto").html("mouse move");
$area.mouseout(function(){
$(this).css("background", "tan");
$("#texto").html("mouse out");
Listagem 2. exemplo2.html
Figura 6. Diferentes reações aos eventos do mouse no exemplo2.html
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:
// 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:
Os outros eventos seguem essa mesma linha.
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:
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.
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.");
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.
$("#deslizar").click(function() {
$("#desbotar").click(function() {
$("span").fadeIn(300).fadeOut(300);
Listagem 3. exemplo3.html
Figura 7. Tela da página exemplo3.html sobre animações
slideDown(v,f) Revela os elementos através de um deslizamento de cima para baixo. v = velocidade em ms / 'slow' / 'fast'. f (opcional) = função a ser chamada no fim da animação. $("#caixa").slideDown(2000): Desliza para baixo o elemento que possui id="caixa" em dois segundos de animação.
slideUp(v, f) Esconde os elementos através de um deslizamento de baixo para cima. $("#caixa").slideUp("slow"): Desliza para cima o elemento que possui id="caixa" em 0.6 segundos de animação.
slideToggle(v, f) Alterna o deslizamento (para cima ou para baixo) dependendo do estado atual dos elementos. Se está visível, desliza para cima. Se está escondido, desliza para baixo. $("#caixa").slideToggle(1000): Se o elemento que possui id="caixa" está escondido, desliza para baixo em 1 segundo. Caso contrário, desliza para cima em 1 segundo.
fadeIn(v, f) Faz os elementos aparecerem variando a sua transparência até ficarem totalmente opacos. $("p:first").fadeIn("fast"): Revela o primeiro parágrafo em 0.2 segundos, variando a sua transparência até ele ficar opaco.
fadeOut(v, f) Desbota os elementos através da variação da transparência até eles sumirem na tela. $("p:first").fadeOut(1500): Faz o primeiro parágrafo sumir com um desbotamento que dura 1,5 segundos.
fadeTo(v, o, f) Varia a transparência dos elementos até ficarem com a opacidade especificada. v = velocidade em ms / 'slow' / 'fast'. o = opacidade. f (opcional) = função a ser chamada no fim da animação. $("p:first").fadeTo("slow", 0.5): Faz o primeiro parágrafo desbotar até ficar 50% translúcido. Essa animação dura 0.6 segundos.
animate(p, v, m, f) Cria uma animação customizada. O primeiro parâmetro é um objeto com pares chave-valor que indicam o estado final dos elementos animados. p = objeto com pares de valores. v = velocidade em ms / 'slow' / 'fast'. m (opcional) = movimento 'linear' ou 'swing'. f (opcional) = função a ser chamada no fim da animação. $("p:first").animate({ width: "70%", opacity: 0.4, borderWidth: "10px" }, 1500): Anima em 1,5 segundos o primeiro parágrafo, fazendo ele ficar com 70% de largura, 40% translúcido e borda de 10 px.
Tabela 4. Métodos para criar animações avançadas
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:
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:
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.
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 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:
$("#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):
url: "pagina.jsp",
data: "nome=Hugo&cidade=Rio%20de%20Janeiro",
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:
$("#carregando").ajaxStart(function() {
$("#carregando").ajaxStop(function() {
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({
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.
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.