A - Jquery

MasterTraining
www.mastertraining.com.br

JQUERY

O bsico de jQuery
MasterTraining - jQuery Pgina 2

Sumrio
1. jQuery bsico ....................................................................................................... 7
$(document).ready() ............................................................................................ 7
Selecionando elementos ..................................................................................... 8
Minha seleo contm algum elemento?......................................................... 11
Salvando selees .............................................................................................. 11
Refinando & Filtrando Selees ......................................................................... 12
Seletores relacionados formulrios................................................................ 12
Trabalhando com selees ................................................................................ 13
Encadeamento ................................................................................................... 13
Getters & Setters ............................................................................................... 15
CSS, Styling, & Dimenses ................................................................................. 15
Usando classes do CSS para estilos ................................................................... 16
Dimenses .......................................................................................................... 17
Atributos ............................................................................................................ 17
Travessia............................................................................................................. 18
Manipulando elementos ................................................................................... 19
Obtendo e setando informaes sobre elementos .......................................... 19
Movendo, copiando e removendo elementos. ................................................ 20
Clonando elementos ......................................................................................... 21
Removendo elementos ..................................................................................... 22
Criando novos elementos .................................................................................. 22
Manipulando atributos ...................................................................................... 24
2. Ncleo do jQuery ............................................................................................... 25
$ vs $() ................................................................................................................ 25
O bsico de jQuery

Mtodos Utilitrios ............................................................................................ 25
Verificando tipos ................................................................................................ 28
Mtodos de Dados ............................................................................................ 28
Deteco de Navegador & Funcionalidades ..................................................... 29
Evitando Conflitos com Outras Bibliotecas ....................................................... 30
3. Eventos ............................................................................................................... 31
Introduo .......................................................................................................... 31
Conectando Eventos a Elementos ..................................................................... 31
Conectando Eventos para Executar Apenas uma vez ...................................... 32
Desconectando Eventos .................................................................................... 33
Usando Namespaces com Eventos ................................................................... 33
Por Dentro da Funo Manipuladora de Evento .............................................. 34
Disparando Eventos ........................................................................................... 35
Aumentando a Performance com Delegao de Evento ................................. 36
Desvinculando Eventos Delegados ................................................................... 37
Auxiliares de Eventos ......................................................................................... 37
4. Efeitos ................................................................................................................ 39
Viso Geral ......................................................................................................... 39
Efeitos Embutidos .............................................................................................. 39
Mudando a Durao de Efeitos Embutidos ...................................................... 40
Fazendo algo quando um Efeito tiver Terminado ............................................ 41
Efeitos customizados com $.fn.animate ................................................... 42
Easing ................................................................................................................. 42
Controlando efeitos ........................................................................................... 43
5. Ajax ..................................................................................................................... 44
Introduo .......................................................................................................... 44
Conceitos Chave ................................................................................................ 44
GET vs. POST ...................................................................................................... 44
O bsico de jQuery

Tipos de dados ................................................................................................... 45
A de assncrono ............................................................................................... 46
Regra da mesma origem e JSONP ..................................................................... 46
Ajax e o Firebug ................................................................................................. 47
Mtodos do jQuery relacionados ao Ajax......................................................... 47
$.ajax .................................................................................................................. 47
Opes do $.ajax .......................................................................................... 49
Mtodos de convenincia ................................................................................. 51
Ajax e formulrios .............................................................................................. 53
Exemplo 5.3. Transformando os dados de um formulrio em uma
string de requisio ....................................................................................... 53
Exemplo 5.4. Criando um array de objetos contendo dados do formulrio. 54
Trabalhando com JSONP ................................................................................... 54
Exemplo 5.5. Usando YQL e JSONP ................................................................ 54
Eventos do Ajax ................................................................................................. 55
Exemplo 5.6. Configurando um indicador de carregamento usando eventos do
Ajax ................................................................................................................. 55
6. Plugins ................................................................................................................ 56
O que exatamente um plugin? ....................................................................... 56
Como criar um plugin bsico ............................................................................. 56
Procurando & Avaliando Plugins ....................................................................... 59
Escrevendo Plugins ............................................................................................ 60
Exemplo 6.1. Criando um plugin para adicionar e remover uma classe no
hover .............................................................................................................. 60
Exemplo 6.2. O Padro de Desenvolvimento de Plugins do Mike Alsup ....... 61
Escrevendo plugins com estado com a fbrica de widgets do jQuery UI ........ 63
Exemplo 6.1. Um plugin simples, stateful utilizando a fbrica de Widgets do
jQuery UI. ........................................................................................................... 64
Exemplo 6.2. Passando opes para um widget ............................................ 65
O bsico de jQuery

Exemplo 6.3. Setando opes default para um widget ................................. 65
Adicionando mtodos a um Widget ................................................................. 66
Exemplo 6.4. Criando mtodos widget .......................................................... 67
Exemplo 6.5. Chamando mtodos numa instncia do plugin ........................ 69
Trabalhando com Opes de Widget ................................................................ 69
Exemplo 6.6. Respondendo quando a opo setada .................................. 70
Adicionando Callbacks ....................................................................................... 71
Exemplo 6.9. Provendo callbacks para estenso do usurio ......................... 71
Exemplo 6.8. Vinculando eventos do widget .............................................. 73
Limpando ........................................................................................................... 73
Exemplo 6.9. Adicionando um mtodo destroy um widget ........................ 73
7. Melhores prticas para performance ............................................................... 76
Armazene o length em loops ............................................................................ 76
Adicione novo contedo fora de um loop ........................................................ 76
Mantenha as coisas DRY.................................................................................... 77
Cuidado com funes annimas ....................................................................... 78
Otimize seletores ............................................................................................... 78
Seletores baseados em ID ................................................................................. 79
Especificidade .................................................................................................... 79
Evite o seletor universal .................................................................................... 80
Use Delegao de Evento .................................................................................. 80
Desanexe elementos para trabalhar com eles ................................................. 81
Use folhas de estilo para mudar o CSS em vrios elementos .......................... 81
Use $.data ao invs de $.fn.data .................................................................... 82
No faa nada quando no tiver elementos..................................................... 82
Definio de Varivel ......................................................................................... 83
Condicionais ....................................................................................................... 83
8. Organizao de cdigo ...................................................................................... 84
O bsico de jQuery

Viso Geral ......................................................................................................... 84
Conceitos Chave ................................................................................................ 84
Encapsulamento ................................................................................................ 85
O literal objeto ................................................................................................... 85
Exemplo 8.1. Um literal objeto ...................................................................... 86
O Module Pattern .............................................................................................. 87
Exemplo 8.1. O module pattern ..................................................................... 87
Gerenciando dependncias ............................................................................... 89
Obtendo o RequireJS ......................................................................................... 89
Utilizando o RequireJS com jQuery ................................................................... 90
Exemplo 8.3. Utilizando o RequireJS: Um exemplo simples .......................... 90
Criando mdulos reusveis com RequireJS ...................................................... 91
Exemplo 8.5. Definindo um mdulo do RequireJS que no tem dependncias
........................................................................................................................ 92
Exemplo 8.6. Definindo um mdulo do RequireJS com dependncias ......... 92
Exemplo 8.9. Definindo um mdulo do RequireJS que retorna uma funo 93
Otimizando seu cdigo: A ferramenta de build do RequireJS .......................... 93
Exemplo 8.8. Um arquivo de configurao de build do RequireJS ................ 94
9. Eventos Customizados ....................................................................................... 95
Introduo Eventos Customizados ................................................................. 95

O bsico de jQuery

1. jQuery bsico

$(document).ready()

Voc no pode manipular a pgina com segurana at o
documento estar "pronto" (ready). O jQuery detecta o estado
de prontido para voc; o cdigo incluido dentro de
$(document).ready() somente ir rodar depois que a
pgina estiver pronta executar o cdigo JavaScript.

Exemplo 1.1. Um bloco $(document).ready()

$(document).ready(function() {
console.log('pronto!');
}
)
;

H um atalho para $(document).ready() que
voc ver algumas vezes; entretando, eu no recomendo
us-lo se voc estiver escrevendo cdigo que pessoas que
no tm experincia com jQuery poder ver.

Exemplo 1.2. Atalho para $(document).ready()

$(function() {
});

Voc ainda pode passar uma funo nomeada para
$(document).ready() ao invs de passar uma funo
annima.

Exemplo 1.1. Passando uma funo nomeada ao invs de uma
annima

function readyFn() {
// cdigo para executar quando o documento
estiver pronto
}

O bsico de jQuery

$(document).ready(readyFn);

Selecionando elementos

O conceito mais bsico do jQuery "selecionar alguns
elementos e fazer alguma coisa com eles." O jQuery
suporta a maioria dos seletores CSS3, assim como alguns
seletores no-padro. Para uma referncia completa de
seletores, visite http://api.jquery.com/category/selectors/.

A seguir, alguns exemplos de tcnicas comuns de seleo.

Exemplo 1.2. Selecionando elementos por ID

$('#myId'); // lembre-se que os
IDs devem ser nicos por pgina

Exemplo 1.3. Selecionando elementos pelo nome da classe

$('div.myClass');
// h um aumento de performance se voc especificar
o tipo de el

Exemplo 1.4. Selecionando elementos por atributo

$('input[name=first_name]'); // cuidado, isto pode
ser muito lento

Exemplo 1.5. Selecionando elementos atravs da composio
de seletores CSS

$('#contents ul.people li');

Exemplo 1.6. Pseudo-seletores

$('a.external:first');
$('tr:odd');
$('#myForm :input'); // selecione todos os
elementos input num formulrio
O bsico de jQuery

$('div:visible');
$('div:gt(2)'); // todos exceto as trs
primeiras divs
$('div:animated'); // todas as divs com animao

Quando voc usa os pseudos-seletores :visible e :hidden, o jQuery
testa a visibilidade atual do elemento, no os atributos visibility ou
display do CSS - ou seja, ele olha se a altura e a largura fsica do
elemento na pgina so ambas maiores que zero. No entanto, este teste no
funciona com elementos <tr>; neste caso, o jQuery faz a verificao da
propriedade display do CSS, e considera um elemento como oculto se sua
propriedade display for none. Elementos que no forem adicionados no
DOM sero sempre considerados ocultos, mesmo que o CSS que os afetam
torn-los visveis. (Consulte a seo de Manipulao mais adiante neste
captulo para aprender como criar e adicionar elementos ao DOM).

Para referncia, aqui est o cdigo que jQuery usa para determinar se um
elemento visvel ou oculto, com os comentrios adicionados para maior
esclarecimento:

jQuery.expr.filters.hid
den = function( elem )
{
var width = elem.offsetWidth,
height = elem.offsetHeight,
skip =
elem.nodeName.toLowerCase()
=== "tr";

// o elemento tem 0 de altura e 0 de
largura e no uma <tr>?
return width === 0 && height === 0 && !skip
?

// ento deve estar escondido true :

// mas se o elemento tiver largura e
altura e no for uma <tr>
width > 0 && height > 0 && !skip ?

// ento deve estar visvel false :

// se chamos aqui, o elemento tem largura
O bsico de jQuery

// e altura, mas tambm uma <tr>,
// ento verifica a propriedade display para
// decidir se ele esta escondido
jQuery.curCSS(elem, "display") === "none";
};

jQuery.expr.filters.visible = function( elem )
{
return !jQuery.expr.filters.hidden( elem );
};

Escolhendo seletores

Escolher bons seletores uma forma de melhorar a performance do
seu JavaScript. Uma pequena especificidade - por exemplo, incluir
um elemento como div quando selecionar elementos pelo nome da
classe - pode ir por um longo caminho. Geralmente, sempre que voc
puder dar ao jQuery alguma dica sobre onde ele pode esperar
encontrar o que voc estiver procurando, voc deve dar. Por outro
lado, muita especificidade pode no ser muito bom. Um seletor como
#myTable thead tr th.special um desperdcio se um
seletor como #myTable th.special lhe dar o que voc
precisa.

O jQuery oferece muitos seletores baseados em atributo, permitindo
que voc selecione elementos baseados no contedo de atributos
arbitrrios usando expresses regulares simplificadas.

// encontre todos elementos
<a>s em que o atributo
// rel termine com "thinger"
$("a[rel$='thinger']");

Se por um lado estes seletores podem ser bem teis, eles tambm
podem ser extremamente lerdos
- Uma vez eu escrevi um seletor baseado em atributos que travou
minha pgina por mltiplos segundos. Sempre que possvel, faa suas
selees usando IDs, nomes de classe e nomes de tags.,

O bsico de jQuery

Minha seleo contm algum elemento?

Uma vez que voc fez uma seleo, voc ir querer saber se h algo para
trabalhar com ela. Voc talvez se sinta tentado a fazer algo assim:

if ($('div.foo')) { ... }

Isso no ir funcionar. Quando voc faz uma seleo usando $(), um objeto
sempre retornado, e objetos sempre so tratados como true. Mesmo se sua
seleo no tiver nenhum elemento, o cdigo dentro do if vai executar do
mesmo jeito.

Ao invs disso, voc precisa testar a propriedade length da seleo, que diz a
voc quantos elementos foram selecionados. Se a resposta for 0, a
propriedade length ser interpretada como falso quando usada como um
valor booleano.

Exemplo 1.9. Testando se uma seleo contm elementos.

if ($('div.foo').length) {
... }

Salvando selees

Toda vez que voc faz uma seleo, um monte de cdigo executado, e o
jQuery no faz caching de selees para voc. Se voc fez uma seleo que
voc talvez precise fazer novamente, voc deve salvar a seleo numa
varivel ao invs de fazer a seleo vrias vezes.

Exemplo 1.8. Armazenando selees em variveis

var $divs = $('div');

No Exemplo 1.10, Armazenando selees em
variveis, o nome da varivel comea com um
sinal de dlar. Ao invs de outras linguagens, no
h nada especial sobre o sinal de dlar em
JavaScript -- apenas outro caracter. Ns o
usamos para indicar que a varavel contm um
objeto jQuery. Esta prtica -- um tipo de Notao
Hngara [http://en.wikipedia.org/wiki/
O bsico de jQuery

Hungarian_notation] -- meramente uma
conveno, e no obrigatria.

Uma vez que voc armazenou sua seleo, voc pode
chamar os mtodos do jQuery na varivel que voc
armazenou, da mesma forma que voc faria na seleo
original.

Uma seleo somente obtm os elementos que
esto na pgina quando voc faz a seleo. Se voc
adicionar elementos na pgina depois, voc ter que
repetir a seleo ou ento adicion-la seleo
armazenada na varivel. Selees armazenadas no
atualizam automaticamente quando o DOM muda.
Refinando & Filtrando Selees

Algumas vezes voc tem uma seleo que contm mais do
que voc quer; neste caso, voc talvez queira refinar sua
seleo. O jQuery oferece vrios mtodos para voc obter
exatamente o que precisa.
Exemplo 1.9. Refinando selees

