jQuery e Ajax

Um mero resumo

Jonas Mayer

verso 1.0

Sumrio
1.Introduo............................................................................................................................................................3 2.Sintaxe..................................................................................................................................................................4 3.Seletores...............................................................................................................................................................4 4.Eventos.................................................................................................................................................................7 4.1.Mtodos de Eventos.....................................................................................................................................7 5.Efeitos................................................................................................................................................................15 5.1.Ocultar e mostrar........................................................................................................................................15 5.2.Desvanecer elementos................................................................................................................................15 5.3.Deslizar elementos (Slide)..........................................................................................................................16 5.4.Animao....................................................................................................................................................17 5.5.Parar animao...........................................................................................................................................18 5.6.Funo callback..........................................................................................................................................19 5.7.Encadeamento............................................................................................................................................19 5.8.Filas............................................................................................................................................................19 6.jQuery HTML....................................................................................................................................................21 6.1.Obtendo contedo e atributos.....................................................................................................................21 6.2. Definindo contedo e atributos.................................................................................................................21 6.3.Adicionando elementos..............................................................................................................................22 6.4.Removendo elementos...............................................................................................................................23 6.5.Manipulando classes CSS..........................................................................................................................23 6.6.Dimenso....................................................................................................................................................24 7. AJAX.................................................................................................................................................................26 7.1.Mtodos jQuery AJAX...............................................................................................................................26 7.2.Mtodos AJAX...........................................................................................................................................27 8.Outras propriedades...........................................................................................................................................31 8.1.Mtodos genticos......................................................................................................................................31 8.2.Propriedades jQuery...................................................................................................................................33 8.3.Navegao entre elementos........................................................................................................................34 9.Evitando conflitos .............................................................................................................................................35 I- Apndice JSON ................................................................................................................................................35 REFERNCIAS....................................................................................................................................................37

jQuery

1.Introduo
O objetivo do jQuery para tornar mais fcil usar o JavaScript em seu website. JQuery uma biblioteca JavaScript leve que tem por slogan "write less, do more" (escreva menos, faa mais). jQuery torna tarefas comuns que exigem muitas linhas de cdigo JavaScript para realizar, em mtodos que voc pode chamados com uma nica linha de cdigo. jQuery tambm simplifica muito as coisas complicadas de JavaScript, como chamadas de AJAX e manipulao DOM. A biblioteca jQuery contm as seguintes caractersticas: manipulao HTML / DOM manipulao CSS mtodos de eventos HTML Efeitos e animaes AJAX Utilitrios Dica: Alm disso, jQuery tem plugins para praticamente qualquer tarefa. Instalao Existem vrias maneiras de comear a usar o jQuery em seu site. Voc pode: Baixar a biblioteca jQuery jQuery.com Incluir jQuery de uma CDN, como o Google

A duas verses: Production version - para sites Development version - para testes e desenvolvimento Download: A biblioteca jQuery um arquivo JavaScript nico, e voc faz referncia a ele com a tag HTML <script> (note que a tag <script> deve ser dentro da seo <head>): <head> <script src="jquery-1.9.1.min.js"></script> </head> Alternativas para download Se voc no quiser baixar e hospedar jQuery, voc pode inclu-lo a partir de um CDN (Content Delivery Network). Para usar jQuery do Google ou da Microsoft, use uma das seguintes opes: <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script> </head> <head> <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"> </script> </head> Muitos usurios j tenha baixado jQuery do Google ou Microsoft ao visitar outro site. Como resultado, ele ser carregado a partir do cache quando eles visitam seu site, o que leva a tempos de carregamento mais rpido. Alm disso, mais da CDN ir certificar-se que uma vez que um usurio solicita um arquivo a partir dele, ser servido a partir do servidor mais prximo a eles, o que tambm leva a tempos de carregamento mais rpido. Funes em um arquivo separado Quando demonstramos jQuery neste tutorial, as funes so adicionados diretamente para a seo <head>. No entanto, s vezes prefervel coloc-los em um arquivo separado, como este (use o atributo src para se referir ao arquivo js.): <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>

<script src="my_jquery_functions.js"></script> </head>

2.Sintaxe
A sintaxe jQuery feito sob medida para a seleo de elementos HTML e executar alguma ao sobre o elemento(s). Sintaxe bsica : $(selector).action() $ sinal para definir/acessar a jQuery (selector) seletor para consultar ou encontrar elementos HTML action() ao a ser executada com os elementos HTML Exemplos: $(this).hide() - esconde o elemento atual $("p").hide() - esconde todos os elementos <p>. $(".test").hide() -esconse todos os elementos com class="test". $("#test").hide() - esconde todos os elementos com id="test" Nota: jQuery usa a sintaxe CSS para os seletores. O evento documento pronto Voc deve ter notado que todos os mtodos jQuery em nossos exemplos, esto dentro de um evento documento pronto (ready): $(document).ready(function(){ // os mtodos jQuery vo aqui.. }); Isso para evitar qualquer cdigo jQuery seja executado antes de o documento concluir o carregamento (pronto). bom aguardar que o documento seja completamente carregado e esteja prontos antes de trabalhar com ele. Isso tambm permite que voc tenha seu cdigo JavaScript antes do corpo do seu documento, na seco de head. Dica: A equipe jQuery tambm criou um mtodo ainda mais curto para o evento documento pronto: $(function(){ // os mtodos jQuery vo aqui... }); Use a sintaxe que voc preferir. Ns pensamos que o evento documento pronto mais fcil de entender quando se l o cdigo.

3.Seletores
jQuery seletores permitem selecionar e manipular elementos HTML (s). Com seletores jQuery voc pode encontrar elementos com base em ID, classes, tipos, atributos, valores de atributos e muito mais. So baseado nos Seletores CSS existentes e, alm disso, possuem seus prprios seletores. Todo o tipo de seletores em jQuery, comear com o cifro e parnteses: $(). O seletor de elementos O seletor jQuery de elemento seleciona elementos baseado-se nas tags. Voc pode selecionar todos os elementos <p> em uma pgina como este seletor: $("p") O seletor #id O seletor jQuery usado para encontrar um elemento com o atributo id especificado. Um id deve ser nico dentro de uma pgina, ento voc deve usar o seletor #id quando voc quiser encontrar um elemento nico e exclusivo. Para encontrar um elemento com um ID especfico, escrever um caractere #, seguido do ID do elemento: $("#test") Exemplo: Quando um usurio clica em um boto, o elemento com id = "test" ser escondido: $(document).ready(function(){ $("button").click(function(){ $("#test").hide();

}); }); O seletor .class O seletor jQuery de classe encontra elementos com uma classe especfica. Para encontrar elementos com uma classe especfica, escreva um caractere ponto, seguido do nome da classe: $(".test") Exemplo: Quando um usurio clica em um boto, os elementos com class = "test" sero escondidos: $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); }); A seguir uma tabela com todos os seletores: Seletor Exemplo * #id .class .class,.class element el1,el2,el3 :first :last :even :odd :first-child :first-of-type :last-child :last-of-type :nth-child(n) :nth-last-child(n) :nth-of-type(n) :nth-last-of-type(n) :only-child :only-of-type parent > child parent descendant element + next element ~ siblings :eq(index) :gt(no) :lt(no) $("*") $("#lastname") $(".intro") $(".intro,.demo") $("p") $("h1,div,p") $("p:first") $("p:last") $("tr:even") $("tr:odd") $("p:first-child") $("p:first-of-type") $("p:last-child") $("p:last-of-type") $("p:nth-child(2)") $("p:nth-last-child(2)") $("p:nth-of-type(2)") $("p:nth-last-of-type(2)") $("p:only-child") $("p:only-of-type") $("div > p") $("div p") $("div + p") $("div ~ p") $("ul li:eq(3)") $("ul li:gt(3)") $("ul li:lt(3)")

Seleciona Todos os elementos O elemento com a id=lastname Todos os elementos da classe=intro Todos os elementos da classe intro ou demo Todos os elementos <p> Todos os elemntos <h1>, <div> e <p> O primeiro elemento <p> O ltimo elemento <p> Todos os elementos at <tr> Todos os elementos impares <tr> Todos os elementos <p> que so o primeiro filho de seu pai Todos os elementos <p> que so o primeiro <p> de seu pai Todos os elementos <p> que so o ltimo filho do seu pai Todos os elementos <p> que so o ltimo <p> de seu pai Todos os elementos <p> que so o segundo filho de seu pai Todos os elementos <p> que so o segundo filho de seu pai, contando a partir do ltimo filho Todos os elementos <p> que so a segunda <p> de seu pai Todos os elementos <p> que so o segundo <p> de seu pai, contando a partir do ltimo filho Todos os elementos <p> que so o nico filho de seu pai Todos os elementos <p> que so o nico filho, de seu tipo, de seu pai Todos os elementos <p> que so um filho direto de um elemento <div> Todos os elementos <p> que so descendentes de um elemento <div> O elemento <p> que vem depois de cada elemento <div> Todos os elementos <p> que so irmos de um elemento <div> O quarto elemento em uma lista (ndice comea em 0) Elementos da lista, com um ndice superior a 3 Elementos da lista com um ndice inferior a 3

