Como funciona o jQuery
Olá galerinha, como tudo na vida, temos que começar do início. Traduzi (não ao pé da letra) o post do John que está no site do jQuery, esse post é um post introdutório, ele serve para pessoas que já conhecem de JavaScript mas não conhecem o jQuery.
jQuery: O básico
Esse tutorial básico irá lhe ajudar a começar com jQuery. Podemos começar criando uma página de teste, isso você já deve saber, ela será uma página HTML qualquer. (Se você não sabe o que é uma página HTML, você deve parar aqui e mudar de área =D).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<a href="http://jquerybrasil.org/">jQuery Brasil!!!</a>
<script src="jquery.js"></script>
<script>
</script>
</body>
</html>
Altere o atributo src na tag <script> para apontar para o local onde está o seu arquivo jquery.js.
EX: Considerando que seu html está na raiz do diretório. Se seu arquivo estiver dentro de uma pasta chamada js, você deve colocar src="js/jquery.js".
Você pode saber mais sobre como baixar e colocar em seu site o jQuery, na nossa área de downloads.
Codando no Document Ready
Antes do jQuery os desenvolvedores colocavam seus códigos dessa forma:
window.onload = function(){
alert("olá");
}
Isso executaria um alert com a mensagem “olá” logo após a página ser carregada. O problema está em ter que esperar carregar todas as coisas da página, incluindo as imagens, para poder aparecer um simples alert na tela.
A razão de se usar o window.onload está em. que o document do HTML não está completamente carregado, dessa forma podendo causar vários erros no JavaScript.
Para resolver esse problema, o jQuery tem um método chamado Ready (controla o evento ready) que verifica quando o DOM está pronto para ser usado sem que seus elementos precisem ser carregado por completo.
$(document).ready(function(){
// Seu codigo vai aqui!!
});
Dentro do evento ready podemos colocar um handler para o evento click em um link (tag HTML a)
$(document).ready(function(){
$("a").click(function(event){
alert("Obrigado por visitar!");
});
});
Salve o HTML e recarregue a página no seu navegador.
Seu HTML deve estar próximo a isso:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<a href="http://jquerybrasil.org/">jQuery Brasil</a>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("a").click(function(event){
alert("Obrigado por visitar!");
});
});
</script>
</body>
</html>
Demo
Perceberam que ao clicar no link ele da o alert mas, logo redireciona? Para prevenir que isso ocorra, não só para click, mas para a maioria dos eventos você consegue modificar seu comportamento padrão. Aqui iremos prevenir que ele siga o link. Para isso adicionamos o event.preventDefault(); no código.
$(document).ready(function(){
$("a").click(function(event){
alert("Como você pode ver, o link não te leva a outra página");
event.preventDefault();
});
});
Demo
Adicionando e removendo classes HTML (HTML class)
Uma tarefa comum é adicionar e remover class de elementos no html.
Primeiramente precisamos ter as class em nosso CSS.
<style>
a.test { font-weight: bold; }
</style>
Após precisamos ter uma chamada da função addClass no nosso script
$("a").addClass("test");
Após a execução desse script, que deve ser colocado dentro do nosso ready() conforme falado anteriormente, todos os <a> da página irão ficar em negrito.
Seu html deve ser algo próximo a isso:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
a.test { font-weight: bold; }
</style>
</head>
<body>
<a href="http://jquerybrasil.org/">jQuery Brasil!!!</a>
<br />
<br />
<a href="http://jquery.com/">Site do jQuery</a>
<br />
<br />
<a href="http://ruancarlos.com.br/">Site do Ruan</a>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("a").addClass("test");
});
</script>
</body>
</html>
Demo
Vamos modificar um pouco esse script.
Vamos adicionar dois botões, cada um terá um comportamento diferente, um irá colocar a class nos links e o outro irá retirar.
Para isso vamos adicionar no nosso html os botões:
<button id="btn-adiciona">Adiciona class</button> <br /> <button id="btn-remove">Remove class</button>
E no javascript as funções de click deles.
$("#btn-adiciona").click(function(){
$("a").addClass("test");
})
$("#btn-remove").click(function(){
$("a").removeClass("test");
})
Ficando com sua página dessa forma:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
a.test { font-weight: bold; }
</style>
</head>
<body>
<a href="http://jquerybrasil.org/">jQuery Brasil!!!</a>
<br />
<br />
<a href="http://jquery.com/">Site do jQuery</a>
<br />
<br />
<a href="http://ruancarlos.com.br/">Site do Ruan</a>
<br />
<br />
<button id="btn-adiciona">Adiciona class</button><br />
<button id="btn-remove">Remove class</button>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#btn-adiciona").click(function(){
$("a").addClass("test");
})
$("#btn-remove").click(function(){
$("a").removeClass("test");
})
});
</script>
</body>
</html>
Demo
Eventos especiais
Aproveitando que estamos falando sobre manipulação, vamos falar um pouco sobre eventos. jQuery nos prove de vários métodos para efeitos.
Podemos utilizar nosso HTML e script do exemplo anterior para darmos uma incrementada. Vamos colocar um efeito a mais quando o usuário clica nos botões.
Alteramos a função do botão de adicionar para:
$("#btn-adiciona").click(function(){
//pegamos todos os elementos < a > e colocamos em uma variável
$a = $("a");
//isso e igual a $("a").addClass("test");
$a.addClass("test");
//escondemos todos os elementos (< a >)
$a.fadeOut();
//mostramos todos os elementos (< a >)
$a.fadeIn();
})
Com isso devemos ter um efeito de deixar os links em negrito adicionando a class “test” $a.addClass("test");, efeito de fazer sumir os links com o $a.fadeOut(); e de aparecer com $a.fadeIn();.
Demo
Callback
Yesss, jQuery tem callback, mas o que é um callback?
Callback são funções (vamos chamar de func2) que são passadas como argumentos de outra função (vamos chamar de func1) e são executas logo após essas funções (func1) serem executadas.
O importante nesse ponto é saber como a sintaxe do jQuery funciona.
Callback sem argumentos
Para uma função de callback que não recebe nenhum argumento:
$.get('pagina.html', minhaCallback);
Nota: O segundo parâmentro nessa função é simplesmente o nome (sem ser uma string e sem parentêses) da função de callback.
Callback com argumentos
Callback com argumentos tem uma forma diferente, se tentar da forma normal não irá funcionar:
Não funciona assim:
$.get('pagina.html', minhaCallback(parametro1, parametro2));
Ele não funciona dessa forma por que minhaCallback(parametro1, parametro2) é executado logo quando o interpretador do JavaScript chegar a essa linha no seu código, dessa forma apenas colocando o retorno dela como segundo argumento do $.get
Forma certa
$.get('pagina.html', function(){
minhaCallback(param1, param2);
});
Dessa forma apenas criamos uma função anônima (apenas um bloco de declarações) e isso é registrado como uma função de callback. Nesse caso nossa função anônima faz apenas uma coisa, chamar a função minhaCallback passando seus argumentos, mas nós poderíamos declarar qualquer código JavaScript nela.
iniciante, jquery
O melhor conteúdo de jquery que encontrei na internet!! Obrigado!