Iniciando com jQuery
Não vi uma melhor maneira de descrevê-lo a não ser como no site oficial:
[...] Biblioteca JavaScript que simplifica o modo como você percorre documentos HTML, manipula eventos, executa animações, e adiciona interações com Ajax às suas páginas. jQuery destina-se a mudar a maneira que você escreve JavaScript.
Olá Mundo com jQuery
Para começarmos a trabalhar com jQuery, será necessário baixar a biblioteca primeiro, faça o download do arquivo. Agora crie uma página HTML vazia e adicione o seguinte:
<html>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<head>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
alert("Olá Mundo!");
});
});
</script>
</head>
<body>
<a href="#">Clique para ver a Mensagem</a>
</body>
</html>
Foi adicionado o arquivo jquery.js em nossa página e solicitado que, todo elemento a, ao ser clicado, gerasse o alerta “Olá Mundo!”, assim não é necessário ficar especificando onclick=” ” elemento por elemento.
Mostrar / Esconder com jQuery
Vamos para um exemplo um pouco mais divertido agora.
Sua página deverá ficar assim:
<html>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#botao_mostrar").click(function () {
$("#bloco").show("slow"); });
$("#botao_esconder").click(function () {
$("#bloco").hide("slow");
});
});
</script>
<style type="text/css">
#bloco { font:normal 14px sans-serif; }
</style>
</head>
<body>
<div id="bloco"><strong>Este é um texto de exemplo, vamos
fazer de conta que serve pra algo</strong> -
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean vel
sapien non metus elementum venenatis. Mauris viverra
tellus vitae ligula.</div>
<button id="botao_mostrar">Mostrar Texto</button>
<button id="botao_esconder">Esconder Texto</button>
</body>
</html>
As instruções são extremamente simples, quando o documento estiver carregado, você poderá clicar no botão mostrar e ele mostrará a div bloco, se clicar em esconder, ele esconde a div bloco.
Caso tenha dúvidas em relação a CSS, você pode ler o básico neste artigo. Agora você já pode dizer que sabe pelo menos o básico do básico de jQuery.