:not(selector) :header :animated :focus :contains(text) :has(selector) :empty :parent :hidden :visible :root :lang(language) [attribute] [attribute=value] [attribute!=value] [attribute$=value] [attribute|=value] [attribute^=value] [attribute~=value] [attribute*=value] :input :text :password :radio :checkbox :submit :reset :button :image :file :enabled :disabled :selected :checked

$("input:not(:empty)") $(":header") $(":animated") $(":focus") $(":contains('Hello')") $("div:has(p)") $(":empty") $(":parent") $("p:hidden") $("table:visible") $(":root") $("p:lang(de)") $("[href]") $("[href='default.htm']") $("[href!='default.htm']") $("[href$='.jpg']") $("[hreflang|='en']") $("[name^='hello']") $("[name~='hello']") $("[name*='hello']") $(":input") $(":text") $(":password") $(":radio") $(":checkbox") $(":submit") $(":reset") $(":button") $(":image") $(":file") $(":enabled") $(":disabled") $(":selected") $(":checked")

Todos os elementos de entrada que no esto vazios Todos os elementos de cabealho <h1>, <h2> ... Todos os elementos de animated O elemento que atualmente tem o foco Todos os elementos que contm o texto "Hello" Todos <div> elementos que tm um elemento <p> Todos os elementos que esto vazios Todos os elementos que so pais de um outro elemento Todos os elementos ocultos <p> Todas as tabelas visveis Elemento raiz do documento Todos os elementos <p> com um valor de atributo lang comeando com "de" Todos os elementos com um atributo href Todos os elementos com um valor de atributo href igual a "default.htm" Todos os elementos com um atributo href com valor diferente de "default.htm" Todos os elementos com um valor de atributo href terminando com "jpg". Todos os elementos com um valor de atributo hreflang comeando com "en" Todos os elementos com um valor do atributo name comeando com "Hello" Todos os elementos com um valor do atributo name que contenha a palavra "Hello" Todos os elementos com um valor do atributo name que contenha a string "Ol" Todos os elementos de input Todos os elementos de input do tipo text Todos os elementos de input do tipo password Todos os elementos de input do tipo radio Todos os elementos de input do tipo checkbox Todos os elementos de input do tipo submit Todos os elementos de input do tipo reset Todos os elementos de input do tipo button Todos os elementos de input do tipo image Todos os elementos de input do tipo file Todos os elementos de input ativados Todos os elementos de input desativados Todos os elementos de input selecionados Todos os elementos de input assinalados

4.Eventos
Todas as aes de um visitante em uma pgina web podem ser respondidas chamando um evento. Um evento representa o exato momento que algo acontece. Exemplos:

mover o mouse sobre um elemento selecionar um radio button clicar em um elemenento

