jQuery é um framework javascript muito leve, é crossbrowser, além de ser muito fácil de manipular. Seu tamanho é de 30.3 KB e inclui suporte a Ajax, manipulação de elementos DOM, tratamento de eventos, plugins, vários efeitos como FadeIn e FadeOut etc…

Com javascript você precisaria de várias linhas de código, além do problema da compatibilidade entre os browsers, mas com jQuery essa incompatibilidade não existe, você simplesmente cria e pronto!

Para aprender um pouco mais de teoria, você pode ler a documentação (que é bem completa). Então vamos praticar um pouco!

Para poder usar a jQuery, primeiro você deve inclui-la no head do documento:

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

Como quase tudo o que fazemos com jQuery necessita que o DOM esteja carregado, registramos o evento ready para o nosso documento:

$(document).ready(function() {//SEU CÓDIGO AQUI});

Crie uma div e defina seu ID como teste e coloque um texto qualquer nela. Agora, vamos associar o evento click a essa div:

$(document).ready(function(){
$("#teste").click(function() {
alert("Hello word!");
});
});

Faça o teste em algum navegador: clique na div e veja a mensagem! O exemplo pronto está aqui.

Vamos entender o que fizemos:

• $ - é o alias para a classe jQuery
• $(”#teste”) - é um seletor, que vai selecionar a div teste
• .click - o evento que se está associando

Defina uma cor de fundo para a DIV usando CSS. Vamos agora testar alguns efeitos:

$(document).ready(function(){
$("#teste").bind("mouseenter",function(){
$(this).animate({opacity:1},500);
}).bind("mouseleave",function(){
$(this).animate({opacity:0.5},500);
});
});

Teste novamente no navegador: passe o mouse e veja o efeito. Você pode ver o exemplo pronto aqui.

• .bind(”mouseenter” - associamos o evento mouseenter
• $(this) - como estamos associando o evento à div teste, não é necessário usar $(”#teste”)

Agora faça modificações, leia um pouco da documentação do jQuery e principalmente: mexa no código e descubra, só assim você aprenderá!

Por hoje é só, amanhã teremos mais uma “aulinha” aqui no TechLive. Até a próxima!

UmbigoThis! (Compartilhe) =]