jQuery

Captulo 01

Introduo
A jQuery uma biblioteca JavaScript, cross-browser,
desenvolvida por John Resig. Foi lanada em janeiro de 2006,
e se tornou uma das bibliotecas JavaScript mais populares da
internet.
A biblioteca disponibilizada como software livre e
disponibilizada sobre as regras das licenas MIT e GPL. Ou
seja, uma biblioteca que pode ser utilizada tanto para
projetos pessoais como para projetos comerciais, sem a
necessidade de pagar qualquer tipo de licena de uso.

Introduo
Foi criada tendo como foco a simplicidade e com o objetivo
de facilitar a programao JavaScript. Programas que
utilizariam linhas e mais linhas de cdigo para obter um
determinado efeito ou carregar um componente AJAX, so
substitudos por poucas instrues utilizando jQuery o que
permite o uso dela por designers e desenvolvedores com
pouco conhecimento de JavaScript.

Introduo
jQuery no uma nova linguagem de programao, antes,
trata-se de uma compilao do JavaScript. Para utiliz-la,
basta referenciar o arquivo .js do jQuery em sua pgina e voc
j pode usar esta linguagem com prazer.
Recomenda-se que todo o cdigo produzido tambm esteja
em um arquivo externo; isso diminu o tamanho final de sua
pgina HTML e tambm assegura que o cdigo no ficar
exposto, tornando as coisas mais fcies, caso voc queira
mudar um cdigo que aparea em todas as suas pginas

Para que serve?

A jQuery pode ser utilizada para:

adicionar efeitos visuais e animaes;

acessar e manipular o DOM;
carregar componentes AJAX;
prover interatividade;
alterar contedos;
simplificar tarefas JavaScript.

Compatibilidade
A jQuery foi criada para ser uma biblioteca compatvel com
qualquer navegador Web. Ela resolve para o programador a
penosa tarefa de desenvolver programas em JavaScript tendo
que prever a enorme gama de navegadores em que sua pgina
poder rodar.
Sabemos que cada navegador tem seu prprio conjunto de
caractersticas de implementao, que ainda podem variar de
acordo com a plataforma e sistema operacional onde estiver
rodando.
Com a jQuery, a programao nica e transparente.

Compatibilidade
A jQuery foi criada para ser uma biblioteca compatvel com
qualquer navegador Web. Ela resolve para o programador a
penosa tarefa de desenvolver programas em JavaScript tendo
que prever a enorme gama de navegadores em que sua pgina
poder rodar.
Sabemos que cada navegador tem seu prprio conjunto de
caractersticas de implementao, que ainda podem variar de
acordo com a plataforma e sistema operacional onde estiver
rodando.
Com a jQuery, a programao nica e transparente.

Obtendo e instalando a
jQuery
A query pode ser obtida gratuitamente no site http://jquery.
com/. Na pgina principal, no lado direito da pgina h um boto
de Download (jQuery) onde podemos escolher entre duas
verses:

Obtendo e instalando a
jQuery
PRODUCTION : a verso voltada para ambiente de produo.
uma verso com o cdigo em formato minimizado, sem quebras
de linha e com o cdigo obscurecido. Essa verso tem em torno
de 15% do tamanho da verso de Desenvolvimento
(DEVELOPMENT).
DEVELOPMENT: a verso de desenvolvimento. a verso no
compactada da bibliteca e com o cdigo no obscurecido. ideal
para ambientes de desenvolvimento por se integrar facilmente
s ferramentas e IDEs.

Obtendo e instalando a
jQuery
Basta escolher a verso que voc deseja baixar e clicar em
Download. A biblioteca abrir em formato de cdigo JavaScript
no prprio navegador, e voc dever clicar em Arquivo > Salvar e
guardar a biblioteca na sua pasta de desenvolvimento.
Usualmente guardamos a biblioteca com o nome jquery-1.11.1.
min.js quando for a verso compactada, ou com o nome jquery1.11.1.js quando for a verso de desenvolvimento.
Preferencialmente, salve a jQuery em uma pasta "js" dentro da
sua pasta principal de desenvolvimento, ou na raiz do seu site.

$(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.

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.

Atalho para $(document).ready()

$(function() {
console.log('pronto!');
});
Voc ainda pode passar uma funo nomeada para
$(document).ready() ao invs de passar uma funo annima.

Passando uma funo nomeada

ao invs de uma annima
function readyFn()
{
// cdigo para executar quando o documento estiver pronto
}
$(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.

Selecionando elementos por ID

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

Selecionando elementos pelo

nome da classe
$('div.myClass'); // h um aumento de performance se voc
// especificar o tipo de elemento.

Selecionando elementos por

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

Selecionando elementos atravs

da composio de seletores CSS
$('#contents ul.people li');

Pseudo-seletores
$('a.external:first');
$('tr:odd');
$('#myForm :input'); // selecione todos os elementos input num formulrio
$('div:visible');
$('div:gt(2)'); // todos exceto as trs primeiras divs
$('div:animated'); // todas as divs com animao

Pseudo-seletores
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.

Pseudo-seletores
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).

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

Pseudo-seletores
jQuery.expr.filters.hidden = 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

// 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.

Escolhendo seletores
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']");

Escolhendo seletores
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.

Escolhendo seletores
Quer saber mais? Paul Irish (http://www.paulirish.com/2009/perf/) tem uma
excelente apresentao sobre melhorar a performance do JavaScript, com
vrios slides focando especificamente em performace de seletores.

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'))
{
...
}

Minha seleo contm algum

elemento?
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.

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.

Armazenando selees em
variveis
var $divs = $('div');
No , 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://pt.
wikipedia.org/wiki/Nota%C3%A7%C3%A3o_h%C3%BAngara) -- meramente
uma conveno, e no obrigatria.

Armazenando selees em
variveis
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.

Refinando selees
$('div.foo').has('p');
// o elemento div.foo que contm <p&gt`s
$('h1').not('.bar');
// elementos h1 que no tm a classe bar
$('ul li').filter('.current'); // itens de listas no-ordenadas com a classe current
$('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.

Seletores relacionados
formulrios
:button
Seleciona elementos do tipo <button> e elementos com type="button"
:checkbox
Seleciona inputs com type="checkbox"
:checked
Seleciona inputs selecionados
:disabled
Seleciona elementos de formulrio desabilitados
:enabled
Seleciona elementos de formulrio habilitados

Seletores relacionados
formulrios
:file
Seleciona inputs com type="file"
:image
Seleciona inputs com type="image"
:input
Seleciona <input>, <textarea>, e elementos <select>
:password
Seleciona inputs com type="password"

Seletores relacionados
formulrios
:radio
Seleciona inputs com type="radio"
:reset
Seleciona inputs com type="reset"
:selected
Seleciona inputs que esto selecionados
:submit
Seleciona inputs com type="submit"
:text
Seleciona inputs com type="text"

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.
$('#content').find('h3').eq(2).html('o novo texto do terceiro h3!');

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.

Formatando cdigo
encadeado
$('#content')
.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.

Restaurando sua seleo

original usando $.fn.end
$('#content')
.find('h3')
.eq(2)
.html('novo texto para o terceiro h3!')
.end() // restaura a seleo para todos h3 em #context
.eq(0)
.html('novo texto para o primeiro h3!');

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.
Quando um mtodo usado para setar um valor, ele chamado de setter.
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.

O mtodo $.fn.html usado

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

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.