Com o objetivo de que os leitores possam ter uma rápida idéia das possibilidades de jQuery, escrevendo umas brevíssimas linhas de código Javascript, vamos publicar um par de exemplos bem simples que nos ilustrem, porém sem complicar muito. Servirão para a introdução a jQuery que estamos publicando no Manual de jQuery.

A idéia deste artigo não é explicar as funcionalidades que vamos demonstrar, e sim ver o pouco código que tivemos que escrever para realizar uns scripts com dinamismos simples. Talvez os scripts em si não digam muito a um leitor pouco experiente, mas aos que já tiveram contato com os pormenores que há que seguir para fazer estes efeitos, de maneira que sejam compatíveis com todos os navegadores, saberão que jQuery nos simplificou muito nossa tarefa.

Sendo assim, não se preocupe demais com os detalhes destes códigos, que explicaremos em CriarWeb.com mais adiante com mais detalhes.

Demo 1 de jQuery

Para começar veremos este exemplo, onde temos dois botões e um texto. Ao clicar um botão, mudaremos o texto e ao clicar o outro colocaremos outro texto distinto.

Podemos ver o exemplo em funcionamento em uma página à parte.

Neste exemplo, temos uma camada que tem este código:

<div id="camada" style="padding: 10px; background-color: #ff8800">Clique em um botão</div>

Logo, temos dois botões com estes códigos:

<input type="button" value="Botão A" onclick="$('#camada').html('Clicou no botão <b>A</b>')">
<input type="button" value="Botão B" onclick="$('#camada').html('Recebido um clique no botão <b>B</b>')">

Como se pode ver, nos botões há definido um par de eventos onclick (um em cada um) que executam uma instrução Javascript quando se clica sobre eles. A instrução está em Javascript, porém faz uso de algumas ferramentas disponíveis em jQuery para trabalho com os elementos da página. Neste caso, explicando rapidamente, se faz uma seleção do elemento DIV da camada e logo se executa um método sobre ele para mudar o conteúdo HTML do elemento.

Demo 2 de jQuery

Neste outro exemplo, veremos algo um pouquinho mais complexo. Bom, realmente não tem maior complexidade, porém estamos utilizando jQuery de uma maneira um pouco distinta, que requer algo mais de código por nossa parte. Agora vamos ter duas camadas em nossa página. Uma camada estará sempre visível e a outra camada aparecerá inicialmente oculta e vamos mostrá-la ou ocultá-la dependendo de se o usuário coloca o mouse em cima da camada que está sempre visível.

Para se ter uma idéia exata de nosso exemplo se pode ver em uma janela à parte.

Neste segundo exemplo, temos este código HTML, com as duas camadas.

<div id="camada" style="padding: 10px; background-color: #ff8800;">Coloque o mouse em cima desta camada</div>
<br>
<div id="mensagem" style="display: none;">Colocou o mouse em cima!! <br>(Agora tire-o da camada)</div>


Agora vamos ter um código Javascript com jQuery que defina os eventos do usuário, para quando situa o mouse dentro ou fora da primeira camada.

$("#camada").mouseenter(function(evento){
   $("#mensagem").css("display", "block");
});
$("#capa").mouseleave(function(evento){
   $("#mensagem").css("display", "none");
});

Desta simples maneira, criamos dois eventos no DIV com id="camada". Ademais, definimos o código dos eventos por meio de funções, que se encarregarão de mostrar ou ocultar a segunda camada com id="mensagem".

$("#mensagem").css("display", "block");

Isto nos seleciona a camada com id "mensagem" e com o método css() indicamos que queremos mudar o atributo "display" ao valor "block" desse elemento.

$("#mensagem").css("display", "none");

Esta outra linha muito similar, simplesmente muda o "display" a "none" para ocultar o elemento.

Esperamos que estes dois exemplos sirva para ver rapidamente algumas coisas que se podem fazer com jQuery com muito pouco esforço e que funcionam em todos os navegadores.