Sintaxe para Eventos jQuery tem um evento equivalente para a maioria dos eventos DOM. Para atribuir um evento de clique para todos os pargrafos em uma pgina, voc pode fazer isso: $("p").click(); O prximo passo definir o que deve acontecer quando o evento acionado. Voc deve passar uma funo para o evento: $("p").click(function(){ // a ao comea aqui!! });

4.1.Mtodos de Eventos
$(document).ready() Permite executar uma funo quando o documento est completamente carregado. blur() Executada quando um elemento form perde o foco. $("input").blur(function(){ $(this).css("background-color","#ffffff"); }); change() Anexa / Dispara o evento de change que ocorre quando o valor de um elemento alterado (s funciona em campos de formulrio). $("input").change(function(){ alert("The text has been changed."); }); Nota: Para menus de seleo, o evento change ocorre quando uma opo for selecionada. Para campos de texto ou reas de texto, o evento change ocorre quando o campo perde o foco. click() Executado quando o usurio clica sobre um elemento HTML. $("p").click(function(){ $(this).hide(); }); dblclick() Executado quando ocorre um click-duplo sobre um elemento HTML. $("p").dblclick(function(){ $(this).hide(); }); event.currentTarget A propriedade event.currentTarget o elemento DOM atual na fase de ativao do evento, e tipicamente igual a este. $("h1,h2,p").click(function(event){ alert(event.currentTarget === this); }); event.data A propriedade event.data contm os dados opcionais passados para um mtodo de evento quando o atual manipulador de execuo obrigado. $("p").each(function(i){ $(this).on("click",{x:i},function(event){ alert("The " + $(this).index() + ". paragraph has data: " + event.data.x); }); }); event.delegateTarget

A propriedade event.delegateTarget retorna o elemento onde o ouvinte do evento foi ativado. Esta propriedade til para eventos de delegados ligados pelo mtodo on(), em que o manipulador de eventos est ligado a um antepassado do elemento a ser processado. Dica: event.delegateTarget igual a event.currentTarget, se o evento diretamente ligado a um elemento e no ocorre nenhuma delegao. $("div").on("click","button",function(event){ $(event.delegateTarget).css("background-color", "pink"); }); event.isDefaultPrevented() Retorna se event.preventDefault () foi chamado para o objeto de evento $("a").click(function(event){ event.preventDefault(); alert("Was preventDefault() called: " + event.isDefaultPrevented()); }); event.isImmediatePropagationStopped() Retorna se Event.stopImmediatePropagation () foi chamado para o objeto de evento $("div").click(function(event){ event.stopImmediatePropagation(); alert(event.isImmediatePropagationStopped()); }); event.isPropagationStopped() Retorna se event.stopPropagation () foi chamado para o objeto de evento $("div").click(function(event){ event.stopPropagation(); alert(event.isPropagationStopped()); }); event.namespace Retorna o namespace especificado quando o evento foi disparado Esta propriedade pode ser usado por autores de plugins para lidar com tarefas de forma diferente, dependendo do namespace usado. Dica: Espaos de nomes que comeam com um sublinhado so reservados para jQuery. $("p").on("custom.someNamespace",function(event){ alert(event.namespace); }); $("p").click(function(event){ $(this).trigger("custom.someNamespace"); }); $("button").click(function(){ $("p").off("custom.someNamespace"); }); event.pageX Retorna a posio do mouse em relao margem esquerda do documento $(document).mousemove(function(event){ $("span").text("X: " + event.pageX + ", Y: " + event.pageY); }); event.pageY Retorna a posio do mouse em relao borda superior do documento $(document).mousemove(function(event){ $("span").text("X: " + event.pageX + ", Y: " + event.pageY); }); event.preventDefault() Impede a ao padro do evento Dica: Use o mtodo event.isDefaultPrevented() para verificar se o mtodo preventDefault() foi chamado para o evento. $("a").click(function(event){ event.preventDefault(); });

 event.relatedTarget Retorna o elemento alvo do mouse $("div").mouseenter(function(event){ alert("relatedTarget is: " + event.relatedTarget); }); event.result Contm o ltimo valor retornado por um ouvinte disparado por um evento especifico $("button").click(function(){ return "Hello world!"; }); $("button").click(function(event){ $("p").html(event.result); }); event.stopImmediatePropagation() Impede que outros ouvintes de eventos sejam chamado (incluindo eventos de subida de rvore DOM) Dica: Use o mtodo event.isImmediatePropagationStopped () para verificar se este mtodo foi chamado para o evento. $("div").click(function(event){ alert("Event handler 1 executed"); event.stopImmediatePropagation(); }); $("div").click(function(event){ alert("Event handler 2 executed"); }); $("div").click(function(event){ alert("Event handler 3 executed"); }); event.stopPropagation() Impede que o evento de subida at a rvore DOM, evitando quaisquer manipuladores pais sejam notificados do evento Dica: Use o mtodo event.isPropagationStopped() para verificar se este mtodo foi chamado para o evento. $("span").click(function(event){ event.stopPropagation(); alert("The span element was clicked."); }); $("p").click(function(event){ alert("The p element was clicked."); }); $("div").click(function(){ alert("The div element was clicked."); }); event.target Retorna qual elemento DOM acionou o evento Muitas vezes, til comparar event.target a this, a fim de determinar se o evento est sendo tratada devido subida do evento. $("p, button, h1, h2").click(function(event){ $("div").html("Triggered by a " + event.target.nodeName + " element."); }); event.timeStamp Retorna o nmero de milissegundos desde 1 de janeiro de 1970, quando o evento acionado $("button").click(function(event){ $("span").text(event.timeStamp); }); event.type Retorna que tipo de evento foi disparado $("p").on("click dblclick mouseover mouseout",function(event){ $("div").html("Event: " + event.type); }); event.which

Retorna qual tecla do teclado ou boto do mouse foi pressionado para o evento $("input").keydown(function(event){ $("div").html("Key: " + event.which); }); focus() Executada quando um elemento form ganha o foco. O mtodo focus() dispara o evento de foco, ou atribui uma funo a ser executada quando ocorre um evento de foco. Dica: Este mtodo frequentemente usado em conjunto com o mtodo blur (). $("input").focus(function(){ $(this).css("background-color","#cccccc"); });

focusin() Anexa um ouvinte para o evento focusIn O evento focusIn ocorre quando um elemento (ou quaisquer elementos no seu interior) recebe o foco. Ao contrrio do mtodo focus (), o mtodo focusIn () tambm dispara se qualquer elemento filho obter o foco. $("div").focusin(function(){ $(this).css("background-color","#FFFFCC"); });
focusout() Anexa um ouvinte para o evento focusout O evento focusIn ocorre quando um elemento (ou quaisquer elementos no seu interior) perde o foco. $("div").focusout(function(){ $(this).css("background-color","#FFFFFF"); }); hover() O mtodo hover() usa duas funes e uma combinao dos mtodos mouseenter() e mouseleave(). A primeira funo executada quando o mouse entra o elemento HTML, e a segunda funo executada quando o mouse sai do elemento HTML: $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); }); keydown() O evento KeyDown Ocorre quando uma tecla pressionada. O mtodo KeyDown() dispara o evento KeyDown, ou atribui uma funo a ser executada quando ocorre um evento KeyDown. Dica: Use a propriedade event.which para retornar qual tecla do teclado foi pressionada. $("input").keydown(function(){ $("input").css("background-color","yellow"); }); keypress() O evento keypress semelhante ao evento KeyDown. O evento ocorre quando um boto pressionado. No entanto, o evento keypress no acionado para todas as chaves (por exemplo, ALT, CTRL, SHIFT ESC). Use o mtodo KeyDown () para tambm verificar estas teclas. $("input").keypress(function(){ $("span").text(i+=1); }); keyup() O evento keyup ocorre quando uma tecla do teclado solta. O mtodo keyup () dispara o evento keyup, ou atribui uma funo a ser executada quando ocorre um evento keyup. Dica: Use a propriedade event.which para voltar qual tecla foi pressionada. $("input").keyup(function(){ $("input").css("background-color","pink"); });

 mousedown() Executada quando o boto do mouse pressionado sobre o elemento HTML. $("#p1").mousedown(function(){ alert("Mouse down over p1!"); }); mouseenter() Executada quando o ponteiro do mouse entra no elemento HTML. Nota: O evento mouseenter s acionado quando o ponteiro do mouse entra o elemento selecionado. $("#p1").mouseenter(function(){ alert("You entered p1!"); }); mouseleave() Executada quando o ponteiro do mouse sai do elemento HTML O evento mouseleave s dispara quando o ponteiro do mouse deixa o elemento selecionado. $("#p1").mouseleave(function(){ alert("Bye! You now leave p1!"); }); mousemove() O evento MouseMove ocorre quando o ponteiro do mouse se move dentro do elemento selecionado. O mtodo mousemove() dispara o evento mousemove, ou atribui uma funo a ser executada quando ocorre um evento mousemove. Nota: Cada vez que um usurio move o mouse um pixel, um evento mousemove ocorre. preciso recursos do sistema para processar todos os eventos mousemove. Use este evento cuidadosamente. $(document).mousemove(function(event){ $("span").text(event.pageX + ", " + event.pageY); }); mouseout() O evento mouseout ocorre quando o ponteiro do mouse deixa o elemento selecionado. O mtodo mouseout() dispara o evento mouseout, ou atribui uma funo a ser executada quando ocorre um evento mouseout. Nota: Ao contrrio do evento mouseleave, o evento mouseout acionado se um ponteiro do mouse deixa qualquer elemento filho, bem como o elemento selecionado. $("p").mouseout(function(){ $("p").css("background-color","gray"); }); mouseover() O evento mouseover ocorre quando o ponteiro do mouse est sobre o elemento selecionado. O mtodo mouseover () dispara o evento mouseover, ou atribui uma funo a ser executada quando ocorre um evento mouseover. Nota: Ao contrrio do evento mouseenter, o evento mouseover dispara se um ponteiro do mouse entra qualquer elemento filho, bem como o elemento selecionado. $("p").mouseover(function(){ $("p").css("background-color","yellow"); }); mouseup() Executada quando o boto do mouse solto dentro do elemento HTML. $("#p1").mouseup(function(){ alert("Mouse up over p1!"); }); off() Remove os ouvintes adicionados com o mtodo on() Nota: Para remover manipuladores de eventos especficos, o selector string deve coincidir com o que passado para o mtodo on(), quando o manipulador de eventos foi anexado. Dica: Para colocar um evento que s acontece uma vez e, em seguida, remove-se, use o mtodo one(). Sintaxe: $(selector).off(event,selector,function(eventObj),map)

 event Obrigatrio. Especifica um ou mais eventos ou namespaces para remover do(s) elemento(s) selecionado(s). Mltiplos valores devem ser separados por espao. selector Opcional. Um seletor que deve corresponder a uma originalidade passado para o mtodo on() ao anexar manipuladores de eventos. function(eventObj) Opcional. Especifica uma funo para rodar quando o evento ocorre. map Especifica um mapa do evento ({evento: funo, evento: funo, ...}) que contm um ou mais eventos para anexar os elementos e funes para ser executado quando os eventos ocorrem Exemplo: $("button").click(function(){ $("p").off("click"); }); on() Adiciona ouvintes a elementos selecionados e seus filhos Nota: Os manipuladores de eventos ligados usando o mtodo on () vo funcionar para os elementos atuais e futuros (como um novo elemento criado por um script). Dica: Para remover manipuladores de eventos, use o mtodo off (). Dica: Para colocar um evento que s acontece uma vez e, em seguida, removido, use o mtodo one(). Sintaxe: $(selector).on(event,childSelector,data,function,map) event Obrigatrio. Especifica um ou mais eventos ou namespaces para serem anexados aos elementos selecionados. Valores de evento mltiplos so separadas por um espao. childSelector Opcional. Especifica que o manipulador de eventos s deve ser anexado aos elementos filho especificados data Opcional. Especifica dados adicionais para passar para a funo function Obrigatrio. Especifica a funo a ser executada quando o evento ocorrer map Especifica um mapa de eventos ({evento: funo, evento: funo, ...}) que contm um ou mais eventos para serem anexados ao elemento selecionado, e funes para serem executadas quando esses eventos ocorrem $("p").on("click",function(){ alert("The paragraph was clicked."); }); one() Adiciona um ou mais ouvintes para os elementos selecionados. Este manipulador s acionado uma vez por elemento Sintaxe: $(selector).one(event,data,function)

event Obrigatrio. Especifica um ou mais eventos para anexar aos elementos. Valores de evento mltiplas so separadas por um espao. data Opcional. Especifica dados adicionais para passar para a funo function Obrigatrio. Especifica a funo a ser executada quando o evento ocorrer
$("p").one("click",function(){ $(this).animate({fontSize:"+=6px"}); }); $.proxy() Pega uma funo existente e retorna uma nova sobre um contexto particular Este mtodo muitas vezes usado para anexar eventos a um elemento em que o contexto est apontando para um objeto diferente. Sintaxe: $(selector).proxy(function,context) $(selector).proxy(context,name) function A funo existente a ser chamado context O nome do objeto em que a funo est name A funo j existente cujo contexto ser alterado (deve ser uma propriedade do objeto de contexto).

Exemplo: $("button").click($.proxy(objPerson,"test")); ready() Especifica uma funo a ser executada quando o DOM est totalmente carregado Como esse evento ocorre depois que o documento est pronto, um bom lugar para todos os outros eventos do jQuery e funes. Dica: O mtodo ready () no deve ser utilizado em conjunto com <body onload="">. Sintaxe: $(document).ready(function) O mtodo ready() s pode ser usado no documento actual, assim, no necessrio selector: $(function) Exemplo: $(document).ready(function(){ $("button").click(function(){ $("p").slideToggle(); }); }); resize() O mtodo resize () dispara o evento de redimensionamento, ou atribui uma funo a ser executada quando ocorre um evento de redimensionamento. O evento de redimensionamento ocorre quando a janela do navegador muda de tamanho. $(window).resize(function(){ $('span').text(x+=1); }); scroll() O mtodo scroll() dispara o evento de rolagem, ou atribui uma funo a ser executada quando ocorre um evento de rolagem. O evento de rolagem ocorre quando o usurio rola no elemento especificado. $("div").scroll(function(){ $("span").text(x+=1); }); select() O select evento ocorre quando um texto selecionado (marcado), em uma rea de texto ou um campo de texto. O mtodo select() dispara o evento select, ou atribui uma funo a ser executada quando ocorre um evento select. $("input").select(function(){ alert("Text marked!"); }); submit() O mtodo submit() dispara o evento submit, ou atribui uma funo a der executada quando ocorre um evento submit. O evento submit ocorre quando um formulrio submetido. $("form").submit(function(){ alert("Submitted"); }); trigger() O mtodo trigger() dispara o evento especificado e o comportamento padro de um evento (como o envio do formulrio) para os elementos selecionados. Esse mtodo semelhante ao mtodo triggerHandler(), exceto que triggerHandler() no dispara o comportamento padro do evento. Sintaxe: $(selector).trigger(event,eventObj,param1,param2,...) Exemplo: $("button").click(function(){ $("input").trigger("select"); });

 triggerHandler() O mtodo triggerHandler() dispara o evento especificado para o elemento selecionado. Este mtodo semelhante ao mtodo trigger(), exceto que trigger() tambm aciona o comportamento padro de um evento (como a submisso do formulrio). Sintaxe: Exemplo: $("button").click(function(){ $("input").triggerHandler("select"); });

