O que é e como funciona o jQuery

Mas hein?! jQuery? Que bicho é esse?

Pra quem ainda não conhece, o jQuery é um framework de Javascript.
Um framework, de forma bem resumida, é uma coleção de funções e métodos prontos para serem utilizados, amplamente testados e que devem ser usados de forma pré-definida para tudo correr bem.
Em alguns casos um framework chega a ser um estilo completamente novo de programar em certa linguagem, no caso do Javascript, o jQuery é, sem dúvida, um estilo novo, atrativo, fácil e interessantíssimo de programar.
Existem inúmeros outros frameworks de Javascript como o MooTools ou ExtJS mas eu sempre vou puxar a sardinha pro lado do jQuery por que ele realmente merece!
O jQuery foi criado sob o mantra do “Write less, do more” (Escreva menos, faça mais) e é exatamente por causa disso que ele é tão surpreendente, com algumas poucas linhas de código você consegue fazer os mais variados efeitos que antes custavam dezenas de linhas de código com Javascript puro ou algumas horas de trabalho em Flash.

E onde eu uso isso?

Você pode usar o jQuery para fazer praticamente qualquer efeito legal, ou requisições em AJAX ou até mudanças na página após o seu carregamento.
Para poder utlizar o jQuery você precisa sempre inserí-lo no seu HTML, você pode fazer o download do arquivo .js no site oficial e chama-lo no seu HTML ou usar uma versão hospedada pelo Google.
Em ambos os casos você precisa inserir o script dentro do do seu site ou logo antes do , veja a seguir a linha que insere o script pra cada um dos casos:

Inserindo o jQuery local (salvo no seu site)

<script type="text/javascript" src="js/jquery-1.4.2.min.js">script>

Inserindo o jQuery hospedado no Google

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">script>

Vamos ver alguns exemplos básicos de como é fácil e simples usar essa ferramenta:

Efeito de foco em uma lista de imagens

Suponhamos que você tenha uma lista de imagens com o seguinte HTML:

1<ul class="lista-imagens">

2    <li><img src="img/imagem1.jpg" alt="Imagem 1" width="200" height="200" />li>

3    <li><img src="img/imagem2.jpg" alt="Imagem 2" width="200" height="200" />li>

4    <li><img src="img/imagem3.jpg" alt="Imagem 3" width="200" height="200" />li>

5    <li><img src="img/imagem4.jpg" alt="Imagem 4" width="200" height="200" />li>

6ul>

E você queira fazer com que, ao passar o mouse sobre uma das imagens, as outras se apagem um pouco, deixando apenas a que está com o cursor em cima, acesa.
Antes de começar o seu script, você precisa criar um passo-a-passo de como o seu efeito irá funcionar, isso te ajuda a entender o jQuery de forma mais fácil:

Ao passar o mouse em cima de uma imagem (evento que irá disparar o efeito)
Todas as imagens se apagam, exceto a imagem que estamos com o mouse em cima
Ao tirar o mouse de cima da imagem
Todas as imagens se acendem voltando ao estado original

O jQuery funciona todo baseado em eventos, você determina um evento e, assim que ele for lançado, um certo script é executado.
A maioria dos scripts de jQuery são executados após o carregamento do site, o que também é um evento. De forma geral, após o carregamento do site nós criamos gatilhos em alguns elementos (HTML) da página e assim que esses eventos forem ativados os efeitos vão acontecendo em paralo.
Crie um arquivo jquery.init.js (o nome do arquivo não é obrigatório) e insira-o no seu site logo após o jQuery:

<script type="text/javascript" src="js/jquery-1.4.2.min.js">script>

<script type="text/javascript" src="js/jquery.init.js">script>

Agora dentro dele coloque o seguinte código:

1(function($) {

2

3})(jQuery);

Este é um template padrão que você deve usar sempre que for criar um arquivo para jQuery. Com esse template você evita problema de compatiblidade entre o jQuery e outros frameworks que usam a função $ para executar seus códigos. Considere esse template como uma lâmpada ou computador: você não precisa entender como funciona pra depender, usar e achar que não vive sem.
Agora vamos criar o código que criará o evento de “quando o site terminar de carregar”:

1(function($) {

2

3    // Quando o site terminar de carregar...

4    $(document).ready(function() {

5

6    });

7

8})(jQuery);

Este evento é quase sempre necessário pois o jQuery trabalha com os elementos HTML da página, e se você inserir o script no e sair rodando jQuery nos elementos, receberá mensagens de erro pois o jQuery não irá encontrar os elementos que ainda não foram carregados.
Criado o nosso evento, podemos começar a desenvolver o nosso efeito de foco na lista de imagens, voltando a nossa lista de passos, começaremos pelo começo:

Ao passar o mouse em cima de uma imagem (evento que irá disparar o efeito)

Precisamos então, criar um um evento de hover nas imagens:

6// Quando passarmos o mouse me cima das imagens

7$('ul.lista-imagens li img').hover(function() {

8

9});

