Escolar Documentos
Profissional Documentos
Cultura Documentos
Apostila Jquery
Apostila Jquery
Apostila jQuery
Contedo
1.
2.
3.
4.
5.
6.
7.
8.
Configurao
Ol jQuery
Me encontre: Usando seletores e eventos
Me avalie: Usando AJAX
Me anime: Usando Efeitos
Me ordene: Usando o plugin tablesorter (ordenador de tabela)
Me plugue: Escrevendo seus prprios plugins
Prximos passos
Configurao
Para comear, ns precisamos de uma cpia da biblioteca jQuery. Ainda que a verso mais
recente possa ser encontrada neste link: http://docs.jquery.com/Downloading_jQuery, este
guia fornece um pacote bsico que voc poder baixar.
Kit para comear com o jQuery: Faa o download deste arquivo e extraia o seu contedo. Abra o
starterkit.html e o custom.js com o seu editor preferido e o starterkit.html com o navegador.
*Caso j tenha este arquivo em seu computador no h necessidade de baix-lo.
Agora ns temos tudo o que precisamos para iniciar o notrio exemplo do "Al mundo".
Links interessantes para este captulo:
Ol jQuery
Como quase tudo o que fazemos quando estamos utilizando o jQuery l ou manipula um modelo
de objeto de documento (DOM), precisamos nos certificar que comeamos adicionado eventos
etc to logo o DOM esteja pronto.
Para fazer isso, ns registramos o evento ready (pronto) para o documento.
$(document).ready(function() {
// faa alguma coisa quando o DOM
estiver pronto
});
Colocar um alert nesta funo no faz muito sentido, pois o alert no requer que o DOM esteja
carregado. Ento vamos tentar algo mais sofisticado: Mostrar um alert quando clicarmos o link.
$(document).ready(function()
{
$("a").click(function()
{
alert("Ol
mundo!");
});
});
Dessa forma o alert ser exibido assim que voc clicar no link.
Vamos dar uma olhada no que estamos fazendo: $("a") um seletor do jQuery, neste caso, ele
seleciona todos os elementos a. O $ por si s um alias para a "classe" jQuery, por outro lado o
$() constri um novo objeto jQuery. A funo click() que chamamos depois um mtodo do
objeto jQuery.
Ele liga o evento clique a todos os elementos selecionados (neste caso, um nico elemento a) e
executa a funo fornecida quando o evento ocorre. Isto similar ao seguinte cdigo:
<a href="#" onclick="alert('Ol mundo')">Link</a>
Base do jQuery
Expresses do jQuery
Eventos Bsicos do jQuery
Com estes seletores e eventos voc j pode fazer muita coisa, mas tem muito mais.
$(document).ready(function() {
$
("#listaOrdenada").find("li").each(functi
on(i) {
$(this).html( $(this).html() + "
BAM! " + i );
});
});
O find() permite que voc faa uma pesquisa mais a fundo nos descendentes dos elementos j
selecionados, apesar de $("#listaOrdenada).find("li") ser praticamente o mesmo que $
("#listaOrdenada li"). O each() faz a iterao sobre cada elemento e permite um processamento
mais profundo. A maioria dos mtodos, como o addClass(), utiliza o each() internamente. Neste
exemplo, o html() utilizado para recuperar o texto de cada elemento li, adicionar algum texto a
ele e defin-lo como o texto do elemento.
Uma outra tarefa que voc frequentemente ter que lidar chamar mtodos em elementos DOM
que no so suportados pelo jQuery. Pense em um formulrio que voc gostaria de resetar
depois que enviou com sucesso via AJAX.
$(document).ready(function() {
// use isto para resetar um nico
formulrio
$("#reset").click(function() {
$("#form")[0].reset();
});
});
Este cdigo seleciona o elemento com o ID "form" e chama o reset() no primeiro elemento
selecionado. Caso exista mais de um form, voc pode fazer dessa maneira:
$(document).ready(function() {
// use isto para resetar todos os formulrios
de uma s vez
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});
Isto deve selecionar todos os formulrios no seu documento, fazer a iterao sobre eles e
chamar o reset() para cada um.
Encontre um nome para o seu plugin, vamos chamar o nosso exemplo "foobar".
Crie um arquivo chamado jquery.[nomedoseuplugin].js, ex. jquery.foobar.js
Crie um ou mais mtodos no plugin extendendo o objeto jQuery, ex.:
jQuery.fn.foobar = function() {
// faa alguma coisa
};
Prximos passos
Se voc tem interesse em desenvolver mais em javascript, voc deve dar uma olhada numa
extenso do Firefox chamada FireBug. Ela prov um console (timo para substituir os alerts), um
debugger e outras coisas teis para o seu desenvolvimento dirio em javascript.
Se voc tem problemas que no consegue resolver, idias que gostaria de compartilhar ou
apenas necessidade de expressar sua opinio sobre o jQuery, sinta-se vontade para postar na
lista de discusso do jQuery (www.jquery.com/discuss).