5.Efeitos
5.1.Ocultar e mostrar
Com jQuery, voc pode se esconder e mostrar elementos HTML com os mtodos hide() e show(): $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); Sintaxe $(selector).hide(speed,callback); $(selector).show(speed,callback); O parmetro de velocidade "speed" opcional especifica a velocidade da esconder/mostrar, e pode ter os seguintes valores: "slow", "fast", ou em milissegundos. O parmetro opcional callback uma funo a ser executada aps a concluso do mtodo hide() ou show() . O exemplo seguinte demonstra o parmetro speed com hide(): $("button").click(function(){ $("p").hide(1000); }); toggle() Com jQuery possvel alternar entre hide() e show() com toggle(). Elementos mostrados so escondidos e elementos ocultos so mostrados: $("button").click(function(){ $("p").toggle(); }); Sintaxe: $(selector).toggle(speed,callback); O parmetro de velocidade "speed" opcional especifica a velocidade da esconder/mostrar, e pode ter os seguintes valores: "slow", "fast", ou em milissegundos. O parmetro opcional callback uma funo a ser executada aps a concluso do mtodo toggle() .

5.2.Desvanecer elementos
Com jQuery possvel desvanecer elementos dentro e fora de visibilidade. Com jQuery possvel atenuar um elemento dentro e fora de visibilidade. jQuery tem os seguintes mtodos fade: fadeIn() fadeOut() fadeToggle() fadeTo()

O mtodo fadeIn() Usado para desvanecer um elemento oculto. Sintaxe: $(selector).fadeIn(speed,callback); O parmetro opcional speed especifica a velocidade de durao do efeito. Ele pode ter os seguintes valores "slow", "fast", ou milisegundos. O parmetro opcional callback uma funo a ser executada aps a concluso do mtodo. O exemplo seguinte demonstra o mtodo fadeIn() com parmetros diferentes: $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); O mtodo fadeOut() Usado para desvanecer elementos visiveis. Sintaxe: $(selector).fadeOut(speed,callback); O parmetro opcional speed especifica a velocidade de durao do efeito. Ele pode ter os seguintes valores "slow", "fast", ou milisegundos. O parmetro opcional callback uma funo a ser executada aps a concluso do mtodo. O exemplo seguinte demonstra o mtodo fadeOut() com parmetros diferentes: $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); }); O mtodo fadeToggle() Define o desvanecer tanto para elementos visveis quanto para elementos ocultos. Age como os mtodos fadeIn() e fadeOut() juntos. Sintaxe: $(selector).fadeToggle(speed,callback); O parmetro opcional speed especifica a velocidade de durao do efeito. Ele pode ter os seguintes valores "slow", "fast", ou milisegundos. O parmetro opcional callback uma funo a ser executada aps a concluso do mtodo. O exemplo seguinte demonstra o mtodo fadeToggle() com parmetros diferentes: $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); O mtodo fadeTo() Define a opacidade ao desvanecer, entre 0 e 1. Sintaxe: $(selector).fadeTo(speed,opacity,callback); O parmetro opcional speed especifica a velocidade de durao do efeito. Ele pode ter os seguintes valores "slow", "fast", ou milisegundos. O parmetro opcional callback uma funo a ser executada aps a concluso do mtodo. O exemplo seguinte demonstra o mtodo fadeTo() com parmetros diferentes: $("button").click(function(){ $("#div1").fadeTo("slow",0.15); $("#div2").fadeTo("slow",0.4);

$("#div3").fadeTo("slow",0.7); });

5.3.Deslizar elementos (Slide)

Com jQuery voc pode criar um efeito de deslizamento em elementos. jQuery tem os mtodos de slides a seguir: slideDown() slideUp() slideToggle() O mtodo slideDown() Usado para deslizar um elemento pra baixo. Sintaxe; $(selector).slideDown(speed,callback); O parmetro opcional speed especifica a velocidade de durao do efeito. Ele pode ter os seguintes valores "slow", "fast", ou milisegundos. O parmetro opcional callback uma funo a ser executada aps a concluso do mtodo. O exemplo seguinte demonstra o mtodo slideDown(): $("#flip").click(function(){ $("#panel").slideDown(); }); O mtodo slideUp() Usado para deslizar um elemento para cima. Sintaxe: $(selector).slideUp(speed,callback); O parmetro opcional speed especifica a velocidade de durao do efeito. Ele pode ter os seguintes valores "slow", "fast", ou milisegundos. O parmetro opcional callback uma funo a ser executada aps a concluso do mtodo. O exemplo seguinte demonstra o mtodo slideUp(): $("#flip").click(function(){ $("#panel").slideUp(); }); O mtodo slideToggle() O mtodo slideToggle alterna entre os mtodos slideDown () e slideUp (). Se os elementos foram deslizou para baixo, slideToggle () vai deslizar para cima. Se os elementos foram deslizou para cima, slideToggle () vai deslizar para baixo. Sintaxe: $(selector).slideToggle(speed,callback); O parmetro opcional speed especifica a velocidade de durao do efeito. Ele pode ter os seguintes valores "slow", "fast", ou milisegundos. O parmetro opcional callback uma funo a ser executada aps a concluso do mtodo. O exemplo seguinte demonstra o mtodo slideUp(): $("#flip").click(function(){ $("#panel").slideToggle(); });

5.4.Animao
O mtodo animate() permite a criao de animaes personalizadas. Sintaxe: $(selector).animate({params},speed,callback);