$('div.foo').has('p'); // o elemento div.foo
que contm <p>'s
$('h1').not('.bar'); // elementos h1 que no
tm a classe bar
$('ul li').filter('.current'); // itens de listas no-
ordenadas com a classe curr
$('ul li').first(); // somente o primeiro
item da lista no ordenada
$('ul li').eq(5); // o sexto item da lista

Seletores relacionados formulrios

O jQuery oferece vrios pseudo-seletores que lhe ajudam a
encontrar elementos nos seus formulrios; estes so
especialmente teis porque pode ser difcil distinguir entre
elementos form baseados no seu estado ou tipo usando
seletores CSS padro.

:button Seleciona elementos do tipo <button> e elementos com
type="button"
:checkbox Seleciona inputs com type="checkbox"
:checked Seleciona inputs selecionados
O bsico de jQuery

:disabled Seleciona elementos de formulrio desabilitados
:enabled Seleciona elementos de formulrio habilitados
:file Seleciona inputs com type="file"
:image Seleciona inputs com type="image"

:input Seleciona <input>, <textarea>, e elementos
<select>
:password Selecionam inputs com type="password"
:radio Selecionam inputs com type="radio"
:reset Selecionam inputs com type="reset"
:selected Seleciona inputs que esto selecionados
:submit Seleciona inputs com type="submit"
:text Seleciona inputs com type="text"

Exemplo 1.12. Usando pseudo-seletores relacionados
formulrios

