Iniciando em jQuery

Para quem não conhece, jQuery é um framework para Javascript ALTAMENTE poderoso. Acabou de chegar em sua versão 1.3, com novas funcionalidades.

por Rafael Costa

Para quem não conhece, jQuery é um framework para Javascript ALTAMENTE poderoso. Acabou de chegar em sua versão 1.3, com novas funcionalidades.

Não-obstrutivo, jQuery é uma ótima solução para quem programa em JavaScript. E seu site conta com uma documentação imensa, onde você poderá consultar sempre que tiver alguma dúvida ( http://www.jquery.com ).

Bom, vamos ao que interessa.

Antes de começar a programar, baixe a última versão do jQuery aqui:
http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.1.min.js&downloadBtn=

Em seus códigos Js, provavelmente você buscava seus elementos no html assim: document.getElementById("elemento"); ou algo parecido.

No jQuery, você irá acessar esse mesmo elemento assim: $("elemento");

Se você quiser acessar todas as âncoras do site, por exemplo, basta usar: $("a"). Todas as imagens: $("img"); E assim por diante...

Uma das funções mais utilizadas no JavaScript é a "window.onload", que executa um bloco de ações assim que a página carregar.

No jQuery, ela deve ser usada desta maneira:

$(document).ready(function(){
	// Ações aqui
});

Veja que neste código, ele executa o código quando o document estiver "ready", ou seja, "pronto".

$(document).ready(function(){
	alert("Documento Iniciado");
});

O browser deverá mostrar o alerta com o dizer: Documento Iniciado.

Feito isso, vamos executar uma função ao clicar em um botão(<a>).
Como falei anteriormente, você acessa seus elementos assim: $("elemento");

$("a").click(function(){
	alert("clicado");
});

Esta função fica responsável por exibir o alerta ao clicar em qualquer link da página. Não se esqueça que tudo isso precisa ficar dentro do .ready();

$(document).ready(function(){
	$("a").click(function(){
		alert("clicado");
	});
});

Caso queira que apenas um link tenha essa ação, um link específico, você pode usar uma class ou um id para identifica-lo. Ficaria assim:

$(document).ready(function(){
	$("a#checked").click(function(){
		alert("clicado");
	});
});

jQuery trabalha também, com css integrado, ou seja, você pode adicionar e remover class"s em css de qualquer elemento de sua página.

Vamos alterar a cor do seu link, quando clicar:

$(document).ready(function(){
	$("a#checked").click(function(){
		$(this).addClass("font-vermelha");
	});
});

Veja que o addClass foi usado para adicionar a class "font-vermelha" quando eu clicar no link.

Essa foi apenas a primeira parte de uma série de tutoriais sobre jQuery. Espero que tenham gostado e não se esqueçam de visitar: http://www.jquery.com

Abraços e bons estudos!

Link de exemplo: http://www.rafaelcosta.com/Tutoriais/jQuery/parte1.html