O parmetro param obrigatrio define as propriedades CSS para ser animado. O parmetro opcional speed especifica a velocidade de durao do efeito. Ele pode ter os seguintes valores "slow", "fast", ou milisegundos. O parmetro opcional callback uma funo a ser executada aps a concluso do mtodo. O exemplo seguinte demonstra o mtodo animate(): $("button").click(function(){ $("div").animate({left:'250px'}); }); Por padro, todos os elementos HTML tm uma posio esttica, e no pode ser movido. Para manipular a posio, lembre-se primeiro definir a propriedade CSS position do elemento para relative, fixed, ou absolute! Manipulando mltiplas propriedades Observe que vrias propriedades podem ser animados ao mesmo tempo: $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); Usando valores relativos Tambm possvel definir valores relativos. Isso possvel pondo += e -= na frente do valor. $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); }); Usando valores pr-definidos Voc pode at mesmo especificar o valor de uma propriedade de animao como "show", "hide", ou "toggle": $("button").click(function(){ $("div").animate({ height:'toggle' }); }); Usando a funcionalidade de fila Por padro jQuery vem com a funcionalidade de fila para animaes. Isto significa que se voc escrever mltiplos animate(), elas sero chamadas uma aps a outra. jQuery cria uma fila interna com essas chamadas de mtodo. Em seguida, ele executa as chamadas uma por uma. Se voc quer usar vrias animaes em sequncia voc pode usar essa funcionalidade: $("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); }); O exemplo a seguir primeiro move o elemento <div> para a direita e depois aumenta o tamanho da fonte do texto. $("button").click(function(){ var div=$("div"); div.animate({left:'100px'},"slow"); div.animate({fontSize:'3em'},"slow"); });

5.5.Parar animao
O mtodo stop() usado para parar animaes ou efeitos antes que terminem. O mtodo stop() funciona para todas as funes de animao de jQuery. Sintaxe; $(selector).stop(stopAll,goToEnd); O parmetro opcional stopAll especifica se a fila de animao deve ser limpa ou no. O padro falso, o que significa a animao ativa ser interrompida, permitindo que as animaes na fila possam ser realizadas posteriormente. O parmetro goToEnd opcional especifica se a animao atual deve ser completada imediatamente ou no. O padro falso. Ento, por padro, o mtodo stop() para a animao atual que est sendo realizada sobre o elemento selecionado. O exemplo a seguir demonstra o mtodo stop (), sem parmetros: $("#stop").click(function(){ $("#panel").stop(); });

5.6.Funo callback
A funo callback executada depois que o efeito atual 100% concluida. Instrues JavaScript so executados linha por linha. No entanto, com os efeitos, a prxima linha de cdigo pode ser executado mesmo que o efeito no tenha terminado. Isso pode criar erros. Sintaxe tpica: $(selector).hide(speed,callback); Exemplos: O exemplo abaixo tem um parmetro de retorno que uma funo que ser executada aps o efeito hide ser concludo: $("button").click(function(){ $("p").hide("slow",function(){ alert("The paragraph is now hidden"); }); }); O exemplo a seguir no tem o parmetro callback e uma caixa de alerta mostrada antes que o efeito hide seja completada: $("button").click(function(){ $("p").hide(1000); alert("The paragraph is now hidden"); });

5.7.Encadeamento
Encadeamento nos permite executar mltiplos mtodos JQuery em um mesmo elemento com uma nica instruo. Dica: Desta forma, os navegadores no tem que encontrar o mesmo elemento (s) mais de uma vez. Para encadear uma ao, vo simplesmente acrecenta a ao a ao anterior. A seguir um exemplo de encadeamento dos mtodos css (), slideUp(), e slideDown(). $("#p1").css("color","red").slideUp(2000).slideDown(2000); Ns tambm poderamos ter adicionado mais chamadas de mtodo, se necessrio. Dica: Quando o encadeamento, a linha de cdigo pode ser bastante longa. No entanto, o jQuery no muito rigoroso sobre a sintaxe, voc pode format-lo como quiser, incluindo quebras de linha e indentao. Isso tambm funciona muito bem: $("#p1").css("color","red") .slideUp(2000) .slideDown(2000); jQuery joga fora o espao extra e executa as linhas acima, como uma longa linha de cdigo.

5.8.Filas
clearQueue() Remove todas as funes na fila restantes dos elementos selecionados Sintaxe: $(selector).clearQueue(queueName)

queueName Opcional. Especifica o nome da fila. O padro "fx", a fila de efeitos padro

Exemplo: $("button").click(function(){ $("div").clearQueue(); }); delay() Define um atraso para todas as funes em fila sobre os elementos selecionados Sintaxe: $(selector).delay(speed,queueName)

speed Opcional. Especifica a velocidade do atraso. Em milissegundos ou slow ou fast. queueName Opcional. Especifica o nome da fila. O padro "fx", a fila de efeitos padro

Exemplo: $("button").click(function(){ $("#div1").delay("slow").fadeIn(); $("#div2").delay("fast").fadeIn(); }); dequeue() Remove a prxima funo da fila, e, em seguida, executa a funo Nota: Voc deve garantir que o mtodo dequeue() chamado aps a adio de uma funo com queue(), para permitir que o processo continue. Sintaxe: $(selector).dequeue(queueName) queueName Opcional. Especifica o nome da fila. O padro "fx", a fila de efeitos padro Exemplo: $("div").queue(function(){ $("div").css("background-color","red"); $("div").dequeue(); }); finish() Paradas, remove e completa todas as animaes na fila para os elementos selecionados Este mtodo semelhante ao mtodo .stop(true,true) exceto que finish() tambm faz com que todas as propriedades CSS de todas as animaes de fila parem. Sintaxe: $(selector).finish(queueName)

queueName Opcional. Especifica o nome da fila. O padro "fx", a fila de efeitos padro Exemplo: $("#complete").click(function(){ $("div").finish(); });
queue() Mostra as filas de funes dos elementos selecionados. Uma fila uma ou mais funes esperando para serem executadas. O mtodo da queue() pode ser utilizado em conjunto com o mtodo de retirada da dequeue() Sintaxe: $(selector).queue(queueName)

queueName Opcional. Especifica o nome da fila. O padro "fx", a fila de efeitos padro

Exemplo: $("span").text(div.queue().length);

6.jQuery HTML
6.1.Obtendo contedo e atributos
Uma parte muito importante do jQuery a possibilidade de manipular o DOM. jQuery vem com um monte de mtodos DOM relacionados que tornam fcil acessar e manipular elementos e atributos. Pegando contedo com text(), html(), e val() Trs simples, mas teis, mtodos jQuery para a manipulao de DOM so: text() - Define ou retorna o contedo de texto de elementos selecionados html() - Define ou retorna o contedo de elementos selecionados (incluindo marcao HTML) val() - Define ou retorna o valor dos campos de formulrio Exemplo: $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); O exemplo a seguir demostra como obter o valor de um campo input: $("#btn1").click(function(){ alert("Value: " + $("#test").val()); }); Obtendo atributos com attr() O mtodo attr() usado para obter valores de atributos. O exemplo a seguir demonstra como obter o valor do atributo href de um link: $("button").click(function(){ alert($("#w3s").attr("href")); });

6.2. Definindo contedo e atributos

Os mtodos para obter contedo so os mesmos para defini-lo. text() - Define ou retorna o contedo de texto de elementos selecionados html() - Define ou retorna o contedo de elementos seleccionados (incluindo marcao HTML) val() - Define ou retorna o valor dos campos de formulrio Exemplo: $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); }); text(), html(), e val() com a funo Callback Todos os trs mtodos jQuery acima: text(), html(), e val(), tambm vem com uma funo callback. A funo callback tem dois parmetros: o ndice do elemento atual na lista de elementos selecionados e o valor original. Voc, ento, retornar a string que voc deseja usar como o novo valor da funo. O exemplo a seguir demonstra text() e html() com uma funo de retorno:

