Jonas Martinez – Web Developer

Buenas! Estive um pouco ocupado e não atualizo a muito tempo… bom voltei e hoje vou mostrar como iniciar com o jquery, você já sabe para o que serve e agora vai aprender como usar… uma mão na roda!

O principio básico como já dito, esta no ‘$’, que seria como ‘document.getElementById’ porém claro com muitas vantagens.

Um dos pontos primordiais do jQuery é você “bindar” ou seja, setar ações nos objetos da página no momento que ela carrega.

Consideramos que já baixamos o jQuery, colocamos na pasta ‘js’, renomeamos para jquery.js e já temos a tag de inclusão do jquery na página que seria:

<script src="js/jquery.js" type="text/javascript"></script>

Vamos imaginar que queremos disparar um alert quando passamos o mouse por cima de uma imagem, para isso fariamos:

<script type="text/javascript">
$('#idDaImagem').mouseover(function(){
    alert('Passou o mouse pela imagem!');
});
</script>

Como você pode ver, é muito simples! Porém o ideal é utilizar todos os “binds” (associação de funções a objetos/eventos) logo depois do carregamento da página, isso evita de setar o comando antes do objeto existir no contexto DOM do browser, ou seja, antes do objeto ter sido criado.

Para isso, é muito comum vermos os dois comandos abaixo, que indicam ao jQuery o que fazer quando a página já foi carregada:

$(document).ready(function() {
    //funções, comandos etc
});

e

$().ready(function() {
    //funções, comandos etc
});

Particularmente prefiro o primeiro modo, com o document pois indica o objeto a ser tratado.

Como você já reparou, o jQuery trabalha muito com uma técnica chamada de “closures” ou ainda “funções anonimas” que são funções sem nome usadas principalmente para callbacks, que são funções de retorno, que aplicados ao conceito acima, fica assim (em português ;p)

Quando ‘document’ estiver pronto, execute o callback

No nosso caso o callback é:

function() {
    //funções, comandos etc
}

Ou seja, muitos dos parametros do jQuery são closures.
Um exemplo mais didático, vamos mostrar um alerta de “Página carregada” quando a página carregar, ficaria:

$(document).ready(function() {
    alert('Página carregada!');
});

Bom por enquanto é só! Confira os inúmeros comandos na página oficial do jQuery em http://docs.jquery.com/Main_Page

Qualquer dúvida mande seu comentário!

Atenção: dúvida não é “faça pra mim”