No artigo de hoje iremos ver o que é e como funciona o jQuery, a ferramenta que veio pra ficar e, arrisco dizer, “só jQuery expulsa o Flash das pessoas!”.
Mas hein?! jQuery? Que bicho é esse?
Pra quem ainda não conhece, o jQuery é um framework de Javascript.
Um framework, de forma bem resumida, é uma coleção de funções e métodos prontos para serem utilizados, amplamente testados e que devem ser usados de forma pré-definida para tudo correr bem.
Em alguns casos um framework chega a ser um estilo completamente novo de programar em certa linguagem, no caso do Javascript, o jQuery é, sem dúvida, um estilo novo, atrativo, fácil e interessantíssimo de programar.
Existem inúmeros outros frameworks de Javascript como o MooTools ou ExtJS mas eu sempre vou puxar a sardinha pro lado do jQuery por que ele realmente merece!
O jQuery foi criado sob o mantra do “Write less, do more” (Escreva menos, faça mais) e é exatamente por causa disso que ele é tão surpreendente, com algumas poucas linhas de código você consegue fazer os mais variados efeitos que antes custavam dezenas de linhas de código com Javascript puro ou algumas horas de trabalho em Flash.
E onde eu uso isso?
Você pode usar o jQuery para fazer praticamente qualquer efeito legal, ou requisições em AJAX ou até mudanças na página após o seu carregamento.
Para poder utlizar o jQuery você precisa sempre inserí-lo no seu HTML, você pode fazer o download do arquivo .js no site oficial e chama-lo no seu HTML ou usar uma versão hospedada pelo Google.
Em ambos os casos você precisa inserir o script dentro do <head> do seu site ou logo antes do </body>, veja a seguir a linha que insere o script pra cada um dos casos:
Inserindo o jQuery local (salvo no seu site)
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
Inserindo o jQuery hospedado no Google
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Vamos ver alguns exemplos básicos de como é fácil e simples usar essa ferramenta:
Efeito de foco em uma lista de imagens
Suponhamos que você tenha uma lista de imagens com o seguinte HTML:
<ul class="lista-imagens"> <li><img src="img/imagem1.jpg" alt="Imagem 1" width="200" height="200" /></li> <li><img src="img/imagem2.jpg" alt="Imagem 2" width="200" height="200" /></li> <li><img src="img/imagem3.jpg" alt="Imagem 3" width="200" height="200" /></li> <li><img src="img/imagem4.jpg" alt="Imagem 4" width="200" height="200" /></li> </ul>
E você queira fazer com que, ao passar o mouse sobre uma das imagens, as outras se apagem um pouco, deixando apenas a que está com o cursor em cima, acesa.
Antes de começar o seu script, você precisa criar um passo-a-passo de como o seu efeito irá funcionar, isso te ajuda a entender o jQuery de forma mais fácil:
- Ao passar o mouse em cima de uma imagem (evento que irá disparar o efeito)
- Todas as imagens se apagam, exceto a imagem que estamos com o mouse em cima
- Ao tirar o mouse de cima da imagem
- Todas as imagens se acendem voltando ao estado original
O jQuery funciona todo baseado em eventos, você determina um evento e, assim que ele for lançado, um certo script é executado.
A maioria dos scripts de jQuery são executados após o carregamento do site, o que também é um evento. De forma geral, após o carregamento do site nós criamos gatilhos em alguns elementos (HTML) da página e assim que esses eventos forem ativados os efeitos vão acontecendo em paralo.
Crie um arquivo jquery.init.js (o nome do arquivo não é obrigatório) e insira-o no seu site logo após o jQuery:
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.init.js"></script>
Agora dentro dele coloque o seguinte código:
(function($) {
})(jQuery);
Este é um template padrão que você deve usar sempre que for criar um arquivo para jQuery. Com esse template você evita problema de compatiblidade entre o jQuery e outros frameworks que usam a função $ para executar seus códigos. Considere esse template como uma lâmpada ou computador: você não precisa entender como funciona pra depender, usar e achar que não vive sem.
Agora vamos criar o código que criará o evento de “quando o site terminar de carregar”:
(function($) {
// Quando o site terminar de carregar...
$(document).ready(function() {
});
})(jQuery);
Este evento é quase sempre necessário pois o jQuery trabalha com os elementos HTML da página, e se você inserir o script no <head> e sair rodando jQuery nos elementos, receberá mensagens de erro pois o jQuery não irá encontrar os elementos que ainda não foram carregados.
Criado o nosso evento, podemos começar a desenvolver o nosso efeito de foco na lista de imagens, voltando a nossa lista de passos, começaremos pelo começo:
Ao passar o mouse em cima de uma imagem (evento que irá disparar o efeito)
Precisamos então, criar um um evento de hover nas imagens:
// Quando passarmos o mouse me cima das imagens
$('ul.lista-imagens li img').hover(function() {
});
Vamos parar aqui para entender aquela primeira linha separando-a em partes:
$('ul.lista-imagens li img').hover(function() { ... });
Na parte em azul temos uma chamada à função $() que é um atalho da função principal jQuery. Praticamente toda linha de jQuery começa dessa mesma forma.
Na parte em amarela temos o seletor, que segue o mesmo padão de seletores CSS e serve para nos ajudar a localizar o evento ao qual aplicaremos o efeito, evento ou método. Nesse caso, estamos procurando as os elementos img que estejam dentro de um li, que por sua vez estejam dentro de uma ul com classe lista-imagens, o que no CSS seria exatamente o seletor que usamos: ul.lista-imagens li img.
Na parte em laranja temos uma chamada ao método hover() este método é ativado sempre que passamos o mouse sobre o elemento identificado no seletor (parte amarela). O método .hover() possui dois parâmetros: primeiro o que será executado quando o mouse “entrar” no elemento e o segundo quando o mouse “sair” do elemento.
E por fim, na parte em verde, temos o primeiro parâmetro do método hover()… Tudo que estiver dentro dessa parte será executado ao passar o mouse no elemento identificado pelo seletor.
Todas as imagens se apagam…
Continuando o nosso código, vamos inserir a linha que irá escurecer (apagar / diminuir a opacidade / esmaecer) todas as imagens da lista… Para isso usaremos o método .fadeTo() do jQuery.
// Quando passarmos o mouse me cima das imagens
$('ul.lista-imagens li img').hover(function() {
// Escurecemos todas as imagens da lista
$('ul.lista-imagens li img').fadeTo('fast', 0.3);
});
O método .fadeTo() possui dois parâmetros obrigatórios: primeiro a velocidade de transição em milisegundos (onde ‘fast’ significa cerca de 1/3 de segundo) e o segundo parâmetro é a opacidade de destino que vai de 0 até 1.
Com esse efeito, todas as imagens da lista ficarão com 30% de opacidade (70% transparentes). Perceba que escurecemos também a imagem que estamos com o mouse em cima.
… exceto a imagem que estamos com o mouse em cima
Agora precisamos “filtrar” esse efeito de escurecer e fazer com que ele afete todas as imagens exceto a imagem que estamos com o mouse em cima:
// Escurecemos todas as OUTRAS imagens da lista
$('ul.lista-imagens li img').not(this).fadeTo('fast', 0.3);
Perceba que inserimos o .not(this), esse método .not() faz com que, [nesse caso] depois de selecionar todas as imagens da lista, nós excluímos o this que faz referência ao elemento que ativou o efeito.
Se você testar o script que fizemos até agora, perceberá que as imagens estão apagando corretamente, mas não estão acendendo novamente quando tiramos o mouse de uma das imagens.
Ao tirar o mouse de cima da imagem
Precisamos adicionar o segundo parâmetro do .hover(), este segundo parâmetro é executado quando tiramos o mouse do elemento que ativou o efeito.
// Quando passarmos o mouse me cima das imagens
$('ul.lista-imagens li img').hover(function() {
// Escurecemos todas as OUTRAS imagens da lista
$('ul.lista-imagens li img').not(this).fadeTo('fast', 0.3);
}, function() {
// Aqui teremos o código que será executado quando tirarmos o mouse da imagem
});
Todas as imagens se acendem voltando ao estado original
Agora só precisamos inserir o mesmo código que usamos para escurecer as imagens, sem precisar filtar o this, e mudando a opacidade para 1:
// Quando passarmos o mouse me cima das imagens
$('ul.lista-imagens li img').hover(function() {
// Escurecemos todas as OUTRAS imagens da lista
$('ul.lista-imagens li img').not(this).fadeTo('fast', 0.3);
}, function() {
// Todas as imagens se acendem voltando ao estado original
$('ul.lista-imagens li img').fadeTo('fast', 1.0);
});
Com esse código o nosso efeito já está pronto, veja aqui ele funcionando.
Você provavelmente vai notar que o efeito fica “enfileirado”, ou seja, se passarmos o mouse sobre várias imagens rapidamente o efeito vai ficar acontecendo um depois do outro como se o código estivesse agindo sozinho.
Sabendo disso, precisamos fazer todos os efeitos “pararem” antes de começar um novo, isso vai fazer com que, cada vez que passarmos o mouse sobre uma imagem, o efeito seja executado imediatamente e, se houverem outros efeitos na fila, eles sejam sobrepostos… Fazemos isso usando o método .stop() antes do .fadeTo():
// Quando passarmos o mouse me cima das imagens
$('ul.lista-imagens li img').hover(function() {
// Escurecemos todas as OUTRAS imagens da lista
$('ul.lista-imagens li img').not(this).stop().fadeTo('fast', 0.3);
}, function() {
// Todas as imagens se acendem voltando ao estado original
$('ul.lista-imagens li img').stop().fadeTo('fast', 1.0);
});
Agora sim nosso efeito ficou completo e, pasmem, com apenas cinco linhas:
$('ul.lista-imagens li img').hover(function() {
$('ul.lista-imagens li img').not(this).stop().fadeTo('fast', 0.3);
}, function() {
$('ul.lista-imagens li img').stop().fadeTo('fast', 1.0);
});
Este é apenas um pequeno exemplo do poder do jQuery, amanhã irei escrever mais sobre ele, com outros efeitos legais e tão simples quanto esse que você viu aqui. 
Espero que você tenha gostado! Deixe seu comentário com sua dúvida ou elogio. E não deixe de me seguir no Twitter para ficar sabendo dos artigos aqui do blog em tempo real!
Quer ver o passo-a-passo do seu efeito em jQuery?
É simples: Siga-me no Twitter, dê um RT (retweet) com um link para este artigo e descreva o seu efeito em um comentário nesse artigo.
Nossa, muito bom, achei por um acaso em uma pesquisa sobre o curso que estou para fazer, para ver se com curso de Ajax já seria possível eu aprender o Jquery depois de concluir então me deparei com o seu blog e essa explicação perfeita, adorei. Faz um bom tempo do ultimo comentário, mais tenho que deixar o meu aqui. Parabéns!
Muito obrigado!
Opa mais um exelente artigo … é isso ai …
Parabéns… Thiago…
Pingback: Fotos Ilimitas em Formulários com Ajax, Jquery e PHP « refatorar
Pingback: Desmistificando o uso do Ajax « refatorar
Pingback: Desvendando o CAPTCHA « refatorar
Espetacular, ótima explicação!
Parabéns pelo ótimo TUTU mermão, realmente gostei dos detalhes e de acompanhar os exemplos, parabéns mesmo.
Grande Abraço…
égua, show, é dificil encontrar tutoriais assim.
Olá amigo, tudo joia? Otimo tutorial, parabéns!
Só uma duvida, quando passo o mouse varias vezes sobre as imagens e tiro o curso do mouse sobre o mesmo, ele fica piscando sem parar, tem como corrigir este erro? (Navegador: Chrome)
Rapaz… muito bom. Acho que você deveria escrever um livro. Sério! Pense nisto.
Excelente material! Parabéns pelo artigo! Sensacional!
Gostaria de parabenizá-los pelo tutorial jquery e aproveitando o ensejo, gostaria de perguntar como fatiar o mesmo para o wordpress, já que conseguir fazer todo o procedimento, testei ficou do jeito que eu queria, porém naum estou conseguindo fatiál-lo em wordpress, porderia me ajudar?
Crie um plugin e/ou faça as modificações no seu tema para usar a imagem do post.
Valeu Thiago, parabéns pelo post, pois eu estava precisando de uma esclarecida sobre o assunto. Faço ciência da Computação(5 periodo) e passei a acompanhar seu blog. Grande abraço !
Muito bom, simplesmente limpo e objetivo. Sigo seu blog porque capricha nos posts. vlw por compartilhar.
Thiago:
Parabéns pelo artigo! Fantástico.
Posso estar exagerando, mas como iniciante em PHP, JS, jQuery, css, AJAX, etc .., afirmo que peguei o jeito da coisa de primeira.
Minha praia era outra beeeem diferente: Harbour.
Ou seja: minha migração está sendo completa, partindo do zero. Mas com artigos assim fica bem mais fácil.
É muito reconfortante e incentivador encontrar este tipo de “oásis” na inet.
Tudo foi paciente e detalhadamente explicado. Mais moleza que isto, só sopa de minhoca!
Com certeza continuarei te acompanhando.
Forte abraço!
Muito Obrigado.
Muito bom seu artigo, parabéns.
Cara, Parabéns… a melhor didática que já vi sobre o JQUERY. Olha que programo ASP há 10 anos e estou começando a descobri o JQUERY agora…. Qual livro você recomenda para aprender o JQUERY?
Cara, Parabéns… a melhor didática que já vi sobre o JQUERY. Olha que programo ASP há 10 anos e estou começando a descobri o JQUERY agora…. Qual livro você recomenda para aprender o JQUERY?
Cara, Parabéns… a melhor didática que já vi sobre o JQUERY. Olha que programo ASP há 10 anos e estou começando a descobri o JQUERY agora…. Qual livro você recomenda para aprender o JQUERY?
Cara, Parabéns… a melhor didática que já vi sobre o JQUERY. Olha que programo ASP há 10 anos e estou começando a descobri o JQUERY agora…. Qual livro você recomenda para aprender o JQUERY?
Cara, Parabéns… a melhor didática que já vi sobre o JQUERY. Olha que programo ASP há 10 anos e estou começando a descobri o JQUERY agora…. Qual livro você recomenda para aprender o JQUERY?
Cara, Parabéns… a melhor didática que já vi sobre o JQUERY. Olha que programo ASP há 10 anos e estou começando a descobri o JQUERY agora…. Qual livro você recomenda para aprender o JQUERY?
Cara, Parabéns… a melhor didática que já vi sobre o JQUERY. Olha que programo ASP há 10 anos e estou começando a descobri o JQUERY agora…. Qual livro você recomenda para aprender o JQUERY?
Excelente, tu podia fazer com preenchimentos de combos usando jquery e ajax. parabéns
Rapaz, parabéns pelo artigo, simplesmente a melhor didatica que já vi na net. Parabéns, seu metodo de ensino é excepcional.
Leandro.
Muito bom, parabéns!
Bem explicado e bom para começar com jQuery entendendo bem o efeito.
Espero mais tutos de jQuery.
[]‘s
Ótimo artigo, descobri seu blog alguns dias e aprendi muito! Continue assim
Já faz um bom tempo que entro e leio o Blog. Mas acho que este é meu primeiro comentario.
É ótimo, sempre explicando tudo muito bem.
Gostaria de então de pedir um tutorial de como fazer com que a função load() do JQuery (AJAX) tenha uma mensagem de “loading…”
Já li muita coisa por ai, e não consegui…
Grato, antes de tudo.
Simplesmente maravilhoso o blog e o tutorial, material de alto nível.
Parabéns pelo seu trabalho!
A partir de hoje irei acompanhar o seu blog.
Ai fico mt show….
Otimo pra quem esta apredendo jQuery como eu.
Att,.
Putz, há tempos estou tentando entender o jQuery e finalmente uma boa alma dá um sinal. Fora o tutorial que tá show de bola. Bom trabalho. Valeu.
Muito bem Thiago, ótimo tutorial muito bem explicado, agora vou até começar a estudar jquery, eu não entendia como funcionava, mais agora já começou a clarear bem… Obrigado pela ajuda
Kra, muito bom este post… e graças a você eu consegui resolver um problema de conflito com o template
(function($) { })(jQuery);que voce passou! muito obrigado mesmo! salvou a minha vidaBoa iniciativa, Thiago!
Legal esses efeitos e toda essa onda de encadeamento e tal, mas estou apreensivo mesmo é pela parte dos métodos de requisição: $.ajax(), $load(), $get()… Estou acompanhando! Valeu!
Arigo bem direto. Gosto muito do blog por causa disso. Nada de enrolação =)
Parabens Thiago.
Prefiro o jQuery tambem… acho os demais frameworks muito pesados. Sem contar que tem muito plugin de jQuery por ai.