You are on page 1of 49

jQuery

Capítulo 01

Introdução
• A jQuery é uma biblioteca JavaScript, cross-browser,
desenvolvida por John Resig. Foi lançada 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 licenças 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 licença de uso.

Introdução
• Foi criada tendo como foco a simplicidade e com o objetivo
de facilitar a programação JavaScript. Programas que
utilizariam linhas e mais linhas de código para obter um
determinado efeito ou carregar um componente AJAX, são
substituídos por poucas instruções utilizando jQuery o que
permite o uso dela por designers e desenvolvedores com
pouco conhecimento de JavaScript.

js do jQuery em sua página e você já pode usar esta linguagem com prazer. isso diminuí o tamanho final de sua página HTML e também assegura que o código não ficará exposto.Introdução • jQuery não é uma nova linguagem de programação. tornando as coisas mais fácies. basta referenciar o arquivo . antes. • Recomenda-se que todo o código produzido também esteja em um arquivo externo. trata-se de uma compilação do JavaScript. caso você queira mudar um código que apareça em todas as suas páginas . Para utilizá-la.

carregar componentes AJAX. prover interatividade. acessar e manipular o DOM.Para que serve? A jQuery pode ser utilizada para: – – – – – – adicionar efeitos visuais e animações. simplificar tarefas JavaScript. alterar conteúdos. .

Sabemos que cada navegador tem seu próprio conjunto de características de implementação. a programação é única e transparente.Compatibilidade A jQuery foi criada para ser uma biblioteca compatível com qualquer navegador Web. Com a jQuery. que ainda podem variar de acordo com a plataforma e sistema operacional onde estiver rodando. Ela resolve para o programador a penosa tarefa de desenvolver programas em JavaScript tendo que prever a enorme gama de navegadores em que sua página poderá rodar. .

Compatibilidade A jQuery foi criada para ser uma biblioteca compatível com qualquer navegador Web. . Sabemos que cada navegador tem seu próprio conjunto de características de implementação. Ela resolve para o programador a penosa tarefa de desenvolver programas em JavaScript tendo que prever a enorme gama de navegadores em que sua página poderá rodar. que ainda podem variar de acordo com a plataforma e sistema operacional onde estiver rodando. Com a jQuery. a programação é única e transparente.

Na página principal.Obtendo e instalando a jQuery A query pode ser obtida gratuitamente no site http://jquery. no lado direito da página há um botão de Download (jQuery) onde podemos escolher entre duas versões: . com/.

DEVELOPMENT: a versão de desenvolvimento. É uma versão com o código em formato minimizado. sem quebras de linha e com o código obscurecido. É ideal para ambientes de desenvolvimento por se integrar facilmente às ferramentas e IDEs. Essa versão tem em torno de 15% do tamanho da versão de Desenvolvimento (DEVELOPMENT).Obtendo e instalando a jQuery PRODUCTION : a versão voltada para ambiente de produção. É a versão não compactada da bibliteca e com o código não obscurecido. .

Obtendo e instalando a jQuery Basta escolher a versão que você deseja baixar e clicar em Download. Preferencialmente.js quando for a versão de desenvolvimento.1.1. e você deverá clicar em Arquivo > Salvar e guardar a biblioteca na sua pasta de desenvolvimento. ou na raiz do seu site.11. salve a jQuery em uma pasta "js" dentro da sua pasta principal de desenvolvimento. . A biblioteca abrirá em formato de código JavaScript no próprio navegador.11.js quando for a versão compactada. min. Usualmente guardamos a biblioteca com o nome jquery-1. ou com o nome jquery1.

ready() Você não pode manipular a página com segurança até o documento estar "pronto" (ready). . O jQuery detecta o estado de prontidão para você. o código incluido dentro de $(document).ready() somente irá rodar depois que a página estiver pronta executar o código JavaScript.$(document).

log('pronto!'). . Há um atalho para $(document). entretando.ready() que você verá algumas vezes.ready(function() { console. eu não recomendo usá-lo se você estiver escrevendo código que pessoas que não têm experiência com jQuery poderá ver.Um bloco $(document).ready() $(document). }).

ready() $(function() { console. }). Você ainda pode passar uma função nomeada para $(document). .Atalho para $(document).log('pronto!').ready() ao invés de passar uma função anônima.