$("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; }); }); $("#btn2").click(function(){ $("#test2").html(function(i,origText){ return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; }); }); Definindo atributos com attr() O mtodo attr() tambm usado para definir/alterar valores de atributos. O exemplo a seguir demonstra como alterar o valor do atributo href de um link: $("button").click(function(){ $("#w3s").attr("href","http://www.w3schools.com/jquery"); }); O mtodo attr() tambm permite que voc defina vrios atributos ao mesmo tempo. O exemplo a seguir demonstra como definir tanto os atributos href e title, ao mesmo tempo: $("button").click(function(){ $("#w3s").attr({ "href" : "http://www.w3schools.com/jquery", "title" : "W3Schools jQuery Tutorial" }); }); Callback para attr() O mtodo attr(), tambm vem com uma funo callback. O exemplo a seguir demonstra attr () com uma funo callback: $("button").click(function(){ $("#w3s").attr("href", function(i,origValue){ return origValue + "/jquery"; }); });

6.3.Adicionando elementos
Ns veremos quatro mtodos jQuery que so usados para adicionar novos contedos: append() - Insere contedo no final dos elementos selecionados prepend() - Insere contedo no comeo dos elementos selecionados after() - Insere o contedo aps os elementos selecionados before() - Insere o contedo antes os elementos selecionados Exemplo: $("p").append("Some appended text."); $("p").prepend("Some prepended text."); $("img").after("Some text after"); $("img").before("Some text before"); Criando vrios elementos possvel criar um nmero infinito de elementos, que podem ser gerados usando HTML, jQuery ou JavaScript. Veja os exemplos a seguir: function appendText() { var txt1="<p>Text.</p>"; // Create element with HTML var txt2=$("<p></p>").text("Text."); // Create with jQuery var txt3=document.createElement("p"); // Create with DOM txt3.innerHTML="Text.";

$("p").append(txt1,txt2,txt3); }

// Append the new elements

function afterText() { var txt1="<b>I </b>"; // Create element with HTML var txt2=$("<i></i>").text("love "); // Create with jQuery var txt3=document.createElement("big"); // Create with DOM txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // Insert new elements after img }

6.4.Removendo elementos
Para remover elementos e contedos, h dois mtodos principais: remove() - Remove o elemento selecionado (e seus elementos filho) empty() - Remove os elementos filhos do elemento selecionado Exemplo: $("#div1").remove(); $("#div1").empty(); Filtrar os elementos a serem removidos O mtodo remove() aceita um parmetro que permite filtrar os elementos a serem removidos. O parmetro pode ser qualquer uma das sintaxes de selector jQuery. O exemplo a seguir remove todos os elementos <p> com class = "italic": $("p").remove(".italic");

6.5.Manipulando classes CSS

jQuery tem vrios mtodos para a manipulao de CSS. Ns veremos os seguintes mtodos: addClass() - Adiciona uma ou mais classes para os elementos selecionados removeClass() - Remove uma ou mais classes a partir dos elementos selecionados toggleClass() - Alterna entre adio / remoo de classes a partir dos elementos selecionados css() - Define ou retorna o atributo de estilo Exemplo CSS: A folha de estilo a seguir ser usado por todos os exemplos nesta pgina: .important { font-weight:bold; font-size:xx-large; } .blue { color:blue; } Mtodo addClass() $("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); }); Voc tambm pode especificar vrias classes dentro do mtodo addClass (): $("button").click(function(){ $("#div1").addClass("important blue"); });

Mtodo removeClass() $("button").click(function(){ $("h1,h2,p").removeClass("blue"); }); Mtodo toggleClass() $("button").click(function(){ $("h1,h2,p").toggleClass("blue"); }); Mtodo css() O mtodo css() define ou retorna uma ou mais propriedades de estilo de um dado elemento. Retornando uma propriedade CSS Para retornar o valor de uma propriedade CSS especifica, use a seguinte sintaxe: css("propertyname"); Por exemplo: $("p").css("background-color"); Definindo uma propriedade CSS Para definir o valor de uma propriedade CSS especifica, use a seguinte sintaxe: css("propertyname","value"); Por exemplo: $("p").css("background-color","yellow"); Definindo mltiplas propriedades CSS Para definir mltiplas propriedades CSS, use as seguinte sintaxe: css({"propertyname":"value","propertyname":"value",...}); Por exemplo: $("p").css({"background-color":"yellow","font-size":"200%"});

6.6.Dimenso
jQuery tem vrios mtodos importantes para trabalhar com dimenses: width() height() innerWidth() innerHeigh t() outerWidt h() outerHeigh t()

Mtodos width() e height() O mtodo width() define ou retorna a largura de um elemento (no inclui o preenchimento, borda ou margem). O mtodo height() define ou retorna a altura de um elemento (no inclui o preenchimento, borda ou margem). O exemplo a seguir retorna a largura e altura de um elemento <div> especificado: $("button").click(function(){ var txt=""; txt+="Width: " + $("#div1").width() + "</br>"; txt+="Height: " + $("#div1").height(); $("#div1").html(txt); }); O exemplo a seguir define a largura e altura de um elemento <div> especificado: $("button").click(function(){ $("#div1").width(500).height(500); }); Mtodos innerWidth() e innerHeight() O innerWidth() retorna a largura de um elemento (inclui padding). O innerHeight() retorna a altura de um elemento (inclui padding). O exemplo a seguir retorna o inner-width/height de um elemento <div> especificado: $("button").click(function(){ var txt=""; txt+="Inner width: " + $("#div1").innerWidth() + "</br>"; txt+="Inner height: " + $("#div1").innerHeight(); $("#div1").html(txt); }); Mtodos outerWidth() e outerHeight() O outerWidth () retorna a largura de um elemento (inclui padding e de border). O outerHeight () retorna a altura de um elemento (inclui padding e de border). O exemplo a seguir retorna o outer-width/height de um elemento <div> especificado: $("button").click(function(){ var txt=""; txt+="Outer width: " + $("#div1").outerWidth() + "</br>"; txt+="Outer height: " + $("#div1").outerHeight(); $("#div1").html(txt); }); O mtodo outerWidth (true) retorna a largura de um elemento (inclui o padding, border e margin). O mtodo outerHeight(true) retorna a altura de um elemento (inclui o padding, border e margin). $("button").click(function(){ var txt=""; txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>"; txt+="Outer height (+margin): " + $("#div1").outerHeight(true); $("#div1").html(txt); }); Altura e largura totais O exemplo a seguir retorna a largura ea altura do documento (o documento HTML) e janela (a janela do navegador): $("button").click(function(){ var txt="";

txt+="Document width/height: " + $(document).width(); txt+="x" + $(document).height() + "\n"; txt+="Window width/height: " + $(window).width(); txt+="x" + $(window).height(); alert(txt); });

7. AJAX
AJAX a arte de trocar dados com um servidor, e atualizar partes de uma pgina da web - sem recarregar a pgina inteira. AJAX = Asynchronous JavaScript And XML. Qual a relao de jQuery com AJAX ? jQuery oferece diversos mtodos para a funcionalidade de AJAX. Com os mtodos do jQuery AJAX, voc pode solicitar o texto, HTML, XML, JSON ou a partir de um servidor remoto usando HTTP GET e HTTP POST - E voc pode carregar os dados externos diretamente para os elementos selecionados HTML de sua pgina web! Sem jQuery, codificar AJAX pode ser um pouco complicado! Escrever cdigo AJAX regular pode ser um pouco complicado, porque os navegadores diferentes tm sintaxe diferente para a implementao de AJAX. Isto significa que voc ter que escrever cdigo extra para testar diferentes navegadores. No entanto, a equipe jQuery tem cuidado disso para ns, para que possamos escrever a funcionalidade de AJAX com apenas uma nica linha de cdigo.

7.1.Mtodos jQuery AJAX

Mtodo load() O mtodo load() carrega os dados de um servidor e coloca os dados retornados no elemento selecionado. Sintaxe: $(selector).load(URL,data,callback); O parmetro URL obrigatrio especifica a URL que voc deseja carregar. O parmetro opcional data especifica uma srie de strings de consulta com valores pares chave/valor para enviar junto com o request. O parmetro opcional calback o nome de uma funo a ser executada depois de o mtodo load() completado. Aqui est o contedo do nosso arquivo de exemplo: "demo_test.txt": <h2>jQuery and AJAX is FUN!!!</h2> <p id="p1">This is some text in a paragraph.</p> O exemplo seguinte carrega o contedo do arquivo "demo_test.txt" em um elemento <div> especfico: $("#div1").load("demo_test.txt"); O parmetro opcional callback especifica uma funo de retorno para ser executado quando o mtodo load() concludo. A funo callback pode ter diferentes parmetros: responseTxt - contm o contedo resultante se a chamada sucesso statusTXT - contm o estado da chamada xhr - contm o objeto XMLHttpRequest O exemplo a seguir exibe uma caixa de alerta aps a concluso do mtodo load(). Se o mtodo load() tiver sucesso, ele exibe "contedo externo carregado com sucesso!", E, se falhar ele exibe uma mensagem de erro: $("button").click(function(){ $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("External content loaded successfully!"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); }); });

7.2.Mtodos AJAX
GET e POST O jQuery get() e post() mtodos so utilizado para solicitar os dados do servidor com uma requisio HTTP GET ou POST. Mtodo $.get() O mtodo $.get() requisita dados do servidor com uma requisio HTTP GET. Sintaxe: $.get(URL,callback); O parmetro obrigatrio URL especifica a URL que voc deseja solicitar. O parmetro callback opcional o nome de uma funo a ser executada se a solicitao for bem sucedida. $.get(URL,data,function(data,status,xhr),dataType) url O parmetro obrigatrio URL especifica a URL que voc deseja solicitar. data Opcional. Especifica dados para enviar para o servidor, juntamente com a solicitao function(data,status,xhr) Opcional. Especifica uma funo a ser executada, se o pedido for bem-sucedido Os parmetros adicionais: data contm os dados resultantes do pedido status contm o status da solicitao ("success", "notmodified", "error", "timeout", ou "parsererror") xhr contm o objeto XMLHttpRequest dataType Opcional. Especifica o tipo de dados esperado da resposta do servidor. Por padro jQuery executa uma suposio automtica. Entre os tipos possveis: xml, html, script, json, jsonp e text. O exemplo a seguir usa o $ get () para recuperar dados de um arquivo no servidor.: $("button").click(function(){ $.get("demo_test.asp",function(data,status){ alert("Data: " + data + "\nStatus: " + status); }); }); Mtodo $.post() O mtodo $.post() requisita dados do servidor usando uma requisio HTTP POST. Sintaxe $.post(URL,data,callback); O parmetro obrigatrio URL especifica a URL que voc deseja solicitar. O parmetro callback opcional o nome de uma funo a ser executada se a solicitao for bem sucedida. $(selector).post(URL,data,function(data,status,xhr),dataType) Os parmetros so os mesmos do mtodo $.get O exemplo a seguir usa o mtodo $post() para enviar alguns dados junto com a requisio.: $("button").click(function(){ $.post("demo_test_post.asp", { name:"Donald Duck", city:"Duckburg" }, function(data,status){ alert("Data: " + data + "\nStatus: " + status); }); }); $.ajax() Executa uma solicitao assncrona AJAX Todos os mtodos jQuery para AJAX utilizam o mtodo ajax(). Este mtodo usado principalmente para pedidos em que os outros mtodos no podem ser utilizados. Sintaxe: $.ajax({name:value, name:value, ... }) Os parmetros especificam um ou mais pares nome/valor para a requisio AJAX.

Os possveis parmetros nome/valor so: async Um valor booleano que indica se a solicitao deve ser tratada assncronamente ou no. O padro true beforeSend(xhr) A funo a ser executada antes que o pedido seja enviado cache Um valor booleano que indica se o navegador deve armazenar em cache as pginas solicitadas. O padro true complete(xhr,status) A funo a ser executada quando a solicitao for concluda (depois de funes de erro e sucesso). contentType O tipo de contedo utilizado durante o envio de dados para o servidor. O padro : "application/x-wwwform-urlencoded" context Especifica o valor this para todas as funes callback relacionadas a AJAX data Especifica os dados a serem enviado para o servidor dataFilter(data,type) A funo usada para lidar com os dados de resposta crus do XMLHttpRequest dataType O tipo de dados esperado da resposta do servidor. error(xhr,status,error) A funo a ser executada se a solicitao falhar. global Um valor booleano especificando se deve ou no disparar manipuladores de eventos globais AJAX para a solicitao.O padro true. ifModified Um valor booleano que especifica se uma solicitao s bem sucedida se a resposta mudou desde a ltima solicitao. O padro : false. jsonp Uma string que substitui a funo callback em uma solicitao jsonp. jsonpCallback Especifica um nome para a funo callback em uma solicitao jsonp password Especifica uma senha para ser usada em uma solicitao de autenticao de acesso HTTP. processData Um valor booleano que especifica se os dados enviados com a solicitao devem ser transformados em uma string de consulta. O padro true scriptCharset Especifica a codificao para a solicitao success(result,status,xhr) A funo a ser executada quando a solicitao for bem-sucedida timeout O limite de tempo (em milissegundos) para a solicitao traditional Um valor booleano que especifica se deve ou no usar o estilo tradicional de serializao de parmetros type Especifica o tipo de solicitao. (GET ou POST) url Especifica a URL destino do pedido. O padro a pgina atual username Especifica um login para ser usado em uma solicitao de autenticao de acesso HTTP. xhr A funo usada para criar o objeto XMLHttpRequest Exemplo: $("button").click(function(){ $.ajax({url:"demo_test.txt",success:function(result){ $("#div1").html(result); }}); }); $.ajaxPrefilter() Manipula as opes personalizadas do Ajax ou modifica as opes existentes antes de que cada solicitao seja enviada e antes que sejam processadas por $.ajax() $.ajaxSetup() Define os valores padro para futuras solicitaes AJAX Sintaxe: $.ajaxSetup({name:value, name:value, ... }) Os parmetros especificam um ou mais pares nome/valor para a requisio AJAX. Os possveis parmetros nome/valor so os mesmos de $.ajax. Exemplo: $("button").click(function(){ $.ajaxSetup({url:"demo_ajax_load.txt",success:function(result){ $("div").html(result);}}); $.ajax(); }); $.ajaxTransport() Cria um objeto que manipula a atual transmisso de dados Ajax $.getJSON() Carrega dados no formato JSON de um servidor usando uma solicitao HTTP GET Sintaxe: $(selector).getJSON(url,data,success(data,status,xhr))

 url Obrigatrio. Especifica a URL para enviar a solicitao data Opcional. Especifica os dados a serem enviado para o servidor success(data,status,xhr) Opcional. Especifica a funo a ser executada, se o pedido for bem-sucedido Os parmetros adicionais: data contm os dados resultantes do pedido status contm o status da solicitao ("success", "notmodified", "error", "timeout", ou "parsererror") xhr contm o objeto XMLHttpRequest Exemplo: $("button").click(function(){ $.getJSON("demo_ajax_json.js",function(result){ $.each(result, function(i, field){ $("div").append(field + " "); }); }); }); $.getScript() Carrega e executa um JavaScript de um servidor usando AJAX com uma solicitao HTML GET. Sintaxe: $(selector).getScript(url,success(response,status)) url Obrigatrio. Especifica a URL para enviar a solicitao data Opcional. Especifica os dados a serem enviado para o servidor success(data,status,xhr) Opcional. Especifica a funo a ser executada, se o pedido for bem-sucedido Os parmetros adicionais: data contm os dados resultantes do pedido status contm o status da solicitao ("success", "notmodified", "error", "timeout", ou "parsererror") xhr contm o objeto XMLHttpRequest Exemplo: $("button").click(function(){ $.getScript("demo_ajax_script.js"); }); $.param() Cria uma representao serializada de uma matriz ou objeto (pode ser usado como uma URL de string de consulta para solicitaes AJAX) Sintaxe: $.param(object,trad) object Obrigatrio. Especifica uma matriz ou objeto para serializar trad Opcional. Um valor booleano que especifica se deve ou no usar o estilo tradicional de serializao de parmetros Exemplo: $("button").click(function(){ $("div").text($.param(personObj)); }); ajaxComplete() Especifica uma funo a ser executada quando a solicitao AJAX for concluda. Nota: A partir da verso 1.8 do jQuery, este mtodo s deve ser anexado ao documento. Ao contrrio ajaxSuccess(), funes especificadas com o mtodo ajaxComplete() ser executado quando a solicitao for concluda, mesmo que no seja bem-sucedida. Sintaxe: $(document).ajaxComplete(function(event,xhr,options))

function(event,xhr,options) Obrigatrio. Especifica a funo a ser executada quando a solicitao for concluda Os parmetros adicionais: event contem o objeto event xhr contem o objeto XMLHttpRequest options - contm as opes usadas na solicitao AJAX
Exemplo:

$(document).ajaxStart(function(){ $("#wait").css("display","block"); }); $(document).ajaxComplete(function(){ $("#wait").css("display","none"); }); ajaxError() Especifica uma funo a ser executada quando um pedido de AJAX falhar. Nota: A partir da verso 1.8 do jQuery, este mtodo s deve ser anexado ao documento. Sintaxe: $(document).ajaxError(function(event,xhr,options,exc)) Os parmetros adicionais: event contem o objeto event xhr contem o objeto XMLHttpRequest options - contm as opes usadas na solicitao AJAX exc - contm a exceptiion JavaScript, se ocorreu Exemplo: $(document).ajaxError(function(){ alert("An error occurred!"); }); ajaxSend() Especifica uma funo a ser executada antes da solicitao AJAX seja enviada Nota: A partir da verso 1.8 do jQuery, este mtodo s deve ser anexado ao documento. Sintaxe: $(document).ajaxSend(function(event,xhr,options))

function(event,xhr,options) Obrigatrio. Especifica a funo a ser executada antes do envio da solicitao Os parmetros adicionais: event contem o objeto event xhr contem o objeto XMLHttpRequest options - contm as opes usadas na solicitao AJAX Exemplo: $(document).ajaxSend(function(e,xhr,opt){ $("div").append("<p>Requesting: " + opt.url + "</p>"); });
ajaxStart() Especifica uma funo a ser executada quando comea a primeira solicitao AJAX Nota: A partir da verso 1.8 do jQuery, este mtodo s deve ser anexado ao documento. Sintaxe: $(document).ajaxStart(function())

function() Obrigatrio. Especifica a funo a ser executada quando a solicitao AJAX inicia Exemplo: $(document).ajaxStart(function(){ $(this).html("<img src='demo_wait.gif' />"); });
ajaxStop() Especifica uma funo a ser executada quando todas as solicitaes AJAX tiverem sido concludas Nota: A partir da verso 1.8 do jQuery, este mtodo s deve ser anexado ao documento. Sintaxe: $(document).ajaxStop(function())

function() Obrigatrio. Especifica a funo a ser executada quando as solicitaes AJAX terminam Exemplo: $(document).ajaxStop(function(){ alert("All AJAX requests completed");

}); ajaxSuccess() Especifica uma funo para ser executada quando uma solicitao AJAX completada com xito. Nota: A partir da verso 1.8 do jQuery, este mtodo s deve ser anexado ao documento. Sintaxe: $(document).ajaxSuccess(function(){ alert("AJAX request successfully completed"); });

function(event,xhr,options) Obrigatrio. Especifica a funo a ser executada, se a solicitao for bem-sucedida Os parmetros adicionais: event contem o objeto event xhr contem o objeto XMLHttpRequest options - contm as opes usadas na solicitao AJAX Exemplo: $(document).ajaxSuccess(function(){ alert("AJAX request successfully completed"); });
serialize() Codifica um conjunto de elementos form em uma string para submisso. Sintaxe: $(selector).serialize() Exemplo: $("button").click(function(){ $("div").text($("form").serialize()); }); serializeArray() Codifica um conjunto de elemento form em um array de nomes e valores para submisso. Sintaxe: $(selector).serializeArray() Exemplo: $("button").click(function(){ x=$("form").serializeArray(); $.each(x, function(i, field){ $("#results").append(field.name + ":" + field.value + " "); }); });

8.Outras propriedades
8.1.Mtodos genticos
data() Atribui dados ou recebe dados de um elemento especificado Dica: Para remover os dados use o mtodo removeData() Sintaxe: $(selector).data(name) name Opcional. Especifica o nome dos dados para recuperar. Se nenhum nome for especificado, este mtodo retornar todos os dados armazenados no elemento como um objeto Exemplo: $("#btn1").click(function(){ $("div").data("greeting", "Hello World"); }); $("#btn2").click(function(){ alert($("div").data("greeting"));

});

each() Executa uma funo para cada elemento corresponde Dica: o retorno false pode ser usado para parar o loop mais cedo. Sintaxe: $(selector).each(function(index,element)) function(index,element) Obrigatrio. A funo a ser executada para cada elemento selecionado.
index - A posio de ndice do seletor element - o elemento atual (o seletor "this" tambm pode ser usado) Exemplo: $("button").click(function(){ $("li").each(function(){ alert($(this).text()) }); });

get() Obter os elementos DOM correspondentes ao seletor Sintaxe: $(selector).get(index) index Opcional. Especifica qual elemento obter pelo ndice Exemplo: $("button").click(function(){ x=$("p").get(0); $("div").text(x.nodeName + ": " + x.innerHTML); }); index() Retorna a posio de ndice de elementos especificados em relao a outros elementos especificados. Os elementos podem ser especificados por seletores jQuery, ou um elemento DOM. Nota: Se o elemento no for encontrado, index() retornar -1 Sintaxe: Obtm a posio de ndice do primeiro elemento selecionado em relaao aos seus irmos $(selector).index()
Obter a posio de ndice de um elemento, em relao ao seletor. O elemento pode ser especificado usando um elemento DOM, ou um seletor jQuery. $(selector).index(element)

element Especifica o elemento para obter a posio de ndice. Pode ser um elemento DOM ou um seletor jQuery Exemplo: $("li").click(function(){ alert($(this).index()); }); removeData() Remove a parte previamente armazenada dos dados. Sintaxe: $(selector).removeData(name) name Opcional. Especifica o nome dos dados para remover. Se nenhum nome for especificado, este mtodo ir remover todos os dados armazenados a partir dos elementos selecionados Exemplo: $("#btn2").click(function(){ $("div").removeData("greeting"); alert("Greeting is: " + $("div").data("greeting")); });
Sintaxe: toArray() Recuperar todos os elementos DOM contidos no conjunto de jQuery, como um array

$(selector).toArray() Exemplo: $("button").click(function(){ x=$("li").toArray() for (i=0;i<x.length;i++) { alert(x[i].innerHTML); } });

8.2.Propriedades jQuery
context Contm o n de contexto DOM originalmente aprovado para jQuery() jquery Contm o nmero da verso do jQuery jQuery.fx.interval Contm a taxa (em milissegundos) em que animaes disparam jQuery.fx.off Globalmente desativar todas as animaes jQuery.support Uma coleo de propriedades que representam recursos de navegadores diferentes ou bugs (destinado para uso interno do jQuery) Sintaxe: jQuery.support.propvalue

propvalue Obrigatrio. Especifica a funo para testar. Os testes esto includos:

ajax boxModel changeBubbles checkClone checkOn cors cssFloat hrefNormalized htmlSerialize leadingWhitespace noCloneChecked noCloneEvent opacity optDisabled optSelected scriptEval() style submitBubbles tbody

Exemplo: $(document).ready(function(){ $("p").html("This browser can create XMLHttpRequest object: " + jQuery.support.ajax); }); length Contm o nmero de elementos no objeto jQuery Sintaxe: $(selector).length Exemplo: $("button").click(function(){ alert($("li").length); });

8.3.Navegao entre elementos

add() Adicionar elementos para o conjunto de elementos correspondentes

 addBack() Adicionar o anterior conjunto de elementos para o conjunto atual children() Obter os filhos de cada elemento do conjunto de elementos correspondentes closest() Para cada elemento do conjunto, receber o primeiro elemento que corresponde ao seletor testado pelo prprio elemento e percorrendo at o seus antessesores. contents() Receba os filhos de cada elemento no conjunto de elementos correspondentes each() Executar uma funo para cada elemento correspondente Dica: o retorno false pode ser usado para parar o loop mais cedo. Sintaxe: $(selector).each(function(index,element))

function(index,element) Obrigatrio. A funo a ser executada para cada elemento selecionado.

index - A posio de ndice do seletor element - o elemento atual (o seletor "this" tambm pode ser usado) Exemplo: $("button").click(function(){ $("li").each(function(){ alert($(this).text()) }); }); end() Termine a operao de filtragem mais recente na cadeia atual e retornar o conjunto de elementos correspondentes ao seu estado anterior eq() Reduz o conjunto de elementos correspondentes a um no ndice especificado filter() Reduz o conjunto de elementos correspondentes para aqueles que correspondem ao seletor ou passam na funo de teste find() Obter os descendentes de cada elemento do conjunto de elementos correspondentes first() Reduz o conjunto de elementos correspondestes para o primeiro elemento do conjunto has() Reduz o conjunto de elementos correspondentes para aqueles que tm um descendente que corresponde ao seletor / elemento DOM is() Verifica o conjunto de elementos correspondentes contra um objeto selector / elemento / jQuery, e retornar true se pelo menos um desses elementos coincide com os argumentos apresentados last() Reduz o conjunto de elementos correspondentes para o final do conjunto map() Passar cada elemento do conjunto correspondentes por de uma funo, e produz um novo objeto jQuery contendo os valores de retorno next() Obter o seguinte irmo de cada elemento do conjunto de elementos correspondentes. Se um seletor fornecido, ele recupera o prximo irmo s se ele corresponde ao selector nextAll() Obter todos os irmos seguintes de cada elemento no conjunto de elementos correspondentes nextUntil() selecionar tudo o que estiver depois de um elemento at um determinado elemento exclusive; not() Remove os elementos do conjunto de elementos correspondentes offsetParent() Retorna o primeiro elemento pai posicionado parent() Obtm o pai de cada elemento do conjunto de elementos correspondentes parents() Obtm os antepassados de cada elemento do conjunto de elementos correspondentes parentsUntil() seleciona todos os elementos-ancestrais de um elemento at um determinado ancestral exclusive; prev() Obtm o irmo imediatamente anterior, por cada elemento do conjunto de elementos correspondentes prevAll() Obtm todos os irmos anteriores de cada elemento do conjunto de elementos correspondentes prevUntil() seleciona tudo o que estiver antes de um elemento at um determinado elemento exclusive; siblings() Obter os irmos de cada elemento no conjunto de elementos correspondentes slice() Reduzi o conjunto de elementos correspondentes a um subconjunto especificado por um intervalo de ndices

9.Evitando conflitos
Como voc j sabe, jQuery usa o sinal $ como um atalho para jQuery. E se outros frameworks JavaScript tambm usar o sinal $ como um atalho? Alguns dos outros frameworks tambm usar o caractere $ como um atalho (como jQuery), e ento de repente voc tem duas estruturas diferentes usando o mesmo atalho, o que pode resultar em que seus scripts pararem de funcionar. A equipe jQuery j pensou sobre isso, e implementou o mtodo noConflict(). Mtodo noConflict() O mtodo noConflict() libera o domnio sobre o identificador de atalho $, para que outros scripts posam us-lo. Naturalmente que voc pode ainda usar jQuery, simplesmente escrevendo o nome completo, em vez de o atalho: $.noConflict(); jQuery(document).ready(function(){

jQuery("button").click(function(){ jQuery("p").text("jQuery is still working!"); }); }); Voc tambm pode criar seu prprio atalho muito facilmente. O noConflict () retorna uma referncia para jQuery, que voc pode salvar em uma varivel, para uso posterior. Aqui est um exemplo: var jq = $.noConflict(); jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("jQuery is still working!"); }); }); Se voc tem um bloco de cdigo jQuery que utiliza o atalho $ e voc no quer mudar tudo, voc pode passar o sinal $ como um parmetro para o mtodo pronto. Isso permite que voc acesse jQuery usando $, dentro dessa funo - fora dele, voc vai ter que usar "jQuery": $.noConflict(); jQuery(document).ready(function($){ $("button").click(function(){ $("p").text("jQuery is still working!"); }); });

