Qual é a vantagem de utilizar ela?

Creio que podemos fazer uma lista:

• Compatibilidade com qualquer navegador;
• Seu peso é bem leve ficando em torno de 20 KB (compactada);
• Otimização de código, você evita de programar linhas e linhas de código;
• Você consegue acessar a qualquer elemento ou combinações de elementos;
• Possui diversos efeitos visuais para deixar seu site mais atraente.

Iniciando com a jQuery

Faça o download da versão mais recente da jQuery:

http://docs.jquery.com/Downloading_jQuery

Feito o download do arquivo, basta adicionar o arquivo na sua página.

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

A sintaxe da jQuery

A jQuery tem uma sintaxe bem simples e intuitiva.

Suponha que você queira selecionar todas as tag's div, seu código seria o seguinte:

( "div" );

Quanto no método tradicional, você teria de usar:

document.getElementsByTagName("div");

Esse exemplo bem básico já demonstra a simplicidade da jQuery e o tempo que você pode economizar utilizando ela.

Agora suponhamos que você queira selecionar uma div com um id em específico.

( "id_da_div" );

Bom, mas até agora não fizemos nada de interessante. Suponhamos que você queira esconder todas as tags 'P' de um local em específico:

( "p" , "id_da_div" ).hide();

Fácil, não é? E para fazer o inverso é bem fácil, e também intuitivo. Basta usar .show();

A jQuery ainda conta com efeitos do tipo fadeIn, fadeOut e fadeTo:

("p").fadeIn("slow");

("p").fadeOut("slow");

("p").fadeTo("slow", 0.5);

Eventos com jQuery

Mas até agora o que vimos de jQuery não se trata muito do nosso dia-a-dia. A biblioteca da jQuery é tão poderosa que nos permite manipular eventos JavaScript (onclick,onmouseout,etc) e nos permite adicionar esses eventos aos objetos.

Agora queremos adicionar um botão que, quando clicarmos nele, irá aplicar fadeOut em outro elemento. Nosso HTML seria:

<div id="menu">
<p>www.vipertech.com.br</p>
</div>
<button id="botao">Clique aqui</button>

Nosso código jQuery seria somente:

("botao").click( function() {
	( "p", "menu" ).fadeOut ("slow");
});

O que estamos fazendo é bem intuitivo. Como explicado já anteriormente, pegamos o objeto de id "botao" e adicionamos uma função (function) que irá chamar o efeito de fadeOut. Tudo isso em apenas 3 linhas de código. Poderíamos adicionar outros eventos como já mencionei antes.

Manipulando Objetos DOM

A jQuery ainda nos permite manipular objetos DOM com ela. Vamos ainda utilizar o exemplo acima:

("botao").click( function() {
	( "p", "menu" ).text('Breno Henrique Duarte de oliveira');
});

Assim podemos demonstrar a facilidade de utilizar a biblioteca do jQuery.

Na jQuery temos uma função que funciona de maneira similar a innerHTML:

("div").html("<b>Novo Nó HTML</b>");

Podemos manipular atributos de uma imagem por exemplo. Podemos mudar sua SRC:

("botao").click( function() {
	("img").attr("src","img/editar.png");
});

O código acima vai alterar o src de todas as imagens. Mas você pode colocar um ID na imagem e apenas alterar a imagem que você queira.

Você passa como primeiro parâmetro o atributo e depois o novo valor.

Aqui só mostrei algumas coisas que a jQuery é capaz de fazer em apenas algumas linhas de código. Claro que você pode fazer tudo o que foi mostrado aqui utilizando outras bibliotecas ou o próprio DOM com CSS, porém vale a pena você conferir e utilizar a jQuery. Ele é bem leve e com um leque de recursos úteis.

Referências:

• http://docs.jquery.com/Main_Page;
• http://www.visualjquery.com/1.1.1.html