Tutorial básico de JQuery

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.

$( 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.

$( 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:

<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”.

$(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:

$(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:

<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:

$("#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:

$("#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:

$(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:

$(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.

$(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.

$(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.

$(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!

Uma ideia sobre “Tutorial básico de JQuery

  1. Leandro

    muito obrigado pelo tuts rodrigão, graças a esse tutorial basico consegui compreender o funcionamento e desenvolver outras funcionalidades (simples é claro)

    Um abraço!

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>