.ready(readyFn).Passando uma função nomeada ao invés de uma anônima function readyFn() { // código para executar quando o documento estiver pronto } $(document).

A seguir." O jQuery suporta a maioria dos seletores CSS3. Para uma referência completa de seletores. .Selecionando elementos O conceito mais básico do jQuery é "selecionar alguns elementos e fazer alguma coisa com eles.jquery. visite http://api. assim como alguns seletores não-padrão.com/category/selectors/. alguns exemplos de técnicas comuns de seleção.

Selecionando elementos por ID $('#myId'). // lembre-se que os IDs devem ser únicos por página .

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]'). isto pode ser muito lento . // cuidado.

.people li').Selecionando elementos através da composição de seletores CSS $('#contents ul.

$('tr:odd'). $('div:gt(2)').external:first'). // selecione todos os elementos input num formulário $('div:visible').Pseudo-seletores $('a. $('#myForm :input'). // todas as divs com animação . // todos exceto as três primeiras divs $('div:animated').

. o jQuery testa a visibilidade atual do elemento. ele olha se a altura e a largura física do elemento na página são ambas maiores que zero. não os atributos visibility ou display do CSS ou seja.Pseudo-seletores Quando você usa os pseudos-seletores :visible e :hidden.

este teste não funciona com elementos <tr>. Elementos que não forem adicionados no DOM serão sempre considerados ocultos. . (Consulte a seção de Manipulação mais adiante neste capítulo para aprender como criar e adicionar elementos ao DOM). mesmo que o CSS que os afetam torná-los visíveis. e considera um elemento como oculto se sua propriedade display for none.Pseudo-seletores No entanto. o jQuery faz a verificação da propriedade display do CSS. neste caso.

Pseudo-seletores Para referência. com os comentários adicionados para maior esclarecimento: . aqui está o código que jQuery usa para determinar se um elemento é visível ou oculto.

offsetWidth. o elemento tem largura // e altura. offsetHeight.hidden( elem ).expr. // então verifica a propriedade display para // decidir se ele esta escondido jQuery.filters. skip = elem. mas também é uma <tr>.toLowerCase() === "tr".Pseudo-seletores jQuery. "display") === "none".expr.curCSS(elem. jQuery. }. }.hidden = function( elem ) { var width = elem. .visible = function( elem ) { return !jQuery.filters. // o elemento tem 0 de altura e 0 de largura e // não é uma <tr>? return width === 0 && height === 0 && !skip ? // então deve estar escondido true : // mas se o elemento tiver largura e altura // e não for uma <tr> width > 0 && height > 0 && !skip ? // então deve estar visível false : // se chamos aqui.expr. height = elem.filters.nodeName.

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

// encontre todos elementos <a>s em que o atributo // rel termine com "thinger" $("a[rel$='thinger']"). .Escolhendo seletores O jQuery oferece muitos seletores baseados em atributo. permitindo que você selecione elementos baseados no conteúdo de atributos arbitrários usando expressões regulares simplificadas.

faça suas seleções usando IDs. . Sempre que possível. nomes de classe e nomes de tags.Escolhendo seletores Se por um lado estes seletores podem ser bem úteis.Uma vez eu escrevi um seletor baseado em atributos que travou minha página por múltiplos segundos. eles também podem ser extremamente lerdos .

com vários slides focando especificamente em performace de seletores.paulirish. .Escolhendo seletores Quer saber mais? Paul Irish (http://www.com/2009/perf/) tem uma excelente apresentação sobre melhorar a performance do JavaScript.

. } .foo')) { . você irá querer saber se há algo para trabalhar com ela. Você talvez se sinta tentado a fazer algo assim: if ($('div.Minha seleção contém algum elemento? Uma vez que você fez uma seleção..

a propriedade length será interpretada como falso quando usada como um valor booleano. você precisa testar a propriedade length da seleção. o código dentro do if vai executar do mesmo jeito. Ao invés disso. Quando você faz uma seleção usando $().Minha seleção contém algum elemento? Isso não irá funcionar. um objeto é sempre retornado. Se a resposta for 0. Mesmo se sua seleção não tiver nenhum elemento. e objetos sempre são tratados como true. que diz a você quantos elementos foram selecionados. .

