Os requisitos para se trabalhar com JQuery são:
- fazer o download da versão mais atual do JQuery;
- incluir o arquivo .JS na sua página através do código:
<script type="text/javascript" src="nome_do_arquivo.js"></script>
- conhecer o básico de JavaScript;
- entender a estrutura do JQuery.
Entendendo a estrutura do JQuery
Cada comando pode ser dividido basicamente em 3 partes:
$() => É a função que gerencia tudo aquilo que você quiser implementar.
.click() => Representa o evento que será utilizado.
function(){ } => Lugar onde deve ser indicado o que irá acontecer quando o evento ocorrer.
No exemplo abaixo, quando a página for carregada, será chamada a função que exibirá uma mensagem ao usuário.
$(document).ready(function(){
alert("olá mundo!"); })
Se criarmos uma DIV em nossa página poderemos, por exemplo, aplicar um efeito de desaparecimento apenas clicando nela:
<div id="mensagem">Eu consigo ler essa frase!</div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('#mensagem').click(function(){
$('#mensagem').toggle();
})
})
//]]>
</script>
Perceba que foi indicado o ID da DIV mensagem para que a mesma suma ao ser clicada.
Essa é apenas uma das formas de se trabalhar com JQuery, para conhecer as demais formas e eventos, acesse a página de documentação do JQuery, nela existem diversos exemplos, não se esqueça de passar também pela página de plugins.
Segue o cógido completo do exemplo (não esqueça de fazer o download do JQuery para que funcione!).
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Trabalhando com JQuery</title>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('#mensagem').click(function(){
$('#mensagem').toggle();
})
})
//]]>
</script>
</head>
<body>
<div id="mensagem">Eu consigo ler essa frase!</div>
</body>
</html>