$("#myForm :input'); // obtm todos os
elementos que aceitam entrada de dados

Trabalhando com selees

Uma vez que voc tem uma seleo, voc pode chamar mtodos
nela. Mtodos geralmente vm em duas formas diferentes: getters
e setters. Getters retornam uma propriedade do primeiro elemento
selecionado; setters ajustam (setam) uma propriedade em todos os
elementos selecionados

Encadeamento

Se voc chamar um mtodo numa seleo e este mtodo retornar
um objeto jQuery, voc pode continuar a chamar mtodos do
jQuery sem precisar pausar com um ponto-e-vrgula.

Exemplo 1.9. Encadeamento

$('#content').find('h3').eq(2).html('o
novo texto do terceiro h3!');

O bsico de jQuery

Se voc estiver escrevendo uma cadeia que inclui vrios passos,
voc (e a pessoa que vir depois de voc)
talvez ache seu cdigo mais legvel se
voc quebrar o cdigo em vrias linhas.

Exemplo 1.12. Formatando cdigo encadeado

$('#conte
nt')
.find('h3')
.eq(2)
.html('novo texto do terceiro h3!');

Se voc mudar sua seleo no meio de uma cadeia, o jQuery prov
o mtodo $.fn.end para voc voltar para sua seleo original.

Exemplo 1.13. Restaurando sua seleo original usando
$.fn.end

$('#content')
.find('h3')
.eq(2)
.html('new text for the third h3!')
.end() // restaura a seleo para todos h3 em
#context
.eq(0)
.html('novo texto para o primeiro h3!');
O bsico de jQuery

Encadeamento um recurso extraordinariamente poderoso, e
muitas bibliotecas adotaram-no desde que o jQuery o tornou
popular. Entretando, deve ser usado com cuidado. Encadeamentos
extensos podem deixar o cdigo extremamente difcil de debugar ou
modificar. No h uma regra que diz o quo grande uma cadeia
deve ser -- mas saiba que fcil fazer baguna

Getters & Setters

O jQuery sobrecarrega seus mtodos, ento o mtodo usado para setar um
valor geralmente tem o mesmo nome do mtodo usado para obter um valor.
[Definition: Quando um mtodo usado para setar um valor, ele chamado
de setter]. [Definition: Quando um mtodo usado para pegar (ou ler) um
valor, ele chamado de getter]. Os setters afetam todos os elementos na
seleo; getters obtm o valor requisitado somente do primeiro elemento na
seleo.

Exemplo 1.14. O mtodo $.fn.html usado como setter

$('h1').html('ol mundo');

Exemplo 1.15. O mtodo html usado como getter

$('h1').html();

Os setters retornam um objeto jQuery, permitindo que voc continue
chamando mtodos jQuery na sua seleo; getters retornam o que eles
foram pedidos para retornar, o que significa que voc no pode continuar
chamando mtodos jQuery no valor retornado pelo getter.

CSS, Styling, & Dimenses

O jQuery possui uma forma bem prtica para pegar e setar
propriedades CSS dos elementos.

Propriedades CSS que normalmente incluem um hfen,
precisam ser acessadas no estilo camel case em JavaScript. Por
exemplo, a propriedade CSS font-size expressada como
fontSize em JavaScript.

O bsico de jQuery

Exemplo 1.16. Pegando propriedades CSS

$('h1').css('fontSize'); // retorna uma
string, como "19px"

Exemplo 1.19. Setando propriedades CSS

$('h1').css('fontSize', '100px'); //
setando uma propriedade individual
$('h1').css({ 'fontSize' : '100px', 'color' : 'red' });
// setando mltiplas propr

Note o estilo do argumento que usamos na segunda linha --
um objeto que contm mltiplas propriedades. Este um
jeito comum de passar mltiplos argumentos para uma
funo, e muitos setters do jQuery aceitam objetos para setar
mltiplos valores de uma s vez.

Usando classes do CSS para estilos

Como um getter, o mtodo $.fn.css til; Entretanto, ele
geralmente deve ser evitado como um setter em cdigo de
produo, pois voc no quer informao de apresentao no
seu JavaScript. Ao invs disso,escreva regras CSS para classes
que descrevam os vrios estados visuais, e ento mude a classe
no elemento que voc quer afetar.

Exemplo 1.20. Trabalhando com classes

var $h1 = $('h1');

$h1.addClass('big');
$h1.removeClass('big');
$h1.toggleClass('big');

if ($h1.hasClass('big')) { ... }

Classes tambm podem ser teis para armazenar informaes
de estado de um elemento, como indicar se um elemento est
selecionado, por exemplo.

O bsico de jQuery

Dimenses

O jQuery oferece uma variedade de mtodos para obter e
modificar informaes sobre dimenses e posies de um
elemento.

O cdigo do Exemplo 1.21, Mtodos bsicos de dimenses
somente uma introduo muito curta sobre as
funcionalidades de dimenses do jQuery; para detalhes
completos sobre os mtodos de dimenso do jQuery, visite
http://api.jquery.com/category/dimensions/.

Exemplo 1.21. Mtodos bsicos de dimenses

$('h1').width('50px'); // seta a largura de todos os elementos h1
$('h1').width(); // obtm a largura do primeiro h1

$('h1').height('50px');

// seta a altura de todos os elementos h1
$('h1').height(); // obtm a altura do primeiro h1

$('h1').position();

// retorna um objeto contendo informaes

// sobre a posio do primeiro h1 relativo

// a seu pai
Atributos

Atributos de elementos podem conter informaes teis para
sua aplicao, ento importante saber como set-los e obt-
los.

O mtodo $.fn.attr atua como getter e setter . Assim
como os mtodos $.fn.css , $.fn.attr atuando como
um setter, podem aceitar tanto uma chave e um valor ou um
objeto contendo um ou mais pares chave/valor.

Exemplo 1.22. Setting attributes

$('a').attr('href',
'todosMeusHrefsSaoOMesmoAgora.html');
$('a').attr({
'title' : 'todos os ttulos so os mesmos
tambm!',
'href' : 'algoNovo.html'
});
O bsico de jQuery

Agora, ns quebramos o objeto em mltiplas linhas. Lembre-
se, espaos no importam em JavaScript, ento voc deve se
sentir livre para usa-lo do jeito que quiser para fazer seu
cdigo ficar mais legvel! Depois, voc pode usar uma
ferramenta de minificao para remover espaos
desnecessrios para seu cdigo de produo.

Exemplo 1.21. Getting attributes

$('a').attr('href'); // retorna o href
do primeiro elemento <a> do documento

Travessia

Uma vez que voc tem uma seleo do jQuery, voc pode
encontrar outros elementos usando sua seleo como ponto
de incio.

Nota

Seja cuidadoso com travessias de longas distncias nos seus documentos
-- travessias complexas torna imperativo que a estrutura do seu
documento permanea a mesma, uma dificuldade estabilidade, mesmo
se voc for o responsvel por criar toda a aplicao desde o servidor
at o cliente. Travessias de um ou dois passos so legais, mas geralmente
voc ir querer evitar travessias que levem voc de um container para
outro.

Exemplo 1.22. Movendo pelo DOM usando mtodos de travessia.

$('h1').next('p');
$('div:visible').parent();
$('input[name=first_name]').closest('form');
$('#myList').children();
$('li.selected').siblings();

Voc tambm pode iterar sobre uma seleo usando $.fn.each. Este mtodo
itera sobre todos os elementos numa seleo e executar uma funo para cada um.
A funo recebe como argumento um ndice com o elemento atual e com o prprio
elemento DOM. Dentro da funo, o elemento DOM tambm est disponvel
como this por padro.
O bsico de jQuery

Exemplo 1.23. Iterando sobre uma seleo

$('#myList
li').each(function(idx,
el) {
console.log(
'O elemento ' + idx +
'tem o seguinte html: ' +
$(el).html()
); });

Manipulando elementos

Uma vez que voc fez uma seleo, a diverso comea.
Voc pode mudar, mover, remover e clonar elementos.
Voc ainda pode criar novos elementos atravs de uma
sintaxe simples

Para uma referncia completa dos mtodos de manipulao do jQuery, visite
http://api.jquery.com/
category/manipulation/.

Obtendo e setando informaes sobre elementos

H um certo nmero de formas que voc pode mudar um elemento existente. Dentre as tarefas
mais comuns que voc ir fazer mudar o inner HTML ou o atributo de um elemento. O
jQuery oferece mtodos simples e cross-navegador para estes tipos de manipulao. Voc
ainda pode obter informaes sobre elementos usando muitos dos mesmos mtodos nas suas
formas de getter. Ns veremos exemplos destes mtodos durante esta seo, mas
especificamente, aqui vo alguns poucos mtodos que voc pode usar para obter e setar
informao sobre elementos.

Mudar coisas em elementos trivial, mas lembre-se que a mudana ir afetar todos os
elementos na seleo, ento se voc quiser mudar um elemento, esteja certo de
especific-lo em sua seleo antes de chamar o mtodo setter

Quando os mtodos atuam como getters, eles geralmente s trabalham no primeiro
elemento da seleo e eles no retornam um objeto jQuery, portanto voc no pode
encadear mtodos adicionais a eles. Uma exceo notvel $.fn.text; como
mencionado acima, ele obtm o texto para todos os elementos da seleo
O bsico de jQuery

$.fn.html Obtm ou seta o
contedo html.

$.fn.text Obtm ou seta os contedos de texto; HTML
ser removido.

$.fn.attr Obtm ou seta o valor do
atributo fornecido.

$.fn.width Obtm ou seta a largura em pixels do primeiro elemento na seleo
como um inteiro.

$.fn.height Obtm ou seta a altura em pixels do primeiro
elemento na seleo.

$.fn.position Obtm um objeto com a informao de posio do primeiro
elemento na seleo, relativo a seu primeiro ancestral (pai). Este
somente um getter.

$.fn.val Obtm ou seta o valor de elementos de
formulrios.

Exemplo 1.24. Mudando o HTML de um elemento.

$('#myDiv p:first')
.html('Primeiro pargrafo <strong>novo</strong>!');

Movendo, copiando e removendo elementos.

H uma variedade de formas de mover elementos pelo DOM; geralmente, h duas
abordagens:

Coloque o(s) elemento(s) selecionado(s) relativo outro elemento

Coloque um elemento relativo ao(s) elemento(s) selecionado(s)

Por exemplo, o jQuery fornece $.fn.insertAfter e $.fn.after.
O mtodo
$.fn.insertAfter coloca o(s) elemento(s) selecionado(s) depois do elemento que voc
passou como
O bsico de jQuery

argumento; o mtodo $.fn.after coloca o elemento passado como argumento depois
do elemento

selecionado.Vrios outros mtodos seguem este padro: $.fn.insertBefore e
$.fn.before;
$.fn.appendTo e $.fn.append; e $.fn.prependTo e $.fn.prepend.

O mtodo que faz mais sentido pra voc depender de quais elementos voc j
selecionou e quais voc precisar armazenar uma referncia para os elementos que voc
est adicionando na pgina. Se voc precisar armazenar uma referncia, voc sempre ir
querer fazer pela primeira forma -- colocando os elementos selecionados relativos outro
elemento -- de forma que ele retorne o(s) elemento(s) que voc est colocando. Neste
caso, os mtodos $.fn.insertAfter, $.fn.insertBefore,
$.fn.appendTo, e $.fn.prependTo sero suas ferramentas para escolha.

Exemplo 1.25. Movendo elementos usando outras formas

// faz o primeiro item da lista se tornar o
ltimo var $li = $('#myList
li:first').appendTo('#myList');

// outra forma de resolver o mesmo
problema
$('#myList').append($('#myList li:first'));

// perceba que no tem como acessar o item
// da lista que movemos, pois ele retorna
// a prpria lista

Clonando elementos

Quando voc usa mtodos como $.fn.appendTo, voc est
movendo o elemento; porm, algumas vezes voc ir querer
fazer uma cpia do elemento. Neste caso, voc precisar usar
$.fn.clone primeiro.

Exemplo 1.26. Fazendo uma cpia de um elemento

// copia o primeiro item da lista
para o fim
$('#myList
li:first').clone().appendTo('#myList');

O bsico de jQuery

Se voc precisa copiar dados e eventos relacionados, esteja certo de passar true
como um argumento para $.fn.clone.

Removendo elementos

H duas formas de remover elementos da pgina: $.fn.remove e $.fn.detach.
Voc ir usar
$.fn.remove quando voc quiser remover a seleo permanentemente da pgina;
enquanto o mtodo retorna os elementos removidos, estes elementos no tero seus eventos
e dados associados a ele se voc retorna-los pgina.

Se voc precisa que os dados e eventos persistam, voc ir usar $.fn.detach . Da
mesma forma que
$.fn.remove, ele retorna uma seleo, mas tambm mantm os dados e os eventos
associados com a
seleo para que voc possa restaurar a seleo para a
pgina no futuro.

O mtodo $.fn.detach extremamente til se voc estiver fazendo uma manipulao
pesada um elemento. Neste caso, bom aplicar um $.fn.detach no elemento da
pgina, trabalhar no seu prprio cdigo, e ento restaura-lo pgina quando voc
terminar. Isto evita que voc faa "toques ao DOM" caros enquanto mantm os dados e
eventos do elemento.

Se voc quer deixar um elemento na pgina mas simplesmente quer remover seu contedo,
voc pode usar
$.fn.empty para retirar o innerHTML do elemento.

Criando novos elementos

O jQuery oferece uma forma elegante e trivial para criar novos elementos usando o mesmo
mtodo $()
que voc usava para selees.

Exemplo 1.29. Criando novos elementos

$('<p>Este um novo pargrafo</p>');
$('<li class="new">novo item de lista</li>');

O bsico de jQuery

Exemplo 1.30. Criando um novo elemento com um objeto atributo

$('<a/>', {
html : 'Este um link
<strong>new</strong>',
'class' : 'new', href : 'foo.html'
});

Perceba que no objeto de atributos ns incluimos como segundo argumento
a propriedade class entre aspas, enquanto as propriedades html e href no.
Geralmente, nomes de propriedades no precisam estar entre aspas a no
ser que elas sejam palavras reservadas (como a class neste caso)

Quando voc cria um novo elemento, ele no adicionado imediatamente
pgina. H vrias formas de adicionar um elemento pgina uma vez que
ele esteja criado.

Exemplo 1.31. Inserindo um novo elemento na pgina

var $myNewElement = $('<p>Novo elemento</p>');
$myNewElement.appendTo('#content');

$myNewElement.insertAfter('ul:last'); // isto ir
remover p de #content!
$('ul').last().after($myNewElement.clone()); // clona o p,
portanto temos 2 agora

Estritamente falando, voc no precisa armazenar o elemento criado numa
varivel -- voc pode simplesmente chamar o mtodo para adicion-lo
diretamente depois do $(). Entretanto, a maior parte do tempo voc
precisar de uma referncia ao elemento que voc adicionou para que voc
no o selecione depois.

Voc ainda pode criar um elemento ao mesmo tempo que voc o adiciona
pgina, mas note que neste caso voc no obtm a referncia do novo
objeto criado.

Exemplo 1.32. Criando e adicionando um elemento pgina ao mesmo
tempo

$('ul').append('<li>item de lista</li>');

O bsico de jQuery

Manipulando atributos

Os recursos de manipulao de atributos do jQuery so muitos. Mudanas bsicas so
simples, mas o mtodo $.fn.attr tambm permite manipulaes mais complexas.

Exemplo 1.31. Manipulando um nico atributo

$('#myDiv a:first').attr('href', 'novoDestino.html');

Exemplo 1.32. Manipulando mltiplos atributos

$('#myDiv a:first').attr({
href : 'novoDestino.html', rel : 'super-special'
});

Exemplo 1.33. Usando uma funo para determinar um novo valor de
atributo

$('#myDiv a:first').attr({ rel : 'super-special', href :
function() {
return '/new/' + $(this).attr('href');
}
});

$('#myDiv a:first').attr('href', function() {
return '/new/' + $(this).attr('href');
});


2. Ncleo do jQuery

$ vs $()

At agora, estivemos lidando inteiramente com mtodos que so
chamados em um objeto jQuery. Por examplo:

$('h1').remove();

A maioria dos mtodos jQuery chamada em objetos jQuery como mostrado acima; esses
mtodos so considerados parte do namespace $.fn, ou o prottipo do jQuery, e so
melhor imaginados como mtodos do objeto jQuery.

No entanto, h vrios mtodos que no atuam em uma seleo; esses mtodos so
considerados parte do namespace jQuery, e so melhor imaginados como mtodos do ncleo
do jQuery.

Esta distino pode ser incrivelmente confusa para os novos usurios do jQuery. Aqui est o
que voc precisa se lembrar:

Mtodos chamados em selees do jQuery esto no namespace $.fn, e
automaticamente recebem e retornam a seleo como est.

Mtodos no namespace $ geralmente so mtodos do tipo utilitrio, e no funcionam em
selees; no so passados quaisquer argumentos automaticamente para eles, e seu valor
de retorno variar.

H alguns casos onde mtodos de objeto e mtodos do ncleo tem os mesmos nomes, tal como
$.each e
$.fn.each. Nesses casos, seja extremamente cuidadoso(a) ao ler a
documentao para que voc explore
o mtodo correto.

Mtodos Utilitrios

jQuery oferece diversos mtodos utilitrios no namespace $. Estes mtodos so teis para
realizar tarefas rotineiras de programao. Abaixo esto exemplos de alguns dos mtodos
utilitrios; para uma referncia completa sobre mtodos utilitrios do jQuery, visite
http://api.jquery.com/category/utilities/.


$.trim Remove espaos em branco esquerda e direita.

$.trim(' muitos espaos em branco
extras ');
// returns 'muitos espaos em branco
extras'

$.each Itera sobre arrays e objetos.

$.each([ 'foo', 'bar', 'baz' ],
function(idx, val) {
console.log('elemento ' + idx + ' ' + val);
});

$.each({ foo : 'bar', baz : 'bim' }, function(k, v) {
console.log(k + ' : ' + v);
});

Nota

H tambm um mtodo $.fn.each, que usado para iterar
sobre uma seleo de elementos.

$.inArray Retorna o ndice de um valor em um array, ou
-1 se o valor no estiver no array.

var meuArray = [ 1, 2, 3, 5 ];

if ($.inArray(4, meuArray) !== -1) {
console.log('encontrei!');
}

$.extend Muda as propriedades do primeiro objeto usando
as propriedades dos objetos subsequentes.

var primeiroObjeto = { foo : 'bar', a : 'b'
};
var segundoObjeto = { foo : 'baz' };

var novoObjeto =
$.extend(primeiroObjeto,


segundoObjeto);
console.log(primeiroObjeto.foo); //
'baz' console.log(novoObjeto.foo);
//
'baz'

Se voc no quer mudar nenhum dos objetos que
passa para o $.extend, passe um objeto vazio como
primeiro argumento.

var primeiroObjeto = { foo : 'bar', a : 'b'
};
var segundoObjeto = { foo : 'baz' };

var novoObjeto = $.extend({},
primeiroObjeto, segundoObjeto);
console.log(primeiroObjeto.foo); //
'bar' console.log(novoObjeto.foo); //
'baz'

$.proxy Retorna uma funo que sempre ser executada no
escopo fornecido isto , seta o significado do
this dentro da funo passada ao segundo argumento.

var minhaFuncao = function() {
console.log(this); };
var meuObjeto = { foo : 'bar' };

minhaFuncao(); // loga o objeto window

var minhaFuncaoComProxy =
$.proxy(minhaFuncao, meuObjeto);
minhaFuncaoComProxy(); // loga o objeto
meuObjeto

Se voc tiver um objeto com mtodos, pode passar o
objeto e o nome do mtodo para retornar uma funo
que sempre ser executada no escopo do objeto.

var meuObjeto = {
minhaFn : function() {
console.log(this);
}
};

$('#foo').click(meuObjeto.minhaFn); // loga o elemento
DOM #foo
$('#foo').click($.proxy(meuObjeto, 'minhaFn')); //
loga meuObjeto


Verificando tipos

Como mencionado na seo "O Bsico do jQuery", jQuery oferece
alguns mtodos utilitrios para determinar o tipo de um valor
especfico.

Exemplo 2.1. Verificando o tipo de um valor arbitrrio

var meuValor = [1, 2, 3];

// Usando o operador typeof do JavaScript para testar
tipos primitivos typeof meuValor == 'string'; //
false
typeof meuValor ==
'number'; // false
typeof meuValor ==
'undefined'; // false
typeof meuValor ==
'boolean'; // false

// Usando o operador de igualdade estrita
para verificar null meuValor === null; //
false

// Usando os mtodos do jQuery para verificar
tipos no primitivos jQuery.isFunction(meuValor);
// false jQuery.isPlainObject(meuValor); // false
jQuery.isArray(meuValor); // true

Mtodos de Dados

Assim que seu trabalho com o jQuery avana, voc descobrir com frequncia
que h dados sobre um elemento que voc quer armazenar com o elemento. Em
JavaScript puro, voc pode fazer isso adicionando uma propriedade ao elemento
do DOM, mas voc ter que lidar com memory leaks em alguns navegadores.
jQuery ofere um jeito simples de armazenar dados relacionados a um elemento,
e gerencia os problemas de memria para voc.

Exemplo 2.2. Armazenando e recuperando dados relacionados
a um elemento

$('#meuDiv').data('nomeChave', { foo : 'bar' });


$('#meuDiv').data('nomeChave'); // { foo : 'bar' }

Voc pode armazenar qualquer tipo de dados em um elemento, e difcil
expressar a importncia disto quando voc est desenvolvendo uma
aplicao complexa. Para os fins deste curso, usaremos
$.fn.data na maioria das vezes para armazenar referncias a outros
elementos.

Por exemplo, podemos querer estabelecer um relacionamento entre um item de
lista e um div que est dentro dele. Poderamos estabelecer este relacionamento
cada vez que interagimos com o item de lista, mas uma soluo melhor seria
estabelecer o relacionamento uma vez, e ento armazenar um ponteiro para o div
no item de lista usando $.fn.data:

Exemplo 2.1. Armazenando um relacionamento entre
elementos usando
$.fn.data

$('#minhaLista li').each(function() {
var $li = $(this), $div = $li.find('div.content');
$li.data('contentDiv', $div);
});

// depois no temos que procurar o div de novo;
// podemos apenas l-lo dos dados
do item de lista var $primeiroLi
= $('#minhaLista li:first');
$primeiroLi.data('contentDiv').html('new content');

Alm de passar um nico par chave-valor para $.fn.data para armazenar
dados, voc pode passar um objeto contento um ou mais pares.

Deteco de Navegador & Funcionalidades

Embora o jQuery elimine a maioria das peculiaridades dos navegadores, h
ainda ocasies quando seu cdigo precisa saber sobre o ambiente do navegador.

jQuery oferece o objeto $.support, assim como o objeto obsoleto
$.browser, para este propsito. Para uma documentao completa sobre esses
objetos, visite http://api.jquery.com/jQuery.support/ e http://
api.jquery.com/jQuery.browser/.

O objeto $.support dedicado a determinar quais funcionalidades
um navegador suporta; recomendado como um mtodo mais prova de
futuro de customizar seu JavaScript para diferentes ambientes de navegador.


O objeto $.browser foi substitudo em favor do objeto $.support, mas no
ser removido do jQuery to cedo. Ele fornece deteco direta de verso e marca
do navegador.

Evitando Conflitos com Outras Bibliotecas

Se voc est usando outra biblioteca JavaScript que usa a varivel $, voc
pode cair em conflitos com o jQuery. Para evitar esses conflitos, voc precisa
colocar o jQuery em modo no-conflict (sem conflito) imediatamente depois que
ele carregado na pgina e antes que voc tente usar o jQuery em sua pgina.

Quando voc coloca o jQuery em modo no-conflict, tem a opo de atribuir um
nome de varivel para substituir a $.

Exemplo 2.2. Colocando jQuery
em modo no-conflict

<script
src="prototype.js">
</script>
<script
src="jquery.js">
</script>
<script>var $j =
jQuery.noConflict();</script>

Voc pode continuar a usar o $ padro envolvendo seu cdigo em uma funo
annima auto-executada; este o modelo padro para criao de plugin, onde o
autor no saber se uma outra biblioteca estar usando o $.


3. Eventos

Introduo

jQuery fornece mtodos simples para anexar manipuladores de eventos
(event handlers) em selees. Quando um evento ocorre, a funo fornecida
executada. Dentro da funo, this refere-se ao elemento que foi clicado.

Para detalhes sobre eventos do jQuery, visite
http://api.jquery.com/category/events/.

A funo manipuladora de evento pode receber um objeto de evento. Este
objeto pode ser usado para determinar a natureza do evento, e para impedir o
comportamento padro do evento.

Para detalhes sobre o objeto de evento, visite
http://api.jquery.com/category/events/event-object/.

Conectando Eventos a Elementos

jQuery oferece mtodos de convenincia para a maioria dos eventos comuns, e
estes so os mtodos que voc ver sendo usados com mais frequncia. Estes
mtodos -- incluindo $.fn.click, $.fn.focus,
$.fn.blur, $.fn.change, etc. -- so atalhos para o mtodo $.fn.bind
do jQuery. O mtodo bind
til para vincular a mesma funo a mltiplos eventos, e tambm usado
quando voc quer fornecer
dados para o manipulador de eventos, ou quando voc est trabalhando com
eventos personalizados.

Exemplo 3.1. Vinculando Eventos Usando um
Mtodo de Convenincia

$('p').click(function() {
console.log('clique');
});

Exemplo 3.2. Vinculando eventos usando o mtodo $.fn.bind

$('p').bind('click', function() {
console.log('clique');
});


Exemplo 3.1. Vinculando eventos usando o mtodo $.fn.bind
com dados

$('input').bind(
'click change', // anexa mltiplos eventos
{ foo : 'bar' }, // passa dados

function(eventObject) {
console.log(eventObject.type,
eventObject.data);
// loga o tipo de evento, e ento
{ foo : 'bar' }
}
);
Conectando Eventos para Executar Apenas uma vez

Algumas vezes voc precisa que um handler especfico execute apenas uma vez -
- depois disso, voc pode querer que nenhum handler execute, ou pode querer
que um handler diferente execute. jQuery fornece o mtodo $.fn.one para
este propsito.
Eventos

Exemplo 3.2. Trocando manipuladores usando o mtodo $.fn.one

$('p').one('click', function() {
$(this).click(function() { console.log('Voc
clicou nisto antes!'); });
});

O mtodo $.fn.one especialmente til se voc precisa fazer alguma configurao
complicada na primeira vez que um elemento clicado, mas no nas vezes
subsequentes.

Desconectando Eventos

Para desconectar um manipulador de evento, voc usa o mtodo $.fn.unbind e passa
o tipo de evento para desatar. Se voc anexou uma funo nomeada para o evento, ento
pode isolar a desconexo para essa funo nomeada passando-a como o segundo
argumento.

Exemplo 3.3. Desconectando todos os manipuladores de clique em
uma seleo

$('p').unbin
d('click');

Exemplo 3.4. Desconectando um manipulador de
clique especfico

var foo = function() {
console.log('foo'); };
var bar = function() {
console.log('bar'); };

$('p').bind('click',
foo).bind('click', bar);
$('p').unbind('click', bar); // foo ainda est ligado ao
evento de clique

Usando Namespaces com Eventos

Para aplicaes complexas e para plugins que voc compartilha com outros, pode ser til
usar um namespace para seus eventos de forma que voc no desconecte sem querer
eventos sobre os quais voc no conhece ou no poderia conhecer.

Eventos

Exemplo 3.5. Usando Namespaces
com eventos

$('p').bind('click.meuNamespace', function() { /*
... */ });
$('p').unbind('click.meuN
amespace');
$('p').unbind('.meuNamespace'); // desconecta todos
os eventos no namespace

Por Dentro da Funo Manipuladora de Evento

Como mencionado na introduo, a funo manipuladora de evento recebe um objeto de
evento, que contm muitas propriedades e mtodos. O objeto de evento mais
comumente usado para impedir a ao padro do evento atravs do mtodo
preventDefault. Contudo, o objeto de evento contm vrios outros mtodos e
propriedades teis, incluindo:

pageX, pageY A posio do mouse no momento em que o evento ocorreu,
relativa ao canto superior esquerdo da pgina.

type O tipo do evento
(por ex. "click").

which O boto ou tecla que foi
pressionado(a).

data Quaisquer dados que foram passados quando o
evento foi anexado.
Eventos

target O elemento do DOM que iniciou o
evento. preventDefault() Impede a ao padro do evento (por ex.
seguir um link). stopPropagation() Impede o evento de se
propagar (bubble up) para os outros elementos.
Alm do objeto de evento, a funo manipuladora de evento tambm tem
acesso ao elemento do DOM no qual o evento foi anexado atravs da
palavra-chave this. Para transformar um elemento do DOM em um objeto
jQuery no qual podemos usar mtodos do jQuery, simplesmente fazemos
$(this), frequentemente seguindo este idioma:

var $this = $(this);

Exemplo 3.6. Impedindo um link de ser seguindo

$('a').click(function(e) {
if ($this.attr('href').match('mau')) {
e.preventDefault();
$this.addClass('mau');
}
});

Disparando Eventos

jQuery fornece um mtodo de disparar os eventos ligados a um elemento
sem qualquer interao do usurio atravs do mtodo $.fn.trigger.
Enquanto este mtodo tem seus usos, ele no deve ser usado simplesmente
para chamar uma funo que foi ligada como um tratador de clique. Ao
invs disso, voc deve armazenar a funo que voc quer chamar em uma
varivel, e passar o nome da varivel quando fizer sua ligao. Ento voc
pode chamar a prpria funo sempre que quiser.

Exemplo 3.9. Disparando
um evento do jeito certo

var foo = function(e) {
if (e) {
console.log(e);
} else {
console.log('isto no vem de um evento!');
}
Eventos

};

$('p').click(foo);

foo(); // ao invs de $('p').trigger('click')

Aumentando a Performance com Delegao de Evento

Voc frequentemente usar o jQuery para adicionar novos elementos a pgina, e
quando o faz, pode precisar anexar eventos a esses novos elementos -- eventos que voc
j anexou a elementos similares que estavam na pgina originalmente. Ao invs de repetir a
ligao de evento toda vez que adicionar elementos pgina, voc pode usar delegao de
evento. Com delegao de evento voc anexa seu evento ao elemento container, e ento
quando o evento ocorre, voc verifica em qual elemento contido ele ocorreu. Se isto soa
complicado, por sorte o jQuery facilita com seus mtodos $.fn.live e
$.fn.delegate.

Enquanto a maioria das pessoas descobre a delegao de evento ao lidar com elementos
adicionados na pgina depois, isso tem alguns benefcios de performance mesmo se voc
nunca adiciona mais elementos para a pgina. O tempo requerido para ligar eventos a
centenas de elementos individuais no-trivial; se voc tem um grande conjunto de
elementos, deve considerar a delegao de eventos relacionados a um elemento container.

O mtodo $.fn.live foi introduzido no jQuery 1.3, e na poca apenas certos tipos
de eventos eram suportados. Com o jQuery 1.2.2, o mtodo $.fn.delegate est
disponvel, e o mtodo preferencial.

Exemplo 3.8. Delegao de Evento usando
$.fn.delegate

$('#minhaListaNaoOrdenada').delegate('li',
'click', function(e) {
var $meuItemDeLista = $(this);
// ...
});

Exemplo 3.9. Delegao de Evento usando $.fn.live

$('#minhaListaNaoOrdenada li').live('click',
function(e) {
var $meuItemDeLista = $(this);
// ...
});

Eventos

Desvinculando Eventos Delegados

Se voc precisa remover eventos delegados, no pode simplesmente usar
unbind neles. Ao invs disso, use $.fn.undelegate para eventos
conectados com $.fn.delegate, e $.fn.die para eventos conectados
com $.fn.live. Assim como com bind, voc pode opcionalmente passar o
nome da funo ligada ao evento.

Exemplo 3.12. Desvinculando eventos delegados

$('#minhaListaNaoOrdenada').undeleg
ate('li', 'click');
$('#minhaListaNaoOrdenada
li').die('click');

Auxiliares de Eventos

jQuery oferece duas funes auxiliares relacionadas a eventos que
economizam algumas teclas digitadas.

$.fn.hover

O mtodo $.fn.hover deixa voc passar uma ou duas funes para serem
executadas quando os eventos mouseenter e mouseleave ocorrem em
um elemento. Se voc passar uma funo, ela ser executada para ambos os
eventos; se passar duas funes, a primeira ser executada para
mouseenter, e a segunda ser executada para mouseleave.
Eventos

Nota

Antes do jQuery 1.4, o mtodo $.fn.hover exigia duas funes.

Exemplo 3.9. A funo auxiliar hover

$('#menu li').hover(function() {
$(this).toggleClass('hover');
});

$.fn.toggle

Assim como $.fn.hover, o mtodo $.fn.toggle recebe duas ou mais
funes; cada vez que o evento ocorre, a prxima funo na lista chamada.
Geralmente, $.fn.toggle usado apenas com duas funes, mas tecnicamente voc
pode usar tantas quantas desejar.

Exemplo 3.12. A
funo auxiliar
toggle

$('p.expander').toggle(
function() {
$(this).prev().addClass('open');
},
function() {
$(this).prev().removeClass('open');
}
);

Efeitos

4. Efeitos

Viso Geral

jQuery torna trivial adicionar efeitos simples a sua pgina. Efeitos podem
usar configuraes embutidas, ou fornecer uma durao customizada. Voc
pode tambm criar animaes customizadas de propriedades CSS arbitrrias.

Para detalhes completos sobre efeitos do jQuery, visite
http://api.jquery.com/category/effects/.

Efeitos Embutidos

Efeitos frequentemente usados esto embutidos no jQuery como mtodos:

$.fn.show Mostra o elemento selecionado.

$.fn.hide Esconde o elemente selecionado.

$.fn.fadeIn Anima a opacidade dos
elementos selecionados para 100%.

$.fn.fadeOut Anima a opacidade dos
elementos selecionados para 0%.

$.fn.slideDown Mostra os elementos selecionados
com um deslizamento vertical.

$.fn.slideUp Esconde os elementos selecionados
com um deslizamento vertical.

$.fn.slideToggle Mostra ou esconde os elementos selecionados
com um deslizamento vertical, dependendo se os
elementos atualmente esto visveis.

Efeitos

Exemplo 4.1. Um uso bsico
de um efeito embutido

$('h1').show();
Mudando a Durao de Efeitos Embutidos

Com exceo de $.fn.show e $.fn.hide, todos os mtodos
embutidos so animados ao longo de
400ms por padro. Mudar a
durao de um efeito simples.

Exemplo 4.2. Configurando
a durao de um efeito

$('h1').fadeIn(300); //
fade in durante 300ms
$('h1').fadeOut('slow'); // usando uma
definio de durao nativa

jQuery.fx.speeds

jQuery tem um objeto em jQuery.fx.speeds que contm a
velocidade padro, assim como as configuraes para "slow" e "fast".

velocidades: {
slow: 600, fast: 200,
// Velocidade padro
_default: 400
}

possvel sobrescrever ou adicionar a este objeto. Por exemplo, voc pode
querer mudar a durao padro dos efeitos, ou pode querer criar suas prprias
velocidades de efeitos.

Exemplo 4.1. Acrescentando definies de
velocidade customizadas ao
jQuery.fx.speeds

Efeitos

jQuery.fx.speeds.blazing = 100;
jQuery.fx.speeds.turtle = 2000;

Fazendo algo quando um Efeito tiver Terminado

Frequentemente, voc ir querer executar algum cdigo uma vez que uma
animao tenha terminado -- se voc execut-lo antes que a animao tenha
terminado, ele pode afetar a qualidade da animao, ou pode remover
elementos que so parte da animao. [Definition: Funes de callback
fornecem um jeito de registrar seu interesse em um evento que acontecer no
futuro.] Neste caso, o evento que estaremos repondendo a concluso da
animao. Dentro da funo de callback, a palavra-chave this refere-se
ao elemento no qual o efeito foi chamado; como se estivssemos dentro de
funes de manipulao de eventos, podemos transform-lo em um objeto
jQuery via $(this).

Exemplo 4.2. Executando cdigo quando uma
animao tiver completado

$('div.old').fadeOut(300, function() {
$(this).remove(); });

Note que se sua seleo no retorna nenhum elemento, sua callback nunca
ser executada! Voc pode resolver este problema testando se sua seleo
retornou algum elemento; se no, voc pode s executar a callback
imediatamente.

Exemplo 4.3. Executa uma callback mesmo se no houver
elementos para animar

var $thing = $('#naoexistente');

var cb = function() {
};

if ($thing.length) {
$thing.fadeIn(300, cb);
} else {
cb();
}

Efeitos

Efeitos customizados com $.fn.animate

jQuery torna possvel animar propriedades CSS arbitrrias
atravs do mtodo $.fn.animate. O mtodo
$.fn.animate deixa voc animar para um valor
definido ou para um valor relativo ao valor atual.

Exemplo 4.4. Efeitos customizados com
$.fn.animate

$('div.funtimes').animate(
{
left : "+=50", opacity : 0.25
},
300, // durao
function() { console.log('pronto!'); // callback

});

Easing

Propriedades relacionadas a cor no podem ser animadas com
$.fn.animate usando jQuery de forma convencional. Animaes
de cor pode facilmente ser efetuadas incluindo o plugin de cor
[http://plugins.jquery.com/files/jquery.color.js.txt]. Discutiremos o
uso de plugins depois no livro.
Efeitos

[Definition: Easing descreve a maneira na qual um efeito ocorre -- se a taxa
de variao constante, ou varia com a durao da animao.] jQuery inclui
apenas dois mtodos de easing: swing and linear. Se voc quer transies
mais naturais em suas animaes, vrios plugins de easing esto disponveis.

A partir do jQuery 1.4, possvel fazer easing por propriedade ao
usar o mtodo $.fn.animate.

Exemplo 4.5. Easing por propriedade

$('div.funtimes').animate(
{},300 left : [ "+=50", "swing ], opacity : [
0.25, "linear" ]
);

Para mais detalhes sobre opes de easing, veja
http://api.jquery.com/animate/.

Controlando efeitos

jQuery fornece vrias ferramentas para controlar animaes.

$.fn.stop Para animaes atualmente sendo executadas nos
elementos selecionados.

$.fn.delay Espera um nmero de milissegundos especificado
antes de executar a prxima animao.

$('h1').show(300).delay(1000).hide(30
0);

jQuery.fx.off Se este valor for true, no haver transio para
as animaes; os elementos sero imediatamente
setados para o estado alvo final em vez disso. Isto
pode ser especialmente til ao lidar com navegadores
antigos; voc pode querer fornecer a opo para seus
usurios.
Ajax

5. Ajax

Introduo

O mtodo XMLHttpRequest permite que navegadores se comuniquem com
o servidor sem precisar recarregar a pgina. Este mtodo, tambm conhecido
como Ajax(Asynchronous JavaScript and XML - JavaScript Assncrono e
XML), permite ter experincias ricas e interativas nas pginas web.

Requisies Ajax so disparadas por cdigo JavaScript; seu cdigo envia
uma requisio a uma URL, e quando recebe uma resposta, uma funo de
callback pode ser acionada para trata-la. Pelo motivo da requisio ser
assncrona, o resto do seu cdigo continur a executando enquanto a
requisio processada, sendo assim, imperativo que um callback seja
usado para lidar com a resposta.

O jQuery prov suporte Ajax que abstrai as dolorosas diferenas entre
navegadores. Ele oferece mtodos completos como o $.ajax(), e alguns
mtodos de convenincia como $.get(), $.getScript(),
$.getJSON(),
$.post() e
$().load().

A maior parte das aplicaes jQuery no usam XML apesar do nome
"Ajax"; ao invs disso, elas transportam HTML puro ou JSON (JavaScript
Object Notation - Notao de Objeto do JavaScript).

Em geral, Ajax no funciona atravs de domnios diferentes. As excees
so servios que fornecem suporte ao JSONP (JSON com padding), que
permite uma limitada funcionalidade entre domnios.

Conceitos Chave

O uso apropriado de mtodos relacionados ao Ajax requer o
conhecimento de alguns conceitos-chave.

GET vs. POST

Os mtodos mais comuns para enviar uma requisio ao servidor so o GET
Ajax

e o POST. importante entender a aplicao apropriada para cada um.

O mtodo GET deve ser usado para operaes no-destrutivas - ou seja,
operaes que voc apenas esteja "pegando" dados do servidor, sem
modificar nenhum dado no servidor. Por exemplo, uma consulta para fazer
uma busca pode ser uma requisio GET. Requisies GET podem ser
cacheadas pelo navegador, que pode levar a comportamentos imprevisveis
se voc no tomar cuidado. Requisies GET geralmente enviam todos os
seus dados na string de requisio.

O mtodo POST deve ser usado para operaes destrutivas - ou seja,
operaes onde voc muda dados no servidor. Por exemplo, um usurio
salvando o post de um blog deve ser uma requisio POST. Requisies
POST geralmente no so cacheadas pelo navegador; uma string de
requisio pode fazer parte da URL, mas os dados tendem a ser enviados
separadamente como uma requisio POST.

Tipos de dados

O jQuery geralmente requer alguma instruo a respeito do tipo de dados que
voc espera obter com uma requisio Ajax; em alguns casos, o tipo de dado
especificado no nome do mtodo e em outros casos fornecido como parte
do objeto de configurao. H vrias opes:

texto Para transportar strings simples

html Para transportar blocos de HTML
para serem colocados na pgina

script Para
adicionar um novo
script pgina

json Para transportar dados formatados no estilo JSON, que pode
incluir strings, arrays e objetos

No jQuery 1.4, se os dados JSON enviados pelo seu
servidor no estiverem propriamente formatados, a
requisio pode falhar silenciosamente. D uma olhada
em http://json.org para detalhes sobre formatao
correta do JSON, mas como regra geral, use mtodos j
prontos da linguagem usada no servidor para gerar
JSON sem erros de sintaxe.

Ajax

jsonp Para transportar
dados JSON de outro domnio.
xml Para transporte de
dados em um XML
Eu sou um forte proponente no uso de JSON na maioria dos casos, de forma
que ele prov a maior flexibilidade. especialmente til para enviar HTML
e dados ao mesmo tempo.

A de assncrono

A assincronicidade do Ajax pega muitos novos usurios do jQuery
desprevinidos. Pelo fato das chamadas Ajax serem assncronas por padro, a
resposta no estar disponvvel imediatamente. Respostas s podem ser
manipuladas por um callback. Ento, por exemplo, o cdigo seguinte no ir
funcionar:

$.get('foo.php');
console.log(response);

Ao invs disso, ns temos que passar um funo callback para nossa
requisio; Este callback ser executado quando a requisio for realizada
com sucesso, e neste ponto que poderemos acessar os dados que ela
retornou, se houver algum.

$.get('foo.php', function(response) {
console.log(response); });

Regra da mesma origem e JSONP

Em geral, as requisies Ajax so limitadas ao mesmo protocolo (http ou
https), a mesma porta, e ao mesmo domnio da pgina que est fazendo a
requisio. Esta limitao no se aplicam a scripts que so carregados pelos
mtodos de Ajax do jQuery.

A outra exceo so requisies direcionadas a um servio JSONP em outro
domnio. No caso do JSONP, o provedor do servio tem que concordar em
responder a sua requisio com um script que pode ser carregado dentro da
mesma pgina usando uma tag <script>, assim evitando a limitao da
mesma origem; este script ter os dados que voc requisitou encapsulado em
uma funo de callback que voc especificou.

Ajax

Ajax e o Firebug

O Firebug (ou o Webkit Inspector no Chrome ou Safari) uma ferramenta
indispensvel para trabalhar com requisies Ajax. Voc pode ver as
requisies Ajax no mesmo instante que elas acontecem na tab Console do
Firebug (e no painel Resources > XHR do Webkit Inspector), e voc pode
clicar numa requisio para expandi-la e ver os detalhes como os headers de
requisio, de resposta, contedo e mais. Se alguma coisa no estiver
acontecendo como esperado com uma requisio Ajax, este o primeiro
lugar para ver o que est acontecendo de errado.

Mtodos do jQuery relacionados ao Ajax

Enquanto o jQuery oferece muitos mtodos convenientes relacionados ao
Ajax, o corao de todos eles o mtodo $.ajax e entende-lo
imperativo. Ns vamos revisa-lo primeiro e ento dar uma olhada rpida
nos mtodos de convenincia.
Eu geralmente uso o mtodo $.ajax e no uso os mtodos de convenincia.
Como voc poder ver, ele fornece recursos que os mtodos de convenincia
no oferecem e sua sintaxe mais facilmente inteligvel, na minha opinio.

$.ajax

O mtodo core $.ajax uma forma simples e poderosa de criar requisies
Ajax. Ele utiliza um objeto de configurao que contm todas as instrues
que o jQuery precisa para completar a requisio. O mtodo
$.ajax particularmente til porque ele oferece a habilidade de especificar
callbacks de sucesso e falha. H tambm a possibilidade de pegar um objeto
de configurao definido separadamente, fazendo que seja fcil escrever
cdigo reutilizvel. Para documentao completa das opes de
configurao, visite http:// api.jquery.com/jQuery.ajax/.
Ajax

Exemplo 5.1. Usando o mtodo core $.ajax

$.ajax({
// a URL para requisio url : 'post.php',

// Os dados a serem enviados
// (sero convertidos em uma string de
requisio)
data : { id : 123 },

// se esta uma requisio POST ou GET
method : 'GET',

// o tipo de dados que ns esperamos dataType :
'json',

// cdigo a ser executado se a requisio
// for executada com sucesso; a resposta
// passada para a funo success :
function(json) {
$('<h1/>').text(json.title).appendTo('body')
;
$('<div class="content"/>')
.html(json.html).appendTo('body');
},

// cdigo a ser executado se a requisio
// falhar. A requisio bruta e os cdigos
// de statsus so passados para funo error :
function(xhr, status) {
alert('Desculpa, aconteceu um problema!');
},

// Cdigo a ser executado independetemente
// do sucesso ou falha
complete : function(xhr, status) {
alert('A requisio est completa!');
}
});

Uma nota a respeito da configurao dataType: se o servidor enviar
dados que esto num formato diferente que voc especificou, seu cdigo
poder falhar, e a razo nem sempre ser clara, por que o cdigo de
Ajax

resposta HTTP no ir mostrar um erro. Quando estiver trabalhando com
requisies Ajax, tenha certeza que o servidor est enviando de volta os
dados com o formato que voc especificou e verifique se o header
Content-type est de acordo com o tipo de dados. Por exemplo, para
dados JSON, o header Content-type deve ser application/json.

Opes do $.ajax

H vrias, vrias opes para o mtodo $.ajax, que parte do seu poder. Para
uma lista completa de opes, visite http://api.jquery.com/jQuery.ajax/; aqui
vo algumas opes que voc ir usar frequentemente:
Ajax

async Configure para false se a requisio deve ser enviada de forma sncrona. O
padro true. Perceba que se voc configurar esta opo para falso, sua requisio
bloquear a execuo de outro cdigo at que a resposta seja recebida.

cache Usado se a resposta disponvel for cachevel. O padro
true para todos os tipos de dados, exceto "script" e
"jsonp". Quando setado para falso, a URL simplesmente
ter um parmetro a mais anexado a ela para evitar o
cache.

complete Uma funo callback para executar quando a
requisio estiver completa, independetemente de
sucesso ou falha. A funo recebe o objeto bruto da
requisio e o texto de status da mesma.

context O escopo em que a funo callback deve executar (ou
seja, o que this ir significar dentro da(s) funo(es)
callback). Por padro, this dentro das funes
callback refere ao objeto originalmente passado para
$.ajax.

data Os dados a serem enviados para o servidor. Isto pode ser
tanto um objeto quanto uma string de requisio, como
foo=bar&baz=bim.

dataType O tipo de dado que voc espera do servidor. Por padro,
o jQuery ir olhar o MIME
type da resposta se nenhum tipo de dados for especificado.

error Uma funo callback para ser executa se a requisio
resultar em um erro. A funo recebe o objeto bruto de
requisio e o texto de status da requisio.

jsonp O nome da funo de callback para enviar na string
de requisio quando estiver fazendo uma requisio
JSONP. O padro "callback".

success Uma funo de callback para ser executada se a requisio
tiver xito. A funo recebe os dados de resposta
(convertidos para um objeto JavaScript se o tipo de dados
for JSON), e o texto de status da requisio e o objeto
bruto da requisio.
timeout O tempo em milisegundos a se esperar antes de
Ajax

considerar que a reqsuisio falhou. traditional Configure para true
para usar o tipo de serializao param em verses anteriores ao
jQuery 1.2. Para detalhes, veja:
http://api.jquery.com/jQuery.param/.

type O tipo da requisio, "POST" ou "GET". O padro
"GET". Outros tipos de requisio, como "PUT" e
"DELETE" podem ser utilizados, mas eles talvez no
sejam suportados por todos os navegadores.

url
A URL para
requisio.

A opo url a nica propriedade obrigatria do objeto de configurao
do mtodo $.ajax; todas as outras propriedades so opcionais.

Mtodos de convenincia

Se voc no precisa da configurao extensiva do $.ajax, e voc no se
preocupa sobre manipulao de erros, as funes de convenicia providas
pelo jQuery podem ser uma forma til e lapidada para executar requisies
Ajax. Estes mtodos so somente "encapsulamentos" em torno do mtodo
$.ajax, e simplesmente pr setam algumas das opes no mtodo
$.ajax.

Os mtodos de convenincia providos pelo jQuery so:

$.get Executa uma requisio GET para a URL informada.

$.post Executa uma requisio POST na URL informada.

$.getScript Adiciona um script pgina.

$.getJSON Executa uma requisio GET com
expectativa de retorno de um JSON. Em cada caso, os
mtodos pegam os seguintes argumentos, em ordem:
url A URL para requisio. Obrigatrio.

data Os dados para serem enviados para o
servidor. Opcional. Pode ser tanto um
Ajax

objeto quanto uma string de requisio,
como foo=bar&baz=bim.

Esta opo no vlida para
$.getScript.

callback de successo Uma funo de callback para executar se a
requisio for executada com sucesso.
Opcional. A funo recebe os dados de
resposta (convertidos para um objeto
JavaScript se o tipo de dados for JSON),
assim como o texto de status e o objeto
bruto da requisio.

tipo de dados O tipo de dados que voc espera de retorno
do servidor. Opcional.

Esta opo s aplicvel para mtodos que ainda
no especificaram o tipo de dados no seu nome.

Exemplo 5.2. Usando os mtodos de convenincia do jQuery

// pega texto puro ou html
$.get('/users.php', { userId : 1234 },
function(resp) {
console.log(resp);
});

// adiciona um script na pgina, e ento executa uma
funo
// definida nele
$.getScript('/static/js/myScript.js', function() {
functionFromMyScript();
});

// pega dados formatados em JSON do servidor
$.getJSON('/details.php', function(resp) {
$.each(resp, function(k, v) {
console.
log(k +
' : ' +
v);
});

Ajax

$.fn.load

O mtodo $.fn.load nico dentre os mtodos de ajax do jQuery que
chamado em uma seleo. O
mtodo $.fn.load pega o HTML de uma URL, e usa o HTML retornado
para popular o(s) elemento(s) selecionados. Em adio URL informada,
voc ainda pode informar um seletor; o jQuery ir pegar somente o
elemento correspondente do HTML retornado.

Exemplo 5.1. Usando o $.fn.load para
popular um elemento

$('#newContent').load('/foo.html');

Exemplo 5.2. Usando o $.fn.load para popular um
elemento baseado no seletor

$('#newContent').load('/foo.html #myDiv
h1:first', function(html) {
alert('Contedo atualizado!');
});

Ajax e formulrios

As funcionalidades de Ajax do jQuery podem ser especialmente teis
ao lidar com formulrios. O jQuery Form Plugin
[http://jquery.malsup.com/form/] uma ferramenta bem testada para
adicionar funcionalidades de Ajax nos formulrios e voc deve usa-lo para
manipular formulrios com Ajax ao invs de usar sua prpria soluo para
alguma coisa mais complexa. Mas ainda h dois mtodos do jQuery
relacionados processamento de formulrios que voc deve conhecer:
$.fn.serialize e
$.fn.serializeArray.

Exemplo 5.3. Transformando os dados de um formulrio em uma
string de requisio

$('#myForm').serialize();

Ajax

Exemplo 5.4. Criando um array de objetos contendo dados do
formulrio.

$('#myForm').serializeArray();

// cria uma estrutura como esta: [
{ name : 'campo1', value : 123
},
{ name : 'campo2', value : 'ol
mundo!' }
]

Trabalhando com JSONP

O advento do JSONP -- essencialmente um hack consensual para cross-site
scripting -- abriu a porta para mashups de contedo bem poderosos. Muitos
sites provem servios JSONP, permitindo que voc acesse o contedo deles
atravs de uma API pr-definida. Uma boa fonte de dados formatados em
JSONP o Yahoo! Query Language
[http://developer.yahoo.com/yql/console/], que ns iremos usar no prximo
exemplo para pegar notcias a respeito de gatos.

Exemplo 5.5. Usando YQL e JSONP

$.ajax({
url :
'http://query.yahooapis.com/v1/public/yql',

// o nome do parmetro de callback,
// como especificado pelo servio do YQL
jsonp : 'callback',

// fala para o jQuery que estamos esperando
JSONP
dataType : 'jsonp',

// fala para o YQL o que ns queremos e que
queremos em JSON
data : {
q : 'select title,abstract,url from
search.news where query="gato"', format :
'json'
},

// trabalha com a resposta success :
Ajax

function(response) {
console.log(response);
}
});

O jQuery manipula todos os aspectos complexos por trs do JSONP
-- tudo que ns temos que fazer falar para o jQuery o nome do
callback JSONP especificado pelo YQL ("callback" neste caso), e
todo o processo se parece com uma requisio Ajax normal.

Eventos do Ajax

Frequentemente, voc ir querer fazer algo depois que uma
requisio Ajax inicia ou termina, como exibir ou mostrar um
indicador de carregamento. Ao invs de definir este comportamento
dentro de cada requisio Ajax, voc pode associar eventos do Ajax
elementos da mesma forma que voc associa outros eventos. Para
uma lista completa de de eventos do Ajax, visite
http://docs.jquery.com/Ajax_Events.

Exemplo 5.6. Configurando um indicador de carregamento usando
eventos do Ajax

$('#loading_indicator')
.ajaxStart(function() { $(this).show(); })
.ajaxStop(function() { $(this).hide(); });

Plugins

6. Plugins

O que exatamente um plugin?

Um plugin do jQuery simplesmente um novo mtodo que ns usamos para
extender o prottipo de objeto do jQuery. Atravs da extenso do prottipo,
voc permite que todos os objetos do jQuery herdem quaisquer mtodos que
voc adicionar. Como estabelecido, sempre que voc chama jQuery() voc
est criando um novo objeto do jQuery, com todos os mtodos herdados.

A idia de um plugin fazer alguma coisa com uma coleo de elementos.
Voc pode considerar que cada mtodo que vem com o core do jQuery seja
um plugin, como fadeOut ou addClass.

Voc pode fazer seus prprios plugins e usa-los privadamente no seu cdigo
ou voc pode libera-lo para comunidade. H milhares de plugins para o
jQuery disponveis online. A barreira para criar um plugin prprio to
pequena que voc desejar fazer um logo "de cara"!

Como criar um plugin bsico

A notao para criar um novo plugin a seguinte:

(function($){
$.fn.myNewPlugin = function() {
return this.each(function(){
// faz alguma coisa
});
};
}(jQuery));

Mas no se deixe confundir. O objetivo de um plugin do jQuery extender o
prottipo do objeto do jQuery, e isso o que est acontecendo nesta linha:

$.fn.myNewPlugin = function() { //...

Plugins

Ns encapsulamos esta associao numa funo imediatamente invocada:

(function($){
//...
}(jQuery));

Isso possui o efeito de criar um escopo "privado" que nos permite extender o
jQuery usando o smbolo de dlar sem ter o risco de ter o dlar sobrescrito
por outra biblioteca.

Ento nosso verdadeiro plugin, at agora, este:

return
this.each
(function
(){
// faz alguma coisa
});
};

A palavra chave this dentro do novo plugin refere-se ao objeto jQuery
em que o plugin est sendo chamado.

var somejQueryObject = $('#something');

alert(this === somejQueryObject);
};

somejQueryObject.myNewPlugin(); // alerta 'true'

Seu ojeto jQuery tpico conter referncias para qualquer nmero de
elementos DOM, e esse o porqu que objetos jQuery so geralmente
referenciados colees.

Ento, para fazer algo com uma coleo, ns precisamos iterar sobre ela,
que mais facilmente feito utilizando o mtodo each() do jQuery:

return this.each(function(){

});
};

O mtodo each() do jQuery, assim como a maioria dos outros mtodos,
retornam um objeto jQuery, permitindo-nos assim que possamos saber e
Plugins

adorar o 'encadeamento' ($(...).css().attr()...). Ns no
gostaramos de quebrar esta conveno, ento ns retornamos o objeto
this. Neste loop, voc poder fazer o que voc quiser com cada elemento.
Este um exemplo de um pequeno plugin utilizando uma das tcnicas que
ns discutimos:

(function($){
$.fn.showLinkLocation = function() {
return this.filter('a').each(function(){
$(this).append(
' (' + $(this).attr('href') + ')'
);
});
};
}(jQuery));

// Exemplo de uso:
$('a').showLinkLocation();

Este prtico plugin atravessa todas as ncoras na coleo e anexa o atributo
href entre parnteses.


<a href="page.html">Foo</a>


<a href="page.html">Foo (page.html)</a>

Nosso plugin pode ser otimizado:

(function($){
$.fn.showLinkLocation = function() {
return
this.filter('a').append
(function(){
return ' ('
+ this.href
+ ')';
});
};

}(jQuery));
Plugins

Ns estamos utilizando a capacidade de aceitao de um callback do mtodo
append, e o valor de retorno deste callback ir determinar o que ser
aplicado a cada elemento na coleo. Perceba tambm que ns no estamos
usando o mtodo attr para obter o atributo href, pois a API do DOM
nativa nos d um acesso facilitado atravs da propriedade href.

Este um outro exemplo de plugin. Este no requer que ns faamos uma
iterao sobre todos os elementos com o mtodo each()., Ao invs disso,
no simplesmente vamos delegar para outros mtodo do jQUery diretamente:

(function($){
$.fn.fadeInAndAddClass = function(duration,
className) {
return this.fadeIn(duration, function(){
$(this).addClass(className);
});
};
}(jQuery));

// Exemplo de uso:
$('a').fadeInAndAddClass(400,
'finishedFading');

Procurando & Avaliando Plugins

Os plugins extendem funcionalidades bsicas do jQuery, e um dos
aspectos mais celebrados da biblioteca seu extensivo ecossistema de
plugins. De ordenao de tabelas validao de formulrio e
autocompletamento ... se h uma necessidade para algo, h boas chances que
alguem j tenha escrito um plugin para isso.

A qualidade dos plugins do jQuery varia muito. Muitos plugins so
extensivamente testados e bem mantidos, mas outros so porcamente criados
e ento ignorados. Mais do que algumas falhas para seguir as melhores
prticas.

O Google seu melhor recurso inicial para localizao de plugins, embora o
time do jQuery esteja trabalhando em um repositrio de plugin melhorado.
Uma vez que voc identificou algumas opes atravs de uma busca do
Google, voc pode querer consultar a lista de emails do jQuery ou o canal de
IRC #jquery para obter informaes de outros.

Quando estiver procurando por um plugin para preencher uma necessidade,
faa seu trabalho de casa. Tenha certeza que o plugin bem documentado, e
veja se o autor prov vrios exemplos do seu uso. Tenha cuidado com
Plugins

plugins que fazem muito mais do que voc precisa; eles podem acabar
adicionando um overhead substancial sua pgina. Para mais dicas sobre
como identificar um plugin ruim, leia Signs of a poorly written jQuery plugin
[http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/]
do Remy Sharp.

Uma vez que voc escolhe um plugin, voc precisar adiciona-lo sua
pgina. Baixe o plugin, descompacte-o se necessrio, coloque-o no diretrio
da sua aplicao e ento inclua o plugin na sua pgina usando uma tag script
(depois que voc incluir o jQuery).

Escrevendo Plugins

Algumas vezes voc quer que uma pequena funcionalidade esteja disponvel
pelo seu cdigo; por exemplo, tavez voc queira que um simples mtodo
possa ser chamado para executar uma srie de operaes sobre uma seleo
do jQuery. Neste caso, voc pode querer escrever um plugin.

A maioria dos plugins do jQuery so simplesmente mtodos criados no
namespace $.fn. O jQuery garante que um mtodo chamado num objeto
jQuery possa acessar aquele objeto jQuery como this dentro do mtodo.
Em retorno, seu plugin precisa garantir que ele retorna o mesmo objeto que
ele recebeu, a menos que o contrrio seja explicitamente documentado.

Este um exemplo de um plugin simples:

Exemplo 6.1. Criando um plugin para adicionar e remover uma
classe no hover

// definindo o plugin
(function($){
$.fn.hoverClass = function(c) {
return this.hover(
function() { $(this).toggleClass(c); }
);
};
}(jQuery);

// utilizando o plugin
$('li').hoverClass('hover');

Plugins

Exemplo 6.2. O Padro de Desenvolvimento de Plugins do Mike Alsup

//
// cria a closure
//
(function($) {
//
// definio do plugin
//
$.fn.hilight = function(options) {
debug(this);
// constri as opes principais antes da
iterao com elemento var opts = $.extend({},
$.fn.hilight.defaults, options);
// itera e reformata cada elemento encontrado
return this.each(function() {
$this = $(this);
// constri opes especficas do elemento
var o = $.meta ? $.extend({}, opts,
$this.data()) : opts;
// atualiza estilos do elemento
$this.css({
backgroundColor: o.background, color:
o.foreground
});
var markup = $this.html();
// chama nossa funo de formatao markup =
$.fn.hilight.format(markup);
$this.html(markup);
});
};
//
// funo privada para debugging
//
function debug($obj) {
if (window.console && window.console.log)
window.console.log('hilight selection count: '
+ $obj.size());
};
//
// define e expe nossa funo de formatao
//
$.fn.hilight.format = function(txt) {
return '<strong>' + txt + '</strong>';
Plugins

};
//
// padres do plugin
//
$.fn.hilight.defaults = { foreground: 'red', background:
'yellow'
};
//
// fim da closure
//
})(jQuery);
Plugins

Escrevendo plugins com estado com a fbrica de widgets do
jQuery UI

Nota

Esta seo baseada, com permisso, no post de blog Building Stateful
jQuery Plugins [http://
blog.nemikor.com/2010/05/15/building-stateful-jquery-plugins/] de Scott
Gonzalez.

Enquanto a maioria dos plguins para jQuery so stateless - isto , ns os chamamos num
elemento e isso a esteno de nossa interao com o plugin - h um grande conjunto de
funcionalidades que no se encaixam no padro bsico de plguins.

Como forma de preencher esta lacula, o jQuery UI implementa um sistema de plugin mais
avanado. O novo sistema gerencia estado, permite mltiplas funes sendo expostas
atravs de um plugin simples, e prov vrios pontos de esteno. Este sistema chamado
de fbrica de widgets e exposto como jQuery.widget e faz parte do jQuery UI 1.8;
entretanto, pode ser usado independentemente do jQuery UI.

Para demonstrar as capacidades da fbrica de widget, ns iremos fazer um simples plugin
para barra de progresso.

Para iniciar, ns iremos criar uma barra de progresso que nos permite especificar o
progresso uma s vez. Como podemos ver abaixo, isso pode ser feito atravs da
chamada jQuery.widget com dois parmetros: o nome do plugin a ser criado e um
literal objeto contendo funes para dar suporte ao nosso plugin. Quando nosso plugin
chamado, ele ir criar uma nova instncia do plugin e todas as funes sero executadas
dentro do contexto desta instncia. Isso diferente de de um plugin padro do jQuery em
duas formas importantes. Primeiro, o contexto um objeto, no um elemento do DOM.
Segundo, o contexto sempre um objeto, nunca uma coleo.

Plugins

Exemplo 6.1. Um plugin simples, stateful utilizando a
fbrica de Widgets do jQuery UI.

$.widget("nmk.progressbar", {
_create: function() {
var progress = this.options.value + "%";
this.element
.addClass("progressbar")
.text(progress);
}
});

O nome do plugin precisa conter um namespace; neste caso ns usamos o
namespace nmk. H uma limitao que namespaces tem que ter exatamente
um nvel de profundidade - isto , ns no podemos usar um namespace
como nmk.foo. Ns podemos tambm ver que o fbrica de widgets nos deu
duas propriedades. this.element um objeto jQuery contendo
exatamente um elemento. Se nosso plugin chamado num objeto do jQuery
contendo mtiplos elementos, uma instncia nova ser criada para cada
elemento e cada instncia ter seu prprio this.element. A segunda
propriedade, this.options, um hash contendo pares chave/valor para
todas as nossas opes do plugin. Estas opes podem ser passadas para
nosso plugin como mostrado aqui.
Plugins

No nosso exemplo, ns usamos o namespace nmk. O namespace
ui reservado para plugins oficiais do jQuery UI. Quando fizer
seus prprios plugins, voc deve criar seu prprio namespace. Isso
deixa claro de onde o plugin veio e se ele faz parte de uma coleo
maior.

Exemplo 6.2. Passando opes para um widget

$("<div></div>")
.appendTo( "body" )
.progressbar({ value: 20 });

Quando ns chamamos jQuery.widget, ele estende o jQuery
adicionando um mtodo em jQuery.fn (da mesma forma que ns criamos
um plugin padro). O nome da funo que ele adiciona baseado no nome
que voc passa para o jQuery.widget, sem o namespace; no nosso caso
ele ir criar jQuery.fn.progressbar. As opes passadas para nosso
plugins esto em this.options, dentro de nossa instncia do plugin.
Como mostrado abaixo, ns podemos especificar valores default para
qualquer uma das nossas opes. Quando estiver projetando sua API, voc
deve perceber o caso mais comum para seu plugin para que voc possa setar
valores padro e fazer todas as opes verdadeiramente opcionais.

Exemplo 6.3. Setando opes default para um widget

$.widget("
nmk.progre
ssbar", {
// default options options: {
value: 0
},

this.element
.addClass( "progressbar" )
.text( progress );
}
});

Plugins

Adicionando mtodos a um Widget

Agora que ns podemos inicializar nossa barra de progresso, ns iremos
adicionar a habilidade de executar aes atravs da chamada de mtodos na
instncia do nosso plugin. Para definir um mtodo do plugin ns
simplesmente inclumos a funo num literal objeto que ns passamos para
jQuery.widget. Ns tambm podemos definir mtodos privados se
adicionarmos um underscore ("_") antes do nome da funo.
Plugins

Exemplo 6.4. Criando mtodos widget

options: {
value: 0
},

this.element
.addClass("progressbar")
.text(progress);
},

// cria um mtodo pblico value: function(value) {
// nenhum valor passado, atuando como um
getter if (value === undefined) {
return this.options.value;
// valor passado, atuando como um setter
} else {
this.options.value =
this._constrain(value); var progress =
this.options.value + "%";
this.element.text(progress);
}
},
// criando um mtodo privado
_constrain: function(value) {
if (value > 100) {
value = 100;
}
if (value < 0) {
value = 0;

}
});
}
return value;
Plugins

Para chamar um mtodo numa instncia do plugin, voc precisa passar o
nome do mtodo para o plugin do jQuery. Se voc estiver chamando um
mtodo que aceita parmetros, voc simplemente passa estes parmetros
depois do nome do mtodo.
Plugins

Exemplo 6.5. Chamando mtodos numa instncia do plugin

var bar = $("<div></div>")
.appendTo("body")
.progressbar({ value: 20 });

// pega o valor atual
alert(bar.progressbar("value"));

// atualiza o valor bar.progressbar("value",
50);

// pega o valor atual denovo
alert(bar.progressbar("value"));

Executar mtodos atravs da passagem do nome do mesmo para a mesma
funo do jQuery que foi usada para inicializar o plugin pode parecer
estranho. Isso feito para previnir a poluio do namespace do jQuery
enquanto mantm a habilidade de encadear chamadas de mtodos.

Trabalhando com Opes de Widget

Um dos mtodos que autimaticamento disponvel para nosso plugin o
mtodo option. A o mtodo option permite que voc obtenha e sete
opes depois da inicializao. Este mtodo funciona exatamente como o
mtodos css e attr do jQuery: voc pode passar somente o nome para
usa-lo como um getter, um nome e um valor para usa-lo com um setter nico,
ou um hash de pares nome/valor para setar mltiplos valores. Quando usado
como um getter, o plugin ir retornar o valor atual da opo que corresponde
ao nome que foi passado. Quando usado como um setter, o mtodo
_setOption do plugin ser chamado para cada opo que estiver sendo
setada. Ns podemos especificar um mtodo _setOption no nosso plugin
para reagir a mudanas de opo.

Plugins

Exemplo 6.6. Respondendo quando a opo setada

options: {
value: 0
},

this.element.addClass("progressbar");
this._update();
},

_setOption: function(key, value) {
this.options[key] = value; this._update();
},

_update: function() {
}
});
Plugins

Adicionando Callbacks

Uma das formas mais fceis de fazer seu plugin estensvel adicionar
callbacks para que os usurios possam reagir quando o estado do plugin
muda. Ns podemos ver abaixo como adicionar um callback nossa barra
de progresso para enviar um sinal quando a barra de progresso chegar
100%. O mtodo
_trigger requer trs parmetros: o nome do callback, um objeto de evento
nativo que iniciou o callback, e um hash de dados relevantes para o evento.
O nome do callback o nico parmetro requerido, mas os outros podem
ser muito teis para usurios que querem implementar funcionalidades
customizadas no topo do seu plugin. Por exemplo, se ns construssemos um
plugin arrastvel, ns poderamos passar o evento mouseove nativo quando
dispararmos o callback de arrastar; Isso permitiria que usurios reagissem ao
arraste baseado nas coordenadas x/y providas pelo objeto do evento.

Exemplo 6.9. Provendo callbacks para estenso do usurio

options: {
value: 0
},

this.element.addClass("progressba
r"); this._update();
},

this.options[key] = value;
this._update();
},