foo').. if ($('div. } ..length) { .Testando se uma seleção contém elementos.

. Se você fez uma seleção que você talvez precise fazer novamente.Salvando seleções Toda vez que você faz uma seleção. um monte de código é executado. e o jQuery não faz caching de seleções para você. você deve salvar a seleção numa variável ao invés de fazer a seleção várias vezes.

um tipo de Notação Húngara (http://pt. No . Ao invés de outras linguagens.Armazenando seleções em variáveis var $divs = $('div').é meramente uma convenção. . Nós o usamos para indicar que a varíavel contém um objeto jQuery.org/wiki/Nota%C3%A7%C3%A3o_h%C3%BAngara) -. Esta prática -. não há nada especial sobre o sinal de dólar em JavaScript -. o nome da variável começa com um sinal de dólar. wikipedia.é apenas outro caracter. e não é obrigatória.

você pode chamar os métodos do jQuery na variável que você armazenou. . da mesma forma que você faria na seleção original. Uma seleção somente obtém os elementos que estão na página quando você faz a seleção. Se você adicionar elementos na página depois.Armazenando seleções em variáveis Uma vez que você armazenou sua seleção. você terá que repetir a seleção ou então adicioná-la à seleção armazenada na variável. Seleções armazenadas não atualizam automaticamente quando o DOM muda.

Refinando & Filtrando Seleções Algumas vezes você tem uma seleção que contém mais do que você quer. . você talvez queira refinar sua seleção. neste caso. O jQuery oferece vários métodos para você obter exatamente o que precisa.

eq(5).foo').bar').has('p').filter('.first(). // elementos h1 que não têm a classe bar $('ul li').current').not('.Refinando seleções $('div. // o sexto item da lista . // itens de listas não-ordenadas com a classe current $('ul li').foo que contém <p&gt`s $('h1'). // o elemento div. // somente o primeiro item da lista não ordenada $('ul li').

Seletores relacionados à formulários O jQuery oferece vários pseudo-seletores que lhe ajudam a encontrar elementos nos seus formulários. estes são especialmente úteis porque pode ser difícil distinguir entre elementos form baseados no seu estado ou tipo usando seletores CSS padrão. .

Seletores relacionados à formulários :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 formulário desabilitados :enabled Seleciona elementos de formulário habilitados .

Seletores relacionados à formulários :file Seleciona inputs com type="file" :image Seleciona inputs com type="image" :input Seleciona <input>. e elementos <select> :password Seleciona inputs com type="password" . <textarea>.

Seletores relacionados à formulários :radio Seleciona inputs com type="radio" :reset Seleciona inputs com type="reset" :selected Seleciona inputs que estão selecionados :submit Seleciona inputs com type="submit" :text Seleciona inputs com type="text" .

Usando pseudo-seletores relacionados à formulários $('#myForm :input'). // obtém todos os elementos que aceitam entrada de dados .

Trabalhando com seleções Uma vez que você tem uma seleção. Métodos geralmente vêm em duas formas diferentes: getters e setters. setters ajustam (setam) uma propriedade em todos os elementos selecionados . Getters retornam uma propriedade do primeiro elemento selecionado. você pode chamar métodos nela.

Se você estiver escrevendo uma cadeia que inclui vários passos. você pode continuar a chamar métodos do jQuery sem precisar pausar com um ponto-e-vírgula. $('#content'). . você (e a pessoa que virá depois de você) talvez ache seu código mais legível se você quebrar o código em várias linhas.find('h3').eq(2).Encadeamento Se você chamar um método numa seleção e este método retornar um objeto jQuery.html('o novo texto do terceiro h3!').

eq(2) .Formatando código encadeado $('#content') .fn. Se você mudar sua seleção no meio de uma cadeia. .end para você voltar para sua seleção original.html('novo texto do terceiro h3!').find('h3') . o jQuery provê o método $.

eq(0) .Restaurando sua seleção original usando $. e muitas bibliotecas adotaram-no desde que o jQuery o tornou popular. Entretando. Encadeamento é um recurso extraordinariamente poderoso.fn.html('novo texto para o primeiro h3!'). deve ser usado com cuidado.mas saiba que é fácil fazer bagunça . Encadeamentos extensos podem deixar o código extremamente difícil de debugar ou modificar.find('h3') .eq(2) . Não há uma regra que diz o quão grande uma cadeia deve ser -.html('novo texto para o terceiro h3!') .end() // restaura a seleção para todos h3 em #context .end $('#content') .

Getters & Setters O jQuery "sobrecarrega" seus métodos. Os setters afetam todos os elementos na seleção. ele é chamado de getter. Quando um método é usado para pegar (ou ler) um valor. ele é chamado de setter. . getters obtêm o valor requisitado somente do primeiro elemento na seleção. então o método usado para setar um valor geralmente tem o mesmo nome do método usado para obter um valor. Quando um método é usado para setar um valor.

html usado como setter $('h1'). .O método $.fn.html('olá mundo').

o que significa que você não pode continuar chamando métodos jQuery no valor retornado pelo getter. .O método html usado como getter $('h1'). getters retornam o que eles foram pedidos para retornar.html(). Os setters retornam um objeto jQuery. permitindo que você continue chamando métodos jQuery na sua seleção.