Apenas uma tradução para português do Brasil do tutorial de jQuery presente em http://docs.jquery.com/How_jQuery_Works. Por ser praticamente um “getting started” oficial e não encontrei nenhuma versão deste texto em português, resolvi traduzi-lo eu mesmo. Se por acaso encontrar algum “eu” no texto, se refere ao autor original (John Resig.).
jQuery: O Básico
Este é um tutorial básico, desenvolvido para ajudá-lo a começar a usar o jQuery. Se você ainda não tem uma página de teste pronta, comece criando uma nova página HTML com o seguinte conteúdo:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<a href="http://www.codigocomcafe.com/">Código com Café</a>
</body>
</html>Altere o atributo src da tag script para que aponte para a sua cópia do jquery.js. Por exemplo, se jquery.js estiver no mesmo diretório que se arquivo HTML, você pode usar:
<script type="text/javascript" src="jquery.js"></script>
Nota: Quando a página inteira é incluída através das funções include() ou require() do PHP, tenha certeza de colocar o script dentro da tag <body> e não dentro de <head>, porque chamando o arquivo de script do jQuery dentro da tag <head> por algum motivo não funciona.
Você pode baixar sua própria cópia do jQuery na página Downloading jQuery.
Lançando o código quando o documento estiver pronto
A primeira coisa que a maioria dos programadores de JavaScript acaba fazendo é adicionar algum código ao programa, parecido com isto:
window.onload = function(){ alert("bem-vindo"); }
Dentro disso fica o código que você quer que rode exatamente quando a página for carregada. Problematicamente, contudo, o código JavaScript não roda até que todas as imagens forem baixadas (isto inclui os banners de propaganda). O motivo para usar window.onload em primeiro lugar é que o ‘document’ do HTML ainda não está completamente carregado, quando você tenta rodar seu código pela primeira vez.
Para burlar ambos os problemas, jQuery tem uma instrução simples que checa o documento e espera até que ele esteja pronto para ser manipulado, conhecido como o evento ready
$(document).ready(function(){ // Seu codigo aqui (com ou sem cafe) });
Dentro do evento ready, insira um manipulador do evento click para o link:
1 2 3 4 5 | $(document).ready(function(){ $("a").click(function(event){ alert("Obrigado por visitar"); }); }); |
Salve seu arquivo HTML e recarregue a página de testes em seu navegador. Clicando no link na página deve aparecer uma caixa de mensagem no navegador, antes de deixar a página para ir até a página principal do Código com Café.
Para click e muitos outro eventos, você pode previnir o comportamento principal – aqui o link até www.codigocomcafe.com – chamando event.preventDefault() no manipulador do evento:
1 2 3 4 5 6 | $(document).ready(function(){ $("a").click(function(event){ alert("Como pode ver, o link não te leva mais para www.codigocomcafe.com"); event.preventDefault(); }); }); |
Exemplo Completo
O seguinte é um exemplo de como o arquivo HTML completo deve parecer se você usou o script em seu próprio aquivo. Note que ele aponta para o CDN do Google para carregar o arquivo do jQuery. Também, enquanto o script personalizado foi colocado dentro da tag <head>, em geral é preferível que se coloque em um arquivo separado e se referir a este arquivo no atributo src do elemento script.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(event){ alert("Como pode ver, o link não te leva mais para www.codigocomcafe.com"); event.preventDefault(); }); }); </script> </head> <body> <a href="http://www.codigcomcafe.com/">Código com Café</a> </body> </html> |
Adicionando e Removendo uma Classe CSS
Importante: Os exemplos em jQuery daqui pra frente precisarão ser colocados dentro do evento ready, assim eles serão executados quando o documento estiver pronto para se trabalhar. Veja Lançando o código quando o documento estiver pronto acima para detalhes.
Outra tarefa comum é adicionar (ou remover) uma classe CSS.
Primeiro, adicione uma alguma informação de estilo dentro de <head> do seu documento, como isto:
<style type="text/css"> a.teste { font-weight: bold; } </style>
Em seguida, adicione a chamada addClass ao seu script:
$("a").addClass("teste");
Todos os seus elementos a ficarão em negrito.
Para remover uma classe, use removeClass
$("a").removeClass("teste");
- (CSS permite que múltiplas classes sejam adicionadas a um elemento)
Efeitos Especiais
Em jQuery, são providos alguns efeitos úteis, para realmente fazer o sew website se sobressair. Para colocar isso em teste, altere o click que você adicionou previamente para isto:
1 2 3 4 | $("a").click(function(event){ event.preventDefault(); $(this).hide("slow"); }); |
Agora, se você clicar em algum link, isto deve fazê-lo sumir vagarosamente.
FUNÇÕES E CALLBACK
Callback é uma função passada como argumento para outra função e é executada quando sua função-mãe for completada. A coisa especial sobre callback é que a função que aparece depois da “mãe” pode executar antes que o callback execute.
Outra coisa importante é saber como passar apropriadamente o callback. Isto é onde muitas vezes eu esqueci da sintaxe apropriada.
Callback sem argumentos
Para um callback sem argumentos, você passa como este:
$.get('minhapagina.html', meuCallBack);
Note que o segundo parâmetro aqui é simplesmente o nome da função (mas não como uma string e sem parênteses). Funções em JavaScript são ‘Cidadãos de primeira classe’ e assim devem ser passadas como referências de variáveis e executadas num momento mais tarde.
Callback com argumentos
“O que se faz quando tiver argumentos que deseja passar?”, você pode perguntar a si mesmo.
Errado
A Forma Errada (Não irá funcionar!)
$.get('minhapagina.html', meuCallBack(param1, param2));
Não funciona porque isso chama
meuCallBack(param1, param2)
e então passa o valor retornado como segundo parâmetro para $.get().
Certo
O problema com o exemplo acima é que meuCallBack(param1, param2) é avaliado antes de ser passado como uma função. JavaScript e por extensão o jQuery espera um ponteiro em casos como esse. Por exemplo, a função setTime
Na utilização abaixo, uma função anônima é criada (apenas um bloco de instruções) e então registrada como a função callback. Note o uso de ‘function(){’. A função anônima faz exatamente uma coisa: chama meuCallBack, com os valores de param1 e param2 no escopo exterior.
$.get('minhapagina.html', function(){ meuCallBack(param1, param2); });
param1 e param2 são avaliados como um callback assim que $.get() terminar de obter a página.
MAIS LEITURAS
Encerrando por aqui a tradução, mantenho a indicação original para os tutoriais e para a Documentação do jQuery.
Comecei agora a estudar jQuery e pretendo postar as funções que achar interessantes (ou úteis). É um pouco difícil encontrar conteúdo em português, então por esse motivo pretendo postar algumas coisas aqui. E dizem que o livro do Maujor é muito bom.
Muito bom George, dicas muito interessantes…