var progress = this.options.value
+ "%";
if (this.options.value == 100) {
this._trigger("complete",
null, { value: 100 });
}
}
});
Plugins

Funes de callback so essencialmente opes adicionais, ento voc pode
obter e seta-las como qualquer outra opo. Quando um callback executado,
um evento correspondente executado tambm. O tipo do evento
determinado pela concatenao do nome do plugin e do nome do callback. O
callback e o evento recebem os mesmos dois parmetros: um objeto evento e
um hash dos dados relevantes para o evento, como veremos a seguir.

Se seu plugin tem funcionalidade que voc deseja permitir que o
usurio previna, a melhor forma de suportar isso criando callbacks
cancelveis. Usurios podem cancelar um callback, ou seu evento
associado, da mesma forma que eles cancelam qualquer evento nativo:
chamando event.preventDefault() ou usando return false. Se
o usurio cancelar o callback, o mtodo
_trigger ir retornar falso para que voc implemente a funcionalidade
apropriada dentro do seu plugin.
Plugins

Exemplo 6.8. Vinculando eventos do widget

var bar = $("<div></div>")
.appendTo("body")
.progressbar({
complete: function(event, data) {
alert( "Callbacks so timos!" );
}
})
.bind("progressbarcomplete", function(event,
data) {
alert("Eventos borbulham e suportam muitos manipuladores para
extrema flex alert("O valor da barra de progresso " +
data.value);
});

bar.progressbar("option", "value", 100);

Limpando

Em alguns casos, faz sentido permitir usurios aplicar seu plugin e
desaplica-lo depois. Voc pode fazer isso pelo mtodo destroy. Dentro do
mtodo destroy, voc deve desfazer qualquer coisa que seu plugin possa
ter feito desde o incio. O mtodo destroy automaticamente chamado
se o elemento que a instncia do seu plugin est amarrado removido do
DOM, para que isso seja usado para coleo de lixo (garbage collection). O
mtodo destroy padro remove a ligao entre o elemento DOM e a
instncia do plugin, ento importante chamar a funo destroy base
dentro do destroy do seu plugin.

Exemplo 6.9. Adicionando um mtodo destroy um widget

$.widget( "nmk.progressbar", {
options: {
value: 0
},

this.element.addClass("progressbar");
Plugins

this._update();
},

this.options[key] = value; this._update();
},

if (this.options.value == 100 ) {
this._trigger("complete", null, {
value: 100 });
}
},

