Demonstração do Jquery.

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.