A idéia é que você mesmo possa ir fazendo os passos que vamos relatar, para que comprove o simples que é começar a utilizar jQuery. Este artigo segue o esquema com o que os próprios criadores de jQuery ensinam a utilizar seu produto, portanto está diretamente inspirado na documentação de jQuery.
Dão duas possibilidades para baixar, uma que se chama PRODUCTION, que é a adequada para páginas web em produção, visto que está minimizada e ocupa menos espaço, com o qual o carregamento em nosso site será más rápido. A outra possibilidade é baixar a versão que se chama DEVELPOMENT, que está com o código sem comprimir, com o qual ocupa mais espaço, mas se poderá ler a implementação das funções do framework, que pode ser interessante em etapa de desenvolvimento, porque poderemos mergulhar no código de jQuery caso tenhamos que entender algum assunto do trabalho com o framework.
Você verá que o download é um arquivo js que contem o código completo do framework. Coloque o arquivo em uma pasta em seu computador para fazer as provas.
<html>
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
</script>
</head>
<body>
<a href="http://www.criarweb.com/">CriarWeb.com</a>
</body>
</html>
Como poderá ver, é uma página bem simples, na qual temos uma chamada a um script externo chamado jquery-1.3.2.min.js. Este é o código de jQuery que baixamos da página do framework. Se tiver baixado uma versão distinta, talvez o arquivo se chame de outra maneira, assim que é possível que tenha que editar esse nome de arquivo para colocar o que tiver no diretório.
Com esse script já incluímos todas as funções de jQuery dentro de nossa página. Só tem que prestar atenção a que tanto o arquivo .html desta página, como o arquivo .js do framework estejam no mesmo diretório. E, como dizia, que o arquivo que incluímos com a etiqueta SCRIPT seja o .js que nós baixamos.
Ademais, como se pode ver, deixamos dentro do HEAD uma etiqueta SCRIPT de abertura e fechamento que está vazia. Todo o código que vamos explicar a seguir você terá que colocá-lo dentro dessa etiqueta.
Quando fazemos certas ações complexas com Javascript temos que estar seguros que a página tenha terminado de carregar e esteja pronta para receber comandos Javascript que utilizem a estrutura do documento com o objetivo de mudar coisas, como criar elementos, tirá-los, aletrar suas propriedades, etc. Se não esperamos que a página esteja pronta para receber instruções corremos um alto risco de obter erros de Javascript na execução.
Geralmente, quando se deseja executar Javascript depois do download da página, se não utilizamos nenhum framework, o mais normal será utilizar um código como este:
window.onload = function () {
alert("carregado...");
}
Porém esta instrução, que carrega uma funcionalidade no evento onload do objeto window, só se executará quando o navegador tiver baixado completamente TODOS os elementos da página, o que inclui imagens, iframes, banners, etc. o que pode demorar bastante, dependendo dos elementos que tiver essa página e seu peso.
Porém, na verdade não faz falta esperar todo esse tempo de carregamento dos elementos da página para poder executar instruções Javascript que alterem o DOM da página. Só teria que fazê-lo quando o navegador tiver recebido o código HTML completo e tiver processado ao renderizar a página. Para isso, jQuery inclui uma maneira de fazer ações justo quando já está pronta a página, embora haja elementos que não tenham sido carregados completamente. Isto se faz com a seguinte instrução:
$(document).ready(function(){
//código a executar quando o DOM estiver pronto para receber instruções.
});
Por dar uma explicação a este código, digamos que com $(document) se obtém uma referência ao documento (a página web) que se está carregando. Logo, com o método ready() se define um evento, que se desata ao ficar pronto o documento para realizar ações sobre o DOM da página.
Para este primeiro exemplo vamos criar um evento click no link, para mostrar uma mensagem quando se clique sobre o link. Para criar um evento click sobre um elemento temos que invocar ao método click sobre esse elemento e passar-lhe como parâmetro uma função com o código que queremos que se execute quando se clica.
$("a").click(function(evento){
//aqui o código que se deve executar ao clicar
});
Como vemos no código anterior, com $("a") obtemos uma referência ao link. Bom, na verdade com isso estamos selecionando todas as etiquetas A (links) do documento, porém como só há um link, em realidade nos serve. Logo, o método click() sobre $("a") estamos definindo um evento, que se executará quando se clique sobre o link. Como se pode ver, ao método click se passa uma função onde se deve colocar o código Javascript que queremos que se execute quando se clique sobre o link.
Agora vejamos a definição do evento clique completa, colocada dentro do evento ready do document, para que se atribua quando a página estiver pronta.
$(document).ready(function(){
$("a").click(function(evento){
alert("Clicou o link...Agora será enviado a CriarWeb.com");
});
});
Por linhas, isto é uma recapitulação do que fizemos:
$(document).ready(function(){
Esta linha serve para fazer coisas quando a página estiver pronta para receber instruções jQuery que modifiquem o DOM.
$("a").click(function(evento){
Com esta linha estamos selecionando todas as etiquetas A do documento e definindo um evento click sobre esses elementos.
alert("Clicou o link...Agora será enviado a CriarWeb.com");
Com esta linha simplesmente mostramos uma mensagem de alerta informando ao usuário que se clicou sobre o link.
Pode-se ver este script em funcionamento em uma página à parte.
Já está feito e funcionando seu primeiro script com jQuery!
Caso tenham ficado dúvidas, deixamos aqui o código completo que deveria ter:
<html>
<head>
<title>Primeiro script com jQuery</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("a").click(function(evento){
alert("Clicou o link...Agora será enviado a CriarWeb.com");
});
});
</script>
</head>
<body>
<a href="http://www.criarweb.com">Ir a CriarWeb.com</a>
</body>
</html>
Este comportamento se pode bloquear também desde jQuery, adicionando uma chamada ao método preventDefault() sobre o evento. Se observar, a função definida para marcar o comportamento do evento click sobre o link recebia um parâmetro. Esse parâmetro é um manejador de evento. E tem seus próprios métodos e propriedades, como este preventDefault() que comentávamos. Seu uso é o seguinte:
$(document).ready(function(){
$("a").click(function(evento){
alert("Clicou o link, mas vamos cancelar o evento...Portanto, não levaremos a CriarWeb.com");
evento.preventDefault();
});
});
Como pudemos ver invocando a evento.preventDefault() o que conseguimos neste caso é que o link não leve a nenhum lugar, simplesmente se executará o código Javascript contido para o evento click.