destroy: function() {
this.element
.removeClass("progressbar")
.text("");
}
});
// chama funo destroy base
$.Widget.prototype.destroy.call(this);
Plugins

Melhores prticas para performance

7. Melhores prticas para
performance

Este captulo cobre um nmero de melhores prticas de jQuery e JavaScript,
sem uma ordem particular. Muitas das melhores prticas neste captulo so
baseadas na apresentao Anti-padres do jQuery para performance
[http://paulirish.com/perf] por Paul Irish.

Armazene o length em loops

Em um loop, no acesse a propriedade length de um array todo tempo;
armazene-o em outra varivel antes de manipula-lo..

var myLength = myArray.length;

for (var i = 0; i < myLength; i++) {
// faz alguma coisa
}

Adicione novo contedo fora de um loop

Tocar o DOM tem um custo; se voc estiver adicionando muitos elementos
ao DOM, faa tudo de uma vez, no um de cada vez.

// isto ruim
$.each(myArray, function(i, item) {
var newListItem = '<li>' + item + '</li>';
$('#ballers').append(newListItem);
});

// melhor: faa isso
var frag = document.createDocumentFragment();

var newListItem = '<li>' + item + '</li>';
frag.appendChild(newListItem);
});
$('#ballers')[0].appendChild(frag);