Vamos parar aqui para entender aquela primeira linha separando-a em partes:
$('ul.lista-imagens li img').hover(function() { ... });
Na parte em azul temos uma chamada à função $() que é um atalho da função principal jQuery. Praticamente toda linha de jQuery começa dessa mesma forma.
Na parte em amarela temos o seletor, que segue o mesmo padão de seletores CSS e serve para nos ajudar a localizar o evento ao qual aplicaremos o efeito, evento ou método. Nesse caso, estamos procurando as os elementos img que estejam dentro de um li, que por sua vez estejam dentro de uma ul com classe lista-imagens, o que no CSS seria exatamente o seletor que usamos: ul.lista-imagens li img.
Na parte em laranja temos uma chamada ao método hover() este método é ativado sempre que passamos o mouse sobre o elemento identificado no seletor (parte amarela). O método .hover() possui dois parâmetros: primeiro o que será executado quando o mouse “entrar” no elemento e o segundo quando o mouse “sair” do elemento.
E por fim, na parte em verde, temos o primeiro parâmetro do método hover()… Tudo que estiver dentro dessa parte será executado ao passar o mouse no elemento identificado pelo seletor.

Todas as imagens se apagam…

Continuando o nosso código, vamos inserir a linha que irá escurecer (apagar / diminuir a opacidade / esmaecer) todas as imagens da lista… Para isso usaremos o método .fadeTo() do jQuery.

06// Quando passarmos o mouse me cima das imagens

07$('ul.lista-imagens li img').hover(function() {

08

09    // Escurecemos todas as imagens da lista

10    $('ul.lista-imagens li img').fadeTo('fast', 0.3);

11

12});

O método .fadeTo() possui dois parâmetros obrigatórios: primeiro a velocidade de transição em milisegundos (onde ‘fast’ significa cerca de 1/3 de segundo) e o segundo parâmetro é a opacidade de destino que vai de 0 até 1.
Com esse efeito, todas as imagens da lista ficarão com 30% de opacidade (70% transparentes). Perceba que escurecemos também a imagem que estamos com o mouse em cima.

… exceto a imagem que estamos com o mouse em cima

Agora precisamos “filtrar” esse efeito de escurecer e fazer com que ele afete todas as imagens exceto a imagem que estamos com o mouse em cima:

09// Escurecemos todas as OUTRAS imagens da lista

10$('ul.lista-imagens li img').not(this).fadeTo('fast', 0.3);

Perceba que inserimos o .not(this), esse método .not() faz com que, [nesse caso] depois de selecionar todas as imagens da lista, nós excluímos o this que faz referência ao elemento que ativou o efeito.
Se você testar o script que fizemos até agora, perceberá que as imagens estão apagando corretamente, mas não estão acendendo novamente quando tiramos o mouse de uma das imagens.

Ao tirar o mouse de cima da imagem

Precisamos adicionar o segundo parâmetro do .hover(), este segundo parâmetro é executado quando tiramos o mouse do elemento que ativou o efeito.

06// Quando passarmos o mouse me cima das imagens

07$('ul.lista-imagens li img').hover(function() {

08

09    // Escurecemos todas as OUTRAS imagens da lista

10    $('ul.lista-imagens li img').not(this).fadeTo('fast', 0.3);

11

12}, function() {

13

14    // Aqui teremos o código que será executado quando tirarmos o mouse da imagem

15

16});

Todas as imagens se acendem voltando ao estado original

Agora só precisamos inserir o mesmo código que usamos para escurecer as imagens, sem precisar filtar o this, e mudando a opacidade para 1:

06// Quando passarmos o mouse me cima das imagens

07$('ul.lista-imagens li img').hover(function() {

08

09    // Escurecemos todas as OUTRAS imagens da lista

10    $('ul.lista-imagens li img').not(this).fadeTo('fast', 0.3);

11

12}, function() {

13

14    // Todas as imagens se acendem voltando ao estado original

15    $('ul.lista-imagens li img').fadeTo('fast', 1.0);

16

17});

Com esse código o nosso efeito já está pronto, veja aqui ele funcionando.
Você provavelmente vai notar que o efeito fica “enfileirado”, ou seja, se passarmos o mouse sobre várias imagens rapidamente o efeito vai ficar acontecendo um depois do outro como se o código estivesse agindo sozinho.
Sabendo disso, precisamos fazer todos os efeitos “pararem” antes de começar um novo, isso vai fazer com que, cada vez que passarmos o mouse sobre uma imagem, o efeito seja executado imediatamente e, se houverem outros efeitos na fila, eles sejam sobrepostos… Fazemos isso usando o método .stop() antes do .fadeTo():

06// Quando passarmos o mouse me cima das imagens

07$('ul.lista-imagens li img').hover(function() {

08

09    // Escurecemos todas as OUTRAS imagens da lista

10    $('ul.lista-imagens li img').not(this).stop().fadeTo('fast', 0.3);

11

12}, function() {

13

14    // Todas as imagens se acendem voltando ao estado original

15    $('ul.lista-imagens li img').stop().fadeTo('fast', 1.0);

16

17});

Agora sim nosso efeito ficou completo e, pasmem, com apenas cinco linhas:

1$('ul.lista-imagens li img').hover(function() {

2    $('ul.lista-imagens li img').not(this).stop().fadeTo('fast', 0.3);

3}, function() {

4    $('ul.lista-imagens li img').stop().fadeTo('fast', 1.0);

5});