Neste post vou mostrar uma introdução ao Jquery, motivos para utiliza-lo no desenvolvimento de um web site.

Vantagens:

• Compatibilidade com qualquer navegador;
• Seu peso é bem leve ficando em torno de 20kb(comprimido);
• 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.

Introdução

Primeiramente acesse este link http://docs.jquery.com/Downloading_jQuery, e faça o download da versão mais recente da JQuery. De prefencia baixe a versão comprimida.

Após ter efetuado o download bastar inserir o jquery entre os heads do seu html

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

Utilizando

O uso do jQuery é bem simples, digamos que você queira selecionar todas as tgs ‘div’.

Em javascript

document.getElementsByTagName("div");

Em jQuery:

("div");

Seguindo o exemplo acima já podemos ter uma noção da simplicidade do uso do jQuery. Agora supomos que vc queira selecionar não todas as divs, mas outro elemento pelo id ou pela classe.

// pela id conteudo
("#conteudo");

// pela classe link
(".link");

//um link com a classe titulo
("a.titulo");

//selecionando todas as div com a classe menu que estão dentro da div conteudo
("#conteudo div.menu");
//ou
("div.menu", "#conteudo");

A estrutura segue este padrão bem simples. Sem muita complicação.

Bom agora vejamos como utilizar efeitos no jQuery.

// escondendo um elemento
("#id_do_elemento").hide()

// mostrando o elemento
("#id_do_elemento").show()

No exemplo acima temos
(“#id_do_elemento”) = refencia ao elemento
hide(“slow”) = efeito

O jQuery conta também com efeitos do tipo fadeIn, fadeOut e fadeTo

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

Eventos

Agora queremos um elemento que ao clicarmos nele dispara um evento em outro elemento.

Estrutura html

<a href="#" class="mostra">mostrar div</a>

<div id="recebe" style="display:none;">estou mostrando esta div</div>

Estrutura jQuery

$(document).ready(function(){
                $("a.mostra").click(function(){
                         $("#recebe").show();
                 });
});

Exemplo:
mostrar div

O que foi feito é bem simples, pegamos a tag de link “a” com a classe “mostra” e adicionamos uma acão ao ser clicado “.click(function(){ }) ;”, dentro da função instanciamos o elemento de id “recebe“, adicionando o efeito de show();

O jQuery é bem dinamico e ainda possibilita a manipulação de objetos DOM, Ajax, validação de formulário e muitos outros efeitos.

Por hoje é tudo pessoal, logo estarei postando aqui mais funcionalidades do jQuery.