// ou isso
var myHtml = '';

html += '<li>' + item + '</li>';
});
$('#ballers').html(myHtml);

Mantenha as coisas DRY

Don't repeat yourself; se voc estiver se repetindo, voc est fazendo errado.

// RUIM
if ($eventfade.data('currently') != 'showing') {
$eventfade.stop();
}

if ($eventhover.data('currently') != 'showing') {
$eventhover.stop();
}

if ($spans.data('currently') != 'showing') {
$spans.stop();
}

// BOM!!
var $elems = [$eventfade, $eventhover, $spans];
$.each($elems, function(i,elem) {
if (elem.data('currently') != 'showing') {
elem.stop();
}
});


Cuidado com funes annimas
Funes annimas em todo lugar so dolorosas. Elas so difceis de debugar,
manter, testar ou reusar. Ao invs disso, utilize um literal objeto para
organizar e nomear seus seus manipuladores e callbacks.

// RUIM
$('#magic').click(function(e) {
$('#yayeffects').slideUp(function() {
// ...

});
});

$('#happiness').load(url + ' #unicorns',
function() {
// ...

});
// MELHOR
var PI = {
onReady : function() {
$('#magic').click(PI.candyMtn);
$('#happiness').load(PI.url + ' #unicorns',
PI.unicornCb);
},
candyMtn : function(e) {
$('#yayeffects').slideUp(PI.slideCb);
},slideCb : function() { ... },
unicornCb : function() { ... } };

