O JQuery é uma biblioteca Javascript que simplifica extremamente a utilização de ajax, animações, tratamento de eventos e manipulação de elementos html em sites. A forma como se utiliza JQuery é um pouco diferente do que estamos acostumados no Javascript, mas essa mudança trouxe uma simplicidade incrível e compensa qualquer esforço necessário em seu aprendizado.
Uma instrução JQuery é composta por um seletor e um conjunto de operações a serem executadas nos elementos encontrados baseando-se no seletor. O seletor segue uma sintaxe muito parecida com a do CSS, acrescentando a esta alguns recursos. As operações disponíveis são tão variadas que é difícil conhecer todas, alguns exemplos são: acrescentar classe, alterar valor de atributo, replicar elemento, esvaziar conteúdo de um elemento, remover elementos da página, aplicar animações (como fade in e fade out), fazer requisições ajax, etc, etc, etc… Uma lista completa da API pode ser encontrada na documentação do JQuery. O trecho de código abaixo não é funcional, tem como objetivo apenas ilustrar as explicações dadas.
1 | $( SELETOR ).operacao(); |
A palavra SELETOR está representando uma expressão utilizada para encontrar o conjunto de elementos da página que receberão a operação em questão. Ainda ilustrativamente, é comum o uso abaixo, quando são utilizadas diversas operações em um mesmo conjunto de elementos selecionados.
1 | $( SELETOR ).operacao1().operacao2().operacao3(); |
Antes de colocar as mão na massa é necessário importar o arquivo do JQuery colocando o seguinte código no elemento head da sua página:
1 | <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> |
Nosso primeiro exemplo não é muito interessante, mas explicará uma prática necessária na maioria dos códigos JQuery, e, como não poderia deixar de ser, será o famoso “Hello World”.
1 2 3 | $(document).ready( function() { window.alert("Ola Mundo!"); }); |
Você deve estar se perguntando que raios de Hello World complicado é esse e lhe dou razão, mas logo logo ficará mais claro. O que anteriormente chamei de seletor é sempre passado como parametro da função $, nesse caso estamos passando ‘document’, ou seja o elemento selecionado é o documento html. A operação utilizada é a ‘ready’, que serve para definir uma função a ser executada quando o documento está pronto (acabou de ser carregado, processado e exibido pelo navegador). Então, passamos como parametro da operação ‘ready’ uma função que exibirá uma janela alert. Os códigos JQuery a serem executados quando a página for carregada devem estar sempre dentro dessa função no código anterior, ou seja:
1 2 3 | $(document).ready( function() { // Código a ser executado na carga da página aqui! }); |
Agora estamos prontos para exemplos mais interessantes! No próximo exemplo colocaremos uma tabela com as cores de fundo das linhas alternadas, nos basearemos no seguinte trecho de código html:
1 2 3 4 5 6 7 | <table id="listrada"> <tr><td>Nome:</td><td>Joãozinho</td><\tr> <tr><td>Idade:</td><td>10</td><\tr> <tr><td>Sexo:</td><td>Masculino</td><\tr> <tr><td>Pai:</td><td>Desconhecido</td><\tr> <tr><td>Mae:</td><td>Maria</td><\tr> </table> |
A lógica que utilizaremos é selecionar primeiro os filhos do elemento identificado por ‘listrada’ que estejam nas posições pares e definir uma cor de fundo azul para eles:
1 | $("#listrada>*:even").css("background-color", "#0000FF"); |
Em seguida selecionamos os filhos do elemento identificado por ‘listrada’ que estejam nas posições impares e definimos uma cor de fundo verde para os mesmos:
1 | $("#listrada>*:odd").css("background-color", "#00FF00"); |
Como não podemos esquecer do nosso primeiro exemplo, a versão final do código para a tabela listrada fica assim:
1 2 3 4 | $(document).ready( function() { $("#listrada>*:even").css("background-color", "#0000FF"); $("#listrada>*:odd").css("background-color", "#00FF00"); }); |
Se preferirmos não colocar estilo diretamente no Javascript, podemos definir estilos no css para as linhas usando classes e alterar o nosso código da seguinte maneira:
1 2 3 4 | $(document).ready( function() { $("#listrada>*:even").addClass("linhaAzul"); $("#listrada>*:odd").addClass("linhaVerde"); }); |
O próximo exemplo aprofunda as explicações sobre manipulação de eventos dos elementos. Colocaremos em todos os links de uma página qualquer uma janela alert sendo exibida ao usuário quando o mesmo clica sobre o link.
1 2 3 4 5 | $(document).ready( function() { $("a").click( function() { window.alert("Atenção: você está saindo do site rodrigoaguas.com."); }); }); |
O seletor desse exemplo é bem simples, pesquisa por qualquer elemento A do documento html. Então, adiciona aos eventos onclick de todos os elementos selecionados uma chamada para a função que exibe a janela alert. Agora vamos melhorar o nosso código para impedir que a ação padrão do evento seja executada, para isso acrescentaremos um parametro à nossa função para receber um objeto que representa o evento.
1 2 3 4 5 6 | $(document).ready( function() { $("a").click( function(evento) { window.alert("Atenção: você está tentando sair do site rodrigoaguas.com, mas não vai conseguir."); evento.preventDefault(); }); }); |
Depois de ser impedido de sair do site, queremos que o nosso usuário fique impedido de clicar novamente no link, para isso faremos uma animação de Fade Out no link clicado e ele deixará de ser exibido. Precisaremos utilizar o seletor ‘this’ que representa o elemento onde o evento foi disparado.
1 2 3 4 5 6 7 | $(document).ready( function() { $("a").click( function(evento) { window.alert("Atenção: você está tentando sair do site rodrigoaguas.com, mas não vai conseguir."); $(this).fadeOut(); evento.preventDefault(); }); }); |
Nesse tutorial foram tratados os aspectos básicos do JQuery como importação do arquivo da biblioteca, seletores, alteração de estilo, acrescentar classes, manipulação de eventos e animações. Tratarei de Ajax posteriormente em outro tutorial. Abraços!