Conhecendo e usando a jQuery
19/10/08 23h01Para quem ainda não sabe o que é a jQuery, aà vai. É uma biblioteca escrita em JavaScript que facilita a nossa vida na hora de fazer programações client-side.
Mas porque devemos usar alguma biblioteca como esta? A resposta é simples, para quem já tentou fazer algo um pouco mais complexo em JavaScript na raça, viu que, além de trabalhoso, quando você começa a testar seu script em todos os navegadores, começa a enfrentar mais problemas do que tinha imaginado.
É exatamente aà que entra um biblioteca como essa. Os desenvolvedores já fazem sua implementação para que seu uso funcione na maioria dos navegadores disponÃveis no mercado e, tudo de uma forma muito simples. É uma mão na roda para economizarmos nosso precioso tempo.
Entre algumas vantagens da jQuery estão: cross-browser, duas versões para download, uma para desenvolvedores e outra compactada, facilidade para acessar elementos no DOM, fácil manipulação de eventos, implementações AJAX e até animações e transições com poucas linhas e claro, talvez o mais importante, boa documentação.
A versão atual da jQuery é a 1.2.6 e você pode fazer o download diretamente do site. A documentação também está toda lá. Agora, vamos colocar a mão na massa.
Faça o download da biblioteca, crie uma pasta na sua área de trabalho e coloque o arquivo lá dentro. Crie também um arquivo chamado debug.html e coloque o código abaixo dentro dele e faça seus testes. Tenho certeza que isso fará você começar a pesquisar e se divertir.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-BR">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Exemplo 01 - Usando jQuery</title>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<style>
body {
font-family:verdana;
color:#fff;
}
div {
border:1px solid black;
width:150px;
height:100px;
padding:10px;
background:green;
}
a {
display:block;
margin:10px;
}
</style>
</head>
<body>
<div id="floater">
Este DIV servirá de exemplo para movimentarmos usando a jQuery.
</div>
<a href="" id="some">Some com o DIV</a>
<a href="" id="mostra">Mostra o DIV</a>
<script>
$("div").click(function(event) {
alert("Você clicou dentro do DIV!");
});
$("#some").click(function (event) {
$("#floater").fadeOut(5000);
event.preventDefault();
});
$("#mostra").click(function (event) {
$("div").fadeIn(5000);
event.preventDefault();
});
</script>
</body>
</html>