I- Apndice JSON
JSON (JavaScript Object Notation - Notao de Objetos JavaScript) uma formatao leve de troca de dados. Para seres humanos, fcil de ler e escrever. Para mquinas, fcil de interpretar e gerar. Est baseado em um subconjunto da linguagem de programao JavaScript, Standard ECMA-262 3a Edio -Dezembro - 1999. JSON em formato texto e completamente independente de linguagem, pois usa convenes que so familiares s linguagens C e familiares, incluindo C++, C#, Java, JavaScript, Perl, Python e muitas outras. Estas propriedades fazem com que JSON seja um formato ideal de troca de dados. JSON est constitudo em duas estruturas: Uma coleo de pares nome/valor. Em vrias linguagens, isto caracterizado como um object, record, struct, dicionrio, hash table, keyed list, ou arrays associativas. Uma lista ordenada de valores. Na maioria das linguagens, isto caracterizado como uma array, vetor, lista ou sequncia. Estas so estruturas de dados universais. Virtualmente todas as linguagens de programao modernas as suportam, de uma forma ou de outra. aceitavel que um formato de troca de dados que seja independente de linguagem de programao se baseie nestas estruturas. Em JSON, os dados so apresentados desta forma: Um objeto um conjunto desordenado de pares nome/valor. Um objeto comea com { (chave de abertura) e termina com } (chave de fechamento). Cada nome seguido por : (dois pontos) e os pares nome/valor so seguidos por , (vrgula).

Uma array uma coleo de valores ordenados. O array comea com [ (conchete de abertura) e termina com ] (conchete de fechamento). Os valores so separados por , (vrgula).

Um valor (value, na imagem acima) pode ser uma cadeia de caracteres (string), ou um nmero, ou true ou false, ou null, ou um objeto ou uma array. Estas estruturas podem estar aninhadas.

Uma string uma coleo de nenhum ou mais caracteres Unicode, envolvido entre aspas duplas usando barras invertidas como caractere de escape. Um caractere est representando como um simples caractere de string. Uma cadeia de caracteres parecida com uma cadeia de caracteres em C ou Java.

Um nmero similar a um nmero em C ou Java, exceto quando no se usa os nmeros octais ou hexadecimais.

Espaos em branco podem ser inseridos em qualquer parte dos smbolos. Exceto pequenos detalhes de codificao, a linguagem completamente descrita.

REFERNCIAS
[W3] [JSON] Wscholl; jQuery Tutorial, http://www.w3schools.com/jquery/default.asp JSON; Introduo ao JSON, www.json.org/json-pt.html