$(document).ready(PI.onReady);

Otimize seletores

Otimizao de seletores menos importante do que costumava ser, pois mais
navegadores implementam document.querySelectorAll() e a
carga de selecionamento muda do jQuery para o navegador. Entretanto,
ainda h algumas dicas para se manter em mente.


Seletores baseados em ID

Comear seu seletor
com um ID sempre
melhor.

// rpido
$('#container div.robotarm');

// super-rpido
$('#container').fi
nd('div.robotarm')
;

A abordagem $.fn.find mais rpida pois a primeira seleo
manipulada sem passar pelo engine de seleo do Sizzle - selees s com
ID so manipuladas usando document.getElementById(), que
extremamente rpido, pois nativo para o navegador.

Especificidade

Seja especfico no lado direito do seu seletor, e
menos especfico no esquerdo.

// no otimizado
$('div.data .gonzalez');

// otimizado
$('.data td.gonzalez');

Use tag.classe se possvel no seu seletor mais a direita, e somente
tag ou .class na esquerda. Evite especificidade excessiva.
$('.data
table.attendees
td.gonzalez');

// melhor: remova o meio se possvel
$('.data td.gonzalez');

Um DOM "magro" tambm ajuda a melhorar a performance do seletor,
pois a engine de seleo possui poucas camadas para atravessar quando
estiver procurando por um elemento.


Evite o seletor universal

Selees que especificam ou deixam implcito que uma combinao pode
ser encontrada em qualquer lugar pode ser muito lenta.

$('.buttons > *');
// extremamente caro
$('.buttons').children(
); // muito melhor
$('.gender :radio'); // seleo
universo implcita
$('.gender *:radio'); // mesma
coisa, explcito agora
$('.gender
input:radio'); //
muito melhor

Use Delegao de Evento

Delegao de evento permite que voc delegue um manipulador de
evento a um elemento container (uma lista no-ordenada, por exemplo)
ao invs de mltiplos elementos contidos (uma lista de itens, por
exemplo). O jQuery torna isso fcil com $.fn.live e $.fn.delegate. Onde
possvel, voc deve usar
$.fn.delegate ao invs de $.fn.live, de forma que isso elimina a
necessidade de uma seleo desnecessria e seu contexto explcito (vs. o
contexto de $.fn.live do document) reduz a sobrecarga por
aproximadamente 80%.

Em adio aos benefcios de performance, delegao de eventos tambm
permite que voc adicione novos elementos contidos a sua pgina sem ter
que re-delegar os manipuladores de eventos para eles quando so
necessrios.

// ruim (se houver muitos itens de lista)
$('li.trigger').click(handlerFn);

// melhor: delegao de eventos com $.fn.live
$('li.trigger').live('click', handlerFn);

// melhor ainda: delegao de eventos com
$.fn.delegate
// permite que voc especifique um contexto
facilmente
$('#myList').delegate('li.trigger', 'click',
handlerFn);

Desanexe elementos para trabalhar com eles

O DOM lento; voc quer evitar a manipulao o tanto quanto
possvel. O jQuery introduziu o
$.fn.detach na verso 1.4 para ajudar a solucionar este problema,
permitindo que voc remova um elemento do DOM enquanto trabalha com
o mesmo.

var $table = $('#myTable');
var $parent = table.parent();

$table.detach();
// ... adiciona um bocado
de linhas tabela
$parent.append(table);

Use folhas de estilo para mudar o CSS em vrios
elementos

Se voc estiver mudando o CSS de mais de 20 elementos utilizando $.fn.css,
considere adicionar uma tag de estilo pgina para uma melhoria de
performance de aproximadamente 60$.

// tudo certo para at 20 elementos,
lento depois disso
$('a.swedberg').css('
color', '#asd123');
$('<style type="text/css">a.swedberg { color :
#asd123 }</style>')
.appendTo('head');

Use $.data ao invs de $.fn.data

Use $.data num elemento DOM ao invs de chamar $.fn.data numa seleo do jQuery
pode ser at 10 vezes mais rpido. Tenha certeza que voc entendeu a diferena entre um
elemento do DOM e uma seleo do jQuery antes de fazer isso.

// regular
$(elem).data(key,value);

// 10x mais rpido
$.data(elem,key,value);

No faa nada quando no tiver elementos

O jQuery no dir a voc que voc est tentando executar um monte de
cdigo numa seleo vazia - ele vai proceder como se nada estivesse errado.
sua responsabilidade verificar se sua seleo contm alguns elementos.

// RUIM: executa trs funes
// antes de perceber que no a nada a se fazer com
// a seleo
$('#nosuchthing').slideUp();

// MELHOR
var $mySelection = $('#nosuchthing');
if ($mySelection.length) { mySelection.slideUp(); }

// MELHOR AINDA: adiciona um plugin doOnce
jQuery.fn.doOnce = function(func){
this.length && func.apply(this);
return this;

}

$('li.cartitems').doOnce(function(){

// faa com ajax! \o/

});

Este guia especialmente aplicvel para UI widgets do jQuery, que
possuem muita sobrecarga mesmo quando a seleo no contm elementos.


Definio de Varivel

Variveis podem ser definidas em uma
declarao ao invs de vrias.

/
/

var test = 1;
var test2 = function() { ... };
var test3 = test2(test);

/
/

=

1
,
test2 = function() { ... }, test3 =
test2(test);

Em funes auto-executveis, podem ser puladas todas as definies de
variveis.

(function(foo, bar) { ... })(1, 2);

Condicionais

// forma antiga
if (type == 'foo' || type == 'bar') { ... }

// melhor
if (/^(foo|bar)$/.test(type)) { ... }

// procura por literal objeto
if (({ foo : 1, bar : 1 })[type]) { ... }


8. Organizao de cdigo

Viso Geral

Quando voc vai alm de adicionar melhorias simples em seu website com jQuery e comea
a desenvolver aplicaes client-side completas, voc precisa considerar como organizar
seu cdigo. Neste captulo, ns iremos dar uma olhada em vrios padres para
organizao de cdigo que voc pode utilizar em usa aplicao com jQuery e explorar o
gerenciador de dependncias e sistema de build RequireJS.

Conceitos Chave

Antes de irmos para os padres de organizao de cdigo, importante entender alguns
conceitos que so comuns a todos bons padres de de organizao de cdigo.

Seu cdigo deve ser dividido em unidades de funcionalidade - mdulos, servios, etc.
Evite a tentao de ter todo seu cdigo em um enorme bloco dentro do
$(document).ready().

No se repita. Identifique similaridades entre pedaos de funcionalidade e use tcnicas
de herana para evitar cdigo repetitivo.

Apesar da natureza centrada no DOM do jQuery, aplicaes em JavaScript no so s
sobre o DOM.

Lembre-se que no so todas as funcionalidades que necessitam - ou devem - ter uma
representao no DOM.

Unidades de funcionalidade devem ser fracamente acopladas
[http://en.wikipedia.org/wiki/ Loose_coupling] uma unidade de funcionalidade deve
conseguir existir por si s, e comunicao entre unidades devem ser manipuladas atravs de
um sistema de mensagens, como eventos customizados ou pub/sub. Evite comunicao
direta entre unidades de funcionalidade sempre que possvel.

Unidades de funcionalidade devem ser divididas em pequenos mdodos que fazem
exatamente uma s coisa. Se seus mtodos so maiores que algumas linhas, voc deve
considerar uma refatorao.

Opes de configurao para suas unidades de funcionalidade - URLS, strings,


timeouts, etc. - devem ser informadas em propriedades ou em um objeto de configurao,
no espalhadas atravs do cdigo.

O conceito de baixo acoplamento pode ser especialmente problemtico para
desenvolvedores fazendo sua primeira investida em aplicaes complexas, ento preste
ateno nisso quando voc estiver comeando.

Encapsulamento

O primeiro passo para organizao de cdigo separar as partes de sua aplicao em
peas distintas;
algumas vezes, mesmo este esforo
suficiente para ceder

O literal objeto

Um literal objeto talvez a forma mais simples de encapsular cdigo relacionado. Ele no
oferece nenhuma privacidade para propriedades ou mtodos, mas til para eliminar
funes annimas do seu cdigo, centralizar opes de configurao e facilitar o caminho
para o reuso e refatorao.
Organizao de cdigo

Exemplo 8.1. Um literal objeto

var myFeature = {
myProperty : 'ol',

myMethod : function() {
console.log(myFeature.myProperty);
},

init : function(settings) {
myFeature.settings = settings;
},

readSettings : function() {
console.log(myFeature.settings);
}
};

myFeature.myProperty; // 'ol'
myFeature.myMethod(); // loga
'ol' myFeature.init({ foo :
'bar' });
myFeature.readSettings(); //
loga { foo : 'bar' }

O literal objeto acima simplesmente um objeto associado a uma varivel. O objeto tem
uma propriedade e vrios mtodos. Todas as propriedades e mtodos so pblicas, ento
qualquer parte da sua aplicao pode ver as as propriedades e chamar mtodos no objeto.
Enquanto h um mtodo init. no h nada requerendo que ele seja chamado antes do
objeto estar funcional.

Como aplicaramos este padro no cdigo com jQuery? Vamos dizer que ns temos este
cdigo escrito no estilo tradicional do jQuery:

// carrega algum contedo ao clicar num item da
lista
// utilizando o ID do item da lista e esconde
contedo
// em itens de lista similares
$('#myFeature li')
.append('<div/>')
.click(function() {
Organizao de cdigo

var $div = $this.find('div');
$div.load('foo.php?item=' +
$this.attr('id'), function() {
$div.show();
$this.siblings()
.find('div').hide();
});
}
);
});

A primeira coisa que voc ir perceber que esta abordagem obviamente muito maior
que a original
- novamente, se isso for extender nossa aplicao, o uso do literal objeto no ir fazer
sentido algum. Embora assumindo que no vai extender nossa aplicao, ns ganhamos
vrias coisas:

Ns quebramos nossas funcionalidaes em mtodos pequenos; no futuro, se ns
precisarmos mudar como o contedo mostrado, claro onde ns iremos mudar. No
cdigo original, este passo muito mais difcil para se localizar.

Ns eliminamos o uso de funes annimas.

Ns movemos as opes de configurao para fora do corpo do cdigo e colocamos em
uma localizao central.

Ns eliminamos as restries do encadeamento, fazendo o cdigo mais refatorvel,
modificvel e rearranjvel.

Para funcionalidades no triviais, literais de objeto so uma clara melhora sobre o longo
pedao de cdigo dentro do bloco $(document).ready(), de forma nos leva a pensar sobre
pedaos de funcionalidade. Entretanto, eles no so muito mais avanados do que ter um
monte de declaraes de funes dentro do bloco $(document).ready().

O Module Pattern

O module pattern supera algumas das limitaes do literal objeto,
oferecendo privacidade para variveis e funes enquanto expe uma API
pblica se assim for necessrio.

Exemplo 8.1. O module pattern

var featureCreator = function() {
var privateThing = 'segredo',
publicThing = 'no segredo',
Organizao de cdigo

changePrivateThing =
function() {
privateThing = 'super
secreto';
},

sayPrivateThing = function() {
console.log(privateThing);
changePrivateThing();
};

return {
publicThing : publicThing,
sayPrivateThing :
sayPrivateThing
}
};

var feature = featureCreator(); feature.publicThing;
// 'no segredo' feature.sayPrivateThing();
// loga 'segredo' e muda o valor de
// privateThing

No exemplo acima, ns criamos uma funo featureCreator que retorna um
objeto. Dentro da funo, ns definimos algumas variveis. Pelo fato das
variveis estarem definidas dentro da funo, ns no temos

acesso ela fora da funo, a no ser que ns coloquemos no objeto de
retorno. Isto significa que nenhum cdigo externo da funo tem acesso
varivel privateThing ou a funo changePrivateThing. Entretando,
sayPrivateThing tem acesso a privateThing e changePrivateThing, por causa
que ambas foram definidas no mesmo escopo de sayPrivateThing.

Este padro poderoso pois, da mesma forma que voc pode obter dos
nomes de variveis, ele pode dar a voc variveis privadas e funes
enquanto expe uma API limitada consistindo das propriedades retornadas
dos objetos e mtodos.

Abaixo temos uma verso revisada do exemplo anterior, mostrando como
poderamos criar a mesma funcionalidade utilizando o module pattern e
somente expondo um mtodo pblico do mdulo, showItemByIndex().
Organizao de cdigo

Gerenciando dependncias

Nota

Esta seo fortemente baseada na excelente documentao do
RequireJS disponvel em http://
requirejs.org/docs/jquery.html, e usada com permisso do autor do
RequireJS, James Burke.

Quando um projeto alcana um determinado tamanho, gerenciar modulos de
scripts comea a ficar complicado. Voc precisa ter certeza da seqncia
correta dos scripts e voc comea a pensar seriamente em combinar scripts
em um nico arquivo, para que somente uma ou um nmero pequeno de
requisies sejam feitas para carregar os scripts. Voc pode tambm carregar
cdigo assim que necessrio, depois que a pgina carregar.

O RequireJS uma ferramenta para gerenciamento de dependncias feita
pelo James Burke e pode lhe ajudar a gerenciar mdulos de scripts, carrega-
los na ordem correta e tornar fcil a combinao de scripts mais tarde atravs
de uma ferramenta prpria de otimizao, sem necessidade de alterar seu
cdigo de marcao. Ele tambm lhe fornece um meio fcil de carregar os
scripts depois da pgina ter carregado, permitindo que voc distribua o
tamanho do download atravs do tempo.

O RequireJS tem um sistema de mdulos que permite que voc defina
mdulos com escopo bem definido, mas voc no precisa seguir o sistema
para obter os benefcios do gerenciamento de dependncias e otimizaes
em tempo de build. Com o tempo, se voc comear a criar cdigo mais
modular que precisa ser reutilizado em algumas outras partes, o formato de
mdulo do RequireJS torna fcil escrever cdigo encapsulado que pode ser
carregado sob demanda. Ele pode crescer com sua aplicao, particularmente
se voc deseja incorporar strings de internacionalizao (i18n), para que seu
projeto funcione em lnguas diferentes, ou carregar algumas strings HTML e
ter certeza que estas strings esto disponveis antes de executar o cdigo, ou
mesmo usar servicos JSONP como dependncias.

Obtendo o RequireJS

A forma mais fcil de usar o RequireJS com jQuery baixando um build do
jQuery que j tem o RequireJS embutido
[http://requirejs.org/docs/download.html]. Este build exclui pores do
RequireJS que duplicam funcionalidades do jQuery. Voc tambm pode
achar til baixar um projeto jQuery de amostra que utiliza o RequireJS
[http://requirejs.org/docs/release/0.9.0/jquery-require-sample.zip].

Organizao de cdigo

Utilizando o RequireJS com jQuery

Utilizar o RequireJS na sua pgina simples: inclua o jQuery que tenha o RequireJS
embutido e depois faa a requisio dos arquivos da sua aplicao. O exemplo a seguir
assume que o jQuery e seus outros scripts estejam todos no diretrio scripts/.

Exemplo 8.3. Utilizando o RequireJS: Um exemplo simples

<!DOCTYPE html>
<html>
<head>
<title>jQuery+RequireJS Sample Page</title>
<script src="scripts/require-
jquery.js"></script>
<script>require(["app"]);</script>
</head>
<body>
<h1>jQuery+RequireJS Sample Page</h1>
</body>
</html>

A chamada require(["app"]) fala para o RequireJS carregar o arquivo
scripts/app.js. O RequireJS ir carregar todas as dependncias que passada para
o require() sem a extenso .js do mesmo diretrio do require-jquery.js,
apesar que isto pode ser configurado para se comportar de forma diferente. Se voc se
sentir mais confortvel ao especificar o caminho completo, voc pode fazer o seguinte:

<script>require(["scripts/app.js"])
;</script>

O que h em app.js? Outra chamada para o require.js carregar todos os scripts que
voc precisa e todo trabalho inicial que voc quer para a pgina. Neste exemplo, o script
app.js carrega dois plugins, jquery.alpha.js e jquery.beta.js (no o
nome real dos plugins, somente um exemplo). Os plugins devem estar no mesmo diretrio
do require-jquery.js:

Exemplo 8.4. Um simples arquivo JavaScript com dependncias

require(["jquery.alpha",
"jquery.beta"], function() {
//os plugins jquery.alpha.js e jquery.beta.js
foram carregados.
$(function() {
$('body').alpha().beta();
});
});
Organizao de cdigo

Criando mdulos reusveis com RequireJS

RequireJS torna fcil a dafinio de mdulos reusveis via require.def(). Um
mdulo RequireJS pode ter dependncias que podem ser usadas para definir um mdulo e
um mdulo RequireJS pode retornar um valor - um objeto, uma funo, o que for - que
pode ser consumido por outros mdulos.

Se seu mdulo no tiver nenhuma dependncia, ento simplesmente especifique o nome do
mdulo como primeiro argumento do require.def(). O segundo argumento
somente um literal objeto que define as propriedades do mdulo. Por exemplo:
Organizao de cdigo

Exemplo 8.5. Definindo um mdulo do RequireJS que no tem
dependncias
require.def("my/simpleshirt",
{
color: "black", size: "unisize"
}
);
Este exemplo seria melhor armazenado no arquivo
my/simpleshirt.js.
Se seu mdulo possui dependncias, voc pode especifica-las como segundo argumento
para require.def() (como um array) e ento passar uma funo como terceiro
argumento. A funo ser chamada para definir o mdulo quando todas as dependncias
tiverem sido carregadas. A funo recebe os valores retornados pelas dependncias como
seus argumentos. (na mesma ordem que elas so requeridas no array), e a funo deve
retornar um objeto que define o mdulo.
Exemplo 8.6. Definindo um mdulo do RequireJS com dependncias
require.def("my/shirt", ["my/cart", "my/inventory"],
function(cart, inventory) {
//retorna um objeto para definir
o mdulo "my/shirt". return {
color: "blue", size: "large"
addToCart: function() { inventory.decrement(this);
cart.add(this);
}
}
}
);
Neste exemplo, um mdulo my/shirt criado. Ele depende de my/cart e
my/inventory. No disco, os arquivos so estruturados assim:
my/cart.js my/inventory.js my/shirt.js
A funo que define my/shirt no chamada at que os mdulos
my/cart e my/inventory sejam
carregados, e a funo recebe os mdulos como argumentos cart e
inventory. A ordem que dos
argumentos da funo precisam combinar com a ordem em que as
dependncias foram requiridas no array
de dependncias. O objeto retornado pela chamada da funo define o
mdulo my/shirt. Por definir os mdulos dessa forma, my/shirt no
existe como um objeto global. Mdulos que definem globais so
explicitamente desencorajados, ento mltiplas verses de um mdulo
podem existir na pgina ao mesmo tempo.
Mdulos no precisam retornar objetos; qualquer retorno vlido a
partir de uma funo permitido.
Organizao de cdigo

Exemplo 8.9. Definindo um mdulo do RequireJS que retorna uma
funo

require.def("my/title",
["my/dependency1", "my/dependency2"],

function(dep1, dep2) {
//retorna uma funo para definir
"my/title". Ele obtm ou muda
//o ttulo da janela. return function(title) {
return title ? (window.title = title) :
window.title;
}
}
);
Somente um mdulo deve ser requerido por arquivo JavaScript.

Otimizando seu cdigo: A ferramenta de build do RequireJS

Uma vez que voc incorporou o RequireJS para gerenciamento de dependncia, sua
pgina est configurada para ser otimizada bem facilmente. Baixe o cdigo fonte do
RequireJS e coloque onde voc quiser, preferencialmente em um lugar fora da sua rea de
desenvolvimento. Para os propsitos deste exemplo, o fonte do RequireJS colocado num
diretrio irmo do webapp, que contm a pgina HTML e o diretrio de scripts com
todos os scripts. Estrutura completa do diretrio:

requirejs/ (utilizado pelas ferramentas de build)
webapp/app.html webapp/scripts/app.js webapp/scripts/require-
jquery.js webapp/scripts/jquery.alpha.js
webapp/scripts/jquery.beta.js

Ento, nos diretrios de scripts que tem o require-jquery.js e
app.js, crie um arquivo chamado app.build.js com o seguinte contedo:

Organizao de cdigo

Exemplo 8.8. Um arquivo de configurao de build do RequireJS

{
appDir: "../", baseUrl: "scripts/",
dir: "../../webapp-build",
//Comente a linha de otimizao se voc quer
//o cdigo minificado pelo Compilador Closure
Compiler utilizando
//o modo de
otimizao
"simple"
optimize:
"none",

modules: [
{
name: "app"
}
]
}

Para usar a ferramenta de build, voc precisa do Java6 instalado. O Compilador Closure
usado para o passo de minificao do JavaScirpt (se optimize: "none" estiver
comentado), e requer o Java 4.

Para iniciar o buid, v no diretrio webapp/scripts, e execute o
seguinte comando:

# sistemas no-windows
../../requirejs/build/bu
ild.sh app.build.js

# sistemas windows
..\..\requirejs\build\bui
ld.bat app.build.js

Agora, no diretrio webapp-build, app.js ter o contedo de app.js,
jquery.alpha.js e jquery.beta.js numa s linha. Ento, se voc
carregar o arquivo app.html no diretrio webapp-build, voc no dever ver
nenhuma requisio de rede para jquery.alpha.js e jquery.beta.js.
Organizao de cdigo

9. Eventos Customizados
Introduo Eventos Customizados

Ns todos estamos familiares com eventos bsicos - click, mouseover, focus,
blur, submit, etc. - estes que ns podemos usar para interaes entre o
usurio e o navegador. Eventos customizados abrem um mundo
completamente novo de programao orientada a eventos. Neste captulo, ns
iremos utilizar o sistema de eventos customizados do jQuery para fazer uma
aplicao de busca simples no Twitter.

Pode ser difcil primeira instncia entender por que voc iria querer utilizar
eventos customizados, quando os eventos j prontos parecem satisfazer bem
suas necessidades. Acontece que eventos customizados oferecem um jeito
completamente novo de pensar sobre JavaScript orientado a eventos. Ao
invs de focar no elemento que dispara uma ao, eventos customizados
colocam o holoforte no elemento em ao. Isso traz muitos benefcios,
incluindo:

Comportamentos do elemento alvo podem ser facilmente disparados por
elementos diferentes utilizando o mesmo cdigo.

Comportamentos podem ser disparados atravs de elementos-alvo
mltiplos e similares de uma vez.

Comportamentos podem ser mais facilmente associados com o elemento
alvo no cdigo, tornando o cdigo mais fcil de ler e manter.

Por que voc deveria se importar? Um exemplo provavelmente a melhor
forma de explicar. Suponha que voc tenha uma lmpada num quarto na
casa. A lmpada est ligada e ela controlada por dois switches de trs vias
e um clapper:

<div class="room" id="kitchen">
<div class="lightbulb on"></div>
<div class="switch"></div>
<div class="clapper"></div>
</div>

Organizao de cdigo

O estado da lmpada ir mudar disparando o clapper ou mesmo os switches.
Os switches e o clapper no se importam em qual estado a lmpada est; eles
somente querem mudar o estado.

Sem eventos customizados, voc talvez
poderia escrever algo assim:

$('.switch,
.clapper').click(funct
ion() {
var $light =
$(this).parent().find('.lightbulb');
if ($light.hasClass('on')) {
$light.removeClass('on
').addClass('off');
} else {
$light.removeClass('of
f').addClass('on');
}
});

Com eventos customizados, seu cdigo pode ficar parecido com este:

$('.lightbulb').bind('changeState', function(e) {
var $light = $(this);
$light.removeClass('on').addClass('off');
} else {
$light.removeClass('off').addClass('on');
}
});

$('.switch, .clapper').click(function() {
$(this).parent().find('.lightbulb').trigger('changeS
tate');
});

Este ltimo pedao de cdigo no l essas coisas, mas algo importante
aconteceu: ns movemos o comportamento da lmpada para a lmpada, e
ficamos longe dos switches e do clapper.

Vamos tornar nosso exemplo um pouco mais interessante. Ns vamos
adicionar outro quarto nossa casa, junto com o switch mestre, como
mostrado a seguir:

Organizao de cdigo

<div class="room" id="kitchen">
</div>
<div class="room" id="bedroom">
</div>
<div id="master_switch"></div>

Se h vrias luzes na casa, ns queremos que o switch mestre desligue todas
as luzes; de outra forma, ns queremos todas as luzes acesas. Para fazer isso,
ns iremos adicionar dois ou mais eventos customizados s lmpadas:
turnOn e turnOff. Ns iremos fazer uso deles no evento customizado
changeState, e usar alguma lgica para decidir qual que o switch mestre
vai disparar:

$('.lightbulb')
.bind('changeState', function(e) {
var $light = $(this);
$light.trigger('turnOff');
} else {
$light.trigger('turnOn');
}
})
.bind('turnOn', function(e) {
$(this).removeClass('off').addClass('on');
})
.bind('turnOff', function(e) {
$(this).removeClass('off').addClass('on');
});

$('.switch, .clapper').click(function() {
$(this).parent().find('.lightbulb').trigger('cha
ngeState');
});

$('#master_switch').click(function() {

Organizao de cdigo

if ($('.lightbulb.on').length) {
$('.lightbulb').trigger('turnOff');
} else {
$('.lightbulb').trigger('turnOn');
}
});

A - Jquery

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

A - Jquery

Uploaded by

Copyright:

Available Formats

MasterTraining

You might also like