Sei sulla pagina 1di 36

jQuery e Ajax

Um mero resumo

Jonas Mayer

versão 1.0

Sumário

1.Introdução

 

3

2.Sintaxe

4

3.Seletores

4

4.Eventos

7

 

4.1.Métodos 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.Animação

17

5.5.Parar animação

 

18

5.6.Função callback

19

5.7.Encadeamento

19

5.8.Filas

19

6.jQuery HTML

21

6.1.Obtendo conteúdo e atributos

21

6.2. Definindo conteúdo e atributos

21

6.3.Adicionando elementos

22

6.4.Removendo elementos

23

6.5.Manipulando classes CSS

23

 

6.6.Dimensão

24

7. AJAX

26

7.1.Métodos jQuery AJAX

26

 

7.2.Métodos

AJAX

27

8.Outras propriedades

31

8.1.Métodos genéticos

31

8.2.Propriedades jQuery

33

8.3.Navegação entre elementos

34

9.Evitando conflitos

35

I-

Apêndice JSON

 

35

REFERÊNCIAS

37

jQuery

1.Introdução

O objetivo do jQuery é para tornar mais fácil usar o JavaScript em seu website. JQuery é uma biblioteca JavaScript leve que tem por slogan "write less, do more" (escreva menos, faça mais). jQuery torna tarefas comuns que exigem muitas linhas de código JavaScript para realizar, em métodos que você pode chamados com uma única linha de código. jQuery também simplifica muito as coisas complicadas de JavaScript, como chamadas de AJAX e manipulação DOM.

A biblioteca jQuery contém as seguintes características:

manipulação HTML / DOM

manipulação CSS

métodos de eventos HTML

Efeitos e animações

AJAX

Utilitários

Dica: Além disso, jQuery tem plugins para praticamente qualquer tarefa.

Instalação Existem várias maneiras de começar 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 versões:

Production version - para sites

Development version - para testes e desenvolvimento

Download:

A biblioteca jQuery é um arquivo JavaScript único, e você faz referência a ele com a tag HTML <script> (note que a tag <script> deve ser dentro da seção <head>):

<head> <script src="jquery-1.9.1.min.js"></script> </head>

Alternativas para download Se você não 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 opções:

<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 usuários 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 rápido. Além disso, mais da CDN irá certificar-se que uma vez que um usuário solicita um arquivo a partir dele, será servido a partir do servidor mais próximo a eles, o que também leva a tempos de carregamento mais rápido.

Funções em um arquivo separado Quando demonstramos jQuery neste tutorial, as funções são adicionados diretamente para a seção <head>. No entanto, às vezes é preferível 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 seleção de elementos HTML e executar alguma ação sobre o elemento(s).

Sintaxe básica é: $(selector).action()

$ sinal para definir/acessar a jQuery

(selector) seletor para consultar ou encontrar elementos HTML

action() ação 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 métodos jQuery em nossos exemplos, estão dentro de um evento documento pronto (ready):

$(document).ready(function(){ // os métodos jQuery vão aqui });

Isso é para evitar qualquer código 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 também permite

que você tenha seu código JavaScript antes do corpo do seu documento, na secção de head. Dica: A equipe jQuery também criou um método ainda mais curto para o evento documento pronto:

$(function(){ // os métodos jQuery vão aqui });

Use a sintaxe que você preferir. Nós pensamos que o evento documento pronto é mais fácil de entender quando se lê o código.

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. São baseado nos Seletores CSS existentes e, além disso, possuem seus próprios seletores. Todo o tipo de seletores em jQuery, começar com o cifrão e parênteses: $().

O seletor de elementos

O seletor jQuery de elemento seleciona elementos baseado-se nas tags.

Você pode selecionar todos os elementos <p> em uma página 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 página, então você deve usar o seletor #id quando você quiser encontrar um elemento único e

exclusivo. Para encontrar um elemento com um ID específico, escrever um caractere #, seguido do ID do elemento:

$("#test")

Exemplo:

Quando um usuário clica em um botão, 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 específica.

Para encontrar elementos com uma classe específica, escreva um caractere ponto, seguido do nome da classe:

$(".test")

Exemplo:

Quando um usuário clica em um botão, os elementos com class = "test" serão escondidos:

$(document).ready(function(){

$("button").click(function(){

$(".test").hide();

});

});

A seguir uma tabela com todos os seletores:

Seletor

Exemplo

Seleciona

*

$("*")

Todos os elementos

#id

$("#lastname")

O elemento com a id=”lastname”

.class

$(".intro")

Todos os elementos da classe=”intro”

.class,.class

$(".intro,.demo")

Todos os elementos da classe “intro” ou “demo”

element

$("p")

Todos os elementos <p>

el1,el2,el3

$("h1,div,p")

Todos os elemntos <h1>, <div> e <p>

:first

$("p:first")

O primeiro elemento <p>

:last

$("p:last")

O último elemento <p>

:even

$("tr:even")

Todos os elementos até <tr>

:odd

$("tr:odd")

Todos os elementos impares <tr>

:first-child

$("p:first-child")

Todos os elementos <p> que são o primeiro filho de seu pai

:first-of-type

$("p:first-of-type")

Todos os elementos <p> que são o primeiro <p> de seu pai

:last-child

$("p:last-child")

Todos os elementos <p> que são o último filho do seu pai

:last-of-type

$("p:last-of-type")

Todos os elementos <p> que são o último <p> de seu pai

:nth-child(n)

$("p:nth-child(2)")

Todos os elementos <p> que são o segundo filho de seu pai

:nth-last-child(n)

$("p:nth-last-child(2)")

Todos os elementos <p> que são o segundo filho de seu pai, contando a partir do último filho

:nth-of-type(n)

$("p:nth-of-type(2)")

Todos os elementos <p> que são a segunda <p> de seu pai

:nth-last-of-type(n)

$("p:nth-last-of-type(2)")

Todos os elementos <p> que são o segundo <p> de seu pai, contando a partir do último filho

:only-child

$("p:only-child")

Todos os elementos <p> que são o único filho de seu pai

:only-of-type

$("p:only-of-type")

Todos os elementos <p> que são o único filho, de seu tipo, de seu pai

parent > child

$("div > p")

Todos os elementos <p> que são um filho direto de um elemento <div>

parent descendant

$("div p")

Todos os elementos <p> que são descendentes de um elemento <div>

element + next

$("div + p")

O elemento <p> que vem depois de cada elemento <div>

element ~ siblings

$("div ~ p")

Todos os elementos <p> que são irmãos de um elemento <div>

:eq(index)

$("ul li:eq(3)")

O quarto elemento em uma lista (índice começa em 0)

:gt(no)

$("ul li:gt(3)")

Elementos da lista, com um índice superior a 3

:not(selector)

$("input:not(:empty)")

Todos os elementos de entrada que não estão vazios

:header

$(":header")

Todos os elementos de cabeçalho <h1>, <h2>

:animated

$(":animated")

Todos os elementos de animated

:focus

$(":focus")

O elemento que atualmente tem o foco

:contains(text)

$(":contains('Hello')")

Todos os elementos que contém o texto "Hello"

:has(selector)

$("div:has(p)")

Todos <div> elementos que têm um elemento <p>

:empty

$(":empty")

Todos os elementos que estão vazios

:parent

$(":parent")

Todos os elementos que são pais de um outro elemento

:hidden

$("p:hidden")

Todos os elementos ocultos <p>

:visible

$("table:visible")

Todas as tabelas visíveis

:root

$(":root")

Elemento raiz do documento

:lang(language)

$("p:lang(de)")

Todos os elementos <p> com um valor de atributo lang começando com "de"

[attribute]

$("[href]")

Todos os elementos com um atributo href

[attribute=value]

$("[href='default.htm']")

Todos os elementos com um valor de atributo href igual a "default.htm"

[attribute!=value]

$("[href!='default.htm']")

Todos os elementos com um atributo href com valor diferente de "default.htm"

[attribute$=value]

$("[href$='.jpg']")

Todos os elementos com um valor de atributo href terminando com "jpg".

[attribute|=value]

$("[hreflang|='en']")

Todos os elementos com um valor de atributo hreflang começando com "en"

[attribute^=value]

$("[name^='hello']")

Todos os elementos com um valor do atributo name começando com "Hello"

[attribute~=value]

$("[name~='hello']")

Todos os elementos com um valor do atributo name que contenha

 

a

palavra "Hello"

[attribute*=value]

$("[name*='hello']")

Todos os elementos com um valor do atributo name que contenha

 

a

string "Olá"

:input

$(":input")

Todos os elementos de input

:text

$(":text")

Todos os elementos de input do tipo text

:password

$(":password")

Todos os elementos de input do tipo password

:radio

$(":radio")

Todos os elementos de input do tipo radio

:checkbox

$(":checkbox")

Todos os elementos de input do tipo checkbox

:submit

$(":submit")

Todos os elementos de input do tipo submit

:reset

$(":reset")

Todos os elementos de input do tipo reset

:button

$(":button")

Todos os elementos de input do tipo button

:image

$(":image")

Todos os elementos de input do tipo image

:file

$(":file")

Todos os elementos de input do tipo file

:enabled

$(":enabled")

Todos os elementos de input ativados

:disabled

$(":disabled")

Todos os elementos de input desativados

:selected

$(":selected")

Todos os elementos de input selecionados

:checked

$(":checked")

Todos os elementos de input assinalados

4.Eventos

Todas as ações de um visitante em uma página 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 parágrafos em uma página, você pode fazer isso:

$("p").click();

O próximo passo é definir o que deve acontecer quando o evento é acionado. Você deve passar uma função para o evento:

$("p").click(function(){ // a ação começa aqui!! });

4.1.Métodos de Eventos

$(document).ready()

Permite executar uma função 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 formulário). $("input").change(function(){ alert("The text has been changed."); }); Nota: Para menus de seleção, o evento change ocorre quando uma opção for selecionada. Para campos de texto ou áreas de texto, o evento change ocorre quando o campo perde o foco.

click()

Executado quando o usuário 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 ativação do evento, e é tipicamente igual a este.

$("h1,h2,p").click(function(event){

alert(event.currentTarget === this); });

event.data

A propriedade event.data contém os dados opcionais passados para um método de evento quando o atual manipulador de execução é 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 método 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 não ocorre nenhuma delegação. $("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: Espaços de nomes que começam com um sublinhado são 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 posição do mouse em relação à margem esquerda do documento

$(document).mousemove(function(event){ $("span").text("X: " + event.pageX + ", Y: " + event.pageY); });

event.pageY

Retorna a posição do mouse em relação à borda superior do documento

$(document).mousemove(function(event){ $("span").text("X: " + event.pageX + ", Y: " + event.pageY); });

event.preventDefault()

Impede a ação padrão do evento Dica: Use o método event.isDefaultPrevented() para verificar se o método 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

Contêm 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 método event.isImmediatePropagationStopped () para verificar se este método 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 método event.isPropagationStopped() para verificar se este método 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 número 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 botão 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 método focus() dispara o evento de foco, ou atribui uma função a ser executada quando ocorre um evento de foco.

Dica: Este método é frequentemente usado em conjunto com o método 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 contrário do método focus (), o método focusIn () também 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 método hover() usa duas funções e é uma combinação dos métodos mouseenter() e mouseleave().

A primeira função é executada quando o mouse entra o elemento HTML, e a segunda função é 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

método KeyDown() dispara o evento KeyDown, ou atribui uma função 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 botão é pressionado.

No entanto, o evento keypress não é acionado para todas as chaves (por exemplo, ALT, CTRL, SHIFT ESC). Use o método KeyDown () para também verificar estas teclas.

$("input").keypress(function(){

$("span").text(i+=1);

});

keyup()

O

evento keyup ocorre quando uma tecla do teclado é solta.

O

método keyup () dispara o evento keyup, ou atribui uma função 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 botão 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

método mousemove() dispara o evento mousemove, ou atribui uma função a ser executada quando ocorre um evento mousemove.

Nota: Cada vez que um usuário 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

método mouseout() dispara o evento mouseout, ou atribui uma função a ser executada quando ocorre um evento mouseout.

Nota: Ao contrário 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

método mouseover () dispara o evento mouseover, ou atribui uma função a ser executada quando ocorre um evento mouseover.

Nota: Ao contrário 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 botão do mouse é solto dentro do elemento HTML.

$("#p1").mouseup(function(){

alert("Mouse up over p1!"); });

off()

Remove os ouvintes adicionados com o método on() Nota: Para remover manipuladores de eventos específicos, o selector string deve coincidir com o que é passado para o método 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 método one().

Sintaxe:

$(selector).off(event,selector,function(eventObj),map)

event – Obrigatório. Especifica um ou mais eventos ou namespaces para remover do(s) elemento(s) selecionado(s). Múltiplos valores devem ser separados por espaço.

selector – Opcional. Um seletor que deve corresponder a uma originalidade passado para o método on() ao anexar manipuladores de eventos.

function(eventObj) – Opcional. Especifica uma função para rodar quando o evento ocorre.

map – Especifica um mapa do evento ({evento: função, evento: função,

})

que contém um ou mais eventos para

anexar os elementos e funções 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 método on () vão funcionar para os elementos atuais e futuros (como um novo

elemento criado por um script). Dica: Para remover manipuladores de eventos, use o método off (). Dica: Para colocar um evento que só acontece uma vez e, em seguida, é removido, use o método one().

Sintaxe:

$(selector).on(event,childSelector,data,function,map)

event – Obrigatório. Especifica um ou mais eventos ou namespaces para serem anexados aos elementos selecionados. Valores de evento múltiplos são separadas por um espaço.

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 função

function – Obrigatório. Especifica a função a ser executada quando o evento ocorrer

map – Especifica um mapa de eventos ({evento: função, evento: função,

})

que contém um ou mais eventos para

serem anexados ao elemento selecionado, e funções 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 – Obrigatório. Especifica um ou mais eventos para anexar aos elementos. Valores de evento múltiplas são separadas por um espaço.

data – Opcional. Especifica dados adicionais para passar para a função

function – Obrigatório. Especifica a função a ser executada quando o evento ocorrer

$("p").one("click",function(){

$(this).animate({fontSize:"+=6px"});

});

$.proxy()

Pega uma função existente e retorna uma nova sobre um contexto particular Este método é 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 função existente a ser chamado

context –O nome do objeto em que a função está

name – A função já existente cujo contexto será alterado (deve ser uma propriedade do objeto de contexto).

Exemplo:

$("button").click($.proxy(objPerson,"test"));

ready()

Especifica uma função 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 funções. Dica: O método ready () não deve ser utilizado em conjunto com <body onload="">.

Sintaxe:

$(document).ready(function)

O método ready() só pode ser usado no documento actual, assim, não é necessário selector:

$(function)

Exemplo:

$(document).ready(function(){

$("button").click(function(){

$("p").slideToggle();

});

});

resize()

O método resize () dispara o evento de redimensionamento, ou atribui uma função 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 método scroll() dispara o evento de rolagem, ou atribui uma função a ser executada quando ocorre um evento de rolagem.

O evento de rolagem ocorre quando o usuário 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

método select() dispara o evento select, ou atribui uma função a ser executada quando ocorre um evento select.

$("input").select(function(){ alert("Text marked!"); });

submit()

O método submit() dispara o evento submit, ou atribui uma função a der executada quando ocorre um evento submit.

O evento submit ocorre quando um formulário é submetido. $("form").submit(function(){ alert("Submitted"); });

trigger()

O método trigger() dispara o evento especificado e o comportamento padrão de um evento (como o envio do formulário) para os

elementos selecionados. Esse método é semelhante ao método triggerHandler(), exceto que triggerHandler() não dispara o comportamento padrão do evento.

Sintaxe:

$(selector).trigger(event,eventObj,param1,param2,

Exemplo:

$("button").click(function(){

$("input").trigger("select");

});

)

triggerHandler()

O método triggerHandler() dispara o evento especificado para o elemento selecionado.

Este método é semelhante ao método trigger(), exceto que trigger() também aciona o comportamento padrão de um evento (como a

submissão do formulário). 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 métodos hide() e show():

$("#hide").click(function(){

$("p").hide();

});

$("#show").click(function(){

$("p").show();

});

Sintaxe

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

O parâmetro de velocidade "speed" opcional especifica a velocidade da esconder/mostrar, e pode ter os seguintes valores: "slow",

"fast", ou em milissegundos.

O parâmetro opcional callback é uma função a ser executada após a conclusão do método hide() ou show() .

O exemplo seguinte demonstra o parâmetro speed com hide():

$("button").click(function(){

$("p").hide(1000);

});

toggle()

Com jQuery é possível alternar entre hide() e show() com toggle(). Elementos mostrados são escondidos e elementos ocultos são mostrados:

$("button").click(function(){

$("p").toggle();

});

Sintaxe:

$(selector).toggle(speed,callback);

O parâmetro de velocidade "speed" opcional especifica a velocidade da esconder/mostrar, e pode ter os seguintes valores: "slow",

"fast", ou em milissegundos.

O parâmetro opcional callback é uma função a ser executada após a conclusão do método toggle() .

5.2.Desvanecer elementos

Com jQuery é possível desvanecer elementos dentro e fora de visibilidade. Com jQuery é possível atenuar um elemento dentro e fora

de visibilidade.

jQuery tem os seguintes métodos fade:

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

O método fadeIn()

Usado para desvanecer um elemento oculto.

Sintaxe:

$(selector).fadeIn(speed,callback);

O parâmetro opcional speed especifica a velocidade de duração do efeito. Ele pode ter os seguintes valores "slow", "fast", ou

milisegundos.

O parâmetro opcional callback é uma função a ser executada após a conclusão do método.

O exemplo seguinte demonstra o método fadeIn() com parâmetros diferentes:

$("button").click(function(){

$("#div1").fadeIn();

$("#div2").fadeIn("slow");

$("#div3").fadeIn(3000);

});

O método fadeOut()

Usado para desvanecer elementos visiveis.

Sintaxe:

$(selector).fadeOut(speed,callback);

O parâmetro opcional speed especifica a velocidade de duração do efeito. Ele pode ter os seguintes valores "slow", "fast", ou

milisegundos.

O parâmetro opcional callback é uma função a ser executada após a conclusão do método.

O exemplo seguinte demonstra o método fadeOut() com parâmetros diferentes:

$("button").click(function(){

$("#div1").fadeOut();

$("#div2").fadeOut("slow");

$("#div3").fadeOut(3000);

});

O método fadeToggle()

Define o desvanecer tanto para elementos visíveis quanto para elementos ocultos. Age como os métodos fadeIn() e fadeOut() juntos.

Sintaxe:

$(selector).fadeToggle(speed,callback);

O parâmetro opcional speed especifica a velocidade de duração do efeito. Ele pode ter os seguintes valores "slow", "fast", ou

milisegundos.

O parâmetro opcional callback é uma função a ser executada após a conclusão do método.

O exemplo seguinte demonstra o método fadeToggle() com parâmetros diferentes:

$("button").click(function(){

$("#div1").fadeToggle();

$("#div2").fadeToggle("slow");

$("#div3").fadeToggle(3000);

});

O método fadeTo()

Define a opacidade ao desvanecer, entre 0 e 1.

Sintaxe:

$(selector).fadeTo(speed,opacity,callback);

O parâmetro opcional speed especifica a velocidade de duração do efeito. Ele pode ter os seguintes valores "slow", "fast", ou

milisegundos.

O parâmetro opcional callback é uma função a ser executada após a conclusão do método.

O exemplo seguinte demonstra o método fadeTo() com parâmetros 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 métodos de slides a seguir:

slideDown()

slideUp()

slideToggle()

O método slideDown()

Usado para deslizar um elemento pra baixo.

Sintaxe;

$(selector).slideDown(speed,callback);

O parâmetro opcional speed especifica a velocidade de duração do efeito. Ele pode ter os seguintes valores "slow", "fast", ou

milisegundos.

O parâmetro opcional callback é uma função a ser executada após a conclusão do método.

O exemplo seguinte demonstra o método slideDown():

$("#flip").click(function(){

$("#panel").slideDown();

});

O método slideUp()

Usado para deslizar um elemento para cima.

Sintaxe:

$(selector).slideUp(speed,callback);

O parâmetro opcional speed especifica a velocidade de duração do efeito. Ele pode ter os seguintes valores "slow", "fast", ou

milisegundos.

O parâmetro opcional callback é uma função a ser executada após a conclusão do método.

O exemplo seguinte demonstra o método slideUp():

$("#flip").click(function(){

$("#panel").slideUp();

});

O método slideToggle()

O método slideToggle alterna entre os métodos 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 parâmetro opcional speed especifica a velocidade de duração do efeito. Ele pode ter os seguintes valores "slow", "fast", ou milisegundos. O parâmetro opcional callback é uma função a ser executada após a conclusão do método.

O exemplo seguinte demonstra o método slideUp():

$("#flip").click(function(){

$("#panel").slideToggle();

});

5.4.Animação

O método animate() permite a criação de animações personalizadas.

Sintaxe:

$(selector).animate({params},speed,callback);

O

parâmetro param obrigatório define as propriedades CSS para ser animado.

O

parâmetro opcional speed especifica a velocidade de duração do efeito. Ele pode ter os seguintes valores "slow", "fast", ou

milisegundos.

O parâmetro opcional callback é uma função a ser executada após a conclusão do método.

O exemplo seguinte demonstra o método animate():

$("button").click(function(){

$("div").animate({left:'250px'});

});

Por padrão, todos os elementos HTML têm uma posição estática, e não pode ser movido. Para manipular a posição, lembre-se primeiro definir a propriedade CSS position do elemento para relative, fixed, ou absolute!

Manipulando múltiplas propriedades Observe que várias propriedades podem ser animados ao mesmo tempo:

$("button").click(function(){

$("div").animate({

left:'250px',

opacity:'0.5',

height:'150px',

width:'150px'

});

});

Usando valores relativos Também é possível definir valores relativos. Isso é possível 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 animação como "show", "hide", ou "toggle":

$("button").click(function(){

$("div").animate({

height:'toggle'

});

});

Usando a funcionalidade de fila Por padrão jQuery vem com a funcionalidade de fila para animações. Isto significa que se você escrever múltiplos animate(), elas serão chamadas uma após a outra. jQuery cria uma fila interna com essas chamadas de método. Em seguida, ele executa as chamadas uma por uma. Se você quer usar várias animações em sequência 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 animação

O método stop() é usado para parar animações ou efeitos antes que terminem. O método stop() funciona para todas as funções de

animação de jQuery.

Sintaxe;

$(selector).stop(stopAll,goToEnd);

O parâmetro opcional stopAll especifica se a fila de animação deve ser limpa ou não. O padrão é falso, o que significa a animação

ativa será interrompida, permitindo que as animações na fila possam ser realizadas posteriormente.

O parâmetro goToEnd opcional especifica se a animação atual deve ser completada imediatamente ou não. O padrão é falso.

Então, por padrão, o método stop() para a animação atual que está sendo realizada sobre o elemento selecionado.

O exemplo a seguir demonstra o método stop (), sem parâmetros:

$("#stop").click(function(){

$("#panel").stop();

});

5.6.Função callback

A função callback é executada depois que o efeito atual é 100% concluida.

Instruções JavaScript são executados linha por linha. No entanto, com os efeitos, a próxima linha de código pode ser executado

mesmo que o efeito não tenha terminado. Isso pode criar erros. Sintaxe típica:

$(selector).hide(speed,callback);

Exemplos:

O exemplo abaixo tem um parâmetro de retorno que é uma função que será executada após o efeito hide ser concluído:

$("button").click(function(){ $("p").hide("slow",function(){ alert("The paragraph is now hidden"); }); });

O exemplo a seguir não tem o parâmetro 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 múltiplos métodos JQuery em um mesmo elemento com uma única instrução. Dica: Desta forma, os navegadores não tem que encontrar o mesmo elemento (s) mais de uma vez. Para encadear uma ação, voçê simplesmente acrecenta a ação a ação anterior.

A seguir um exemplo de encadeamento dos métodos css (), slideUp(), e slideDown().

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

Nós também poderíamos ter adicionado mais chamadas de método, se necessário. Dica: Quando o encadeamento, a linha de código pode ser bastante longa. No entanto, o jQuery não é muito rigoroso sobre a sintaxe, você pode formatá-lo como quiser, incluindo quebras de linha e indentação.

Isso também funciona muito bem:

$("#p1").css("color","red")

.slideUp(2000)

.slideDown(2000);

jQuery joga fora o espaço extra e executa as linhas acima, como uma longa linha de código.

5.8.Filas

clearQueue()

Remove todas as funções na fila restantes dos elementos selecionados

Sintaxe:

$(selector).clearQueue(queueName)

queueName – Opcional. Especifica o nome da fila. O padrão é "fx", a fila de efeitos padrão

Exemplo:

$("button").click(function(){

$("div").clearQueue();

});

delay()

Define um atraso para todas as funções 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 padrão é "fx", a fila de efeitos padrão

Exemplo:

$("button").click(function(){

$("#div1").delay("slow").fadeIn();

$("#div2").delay("fast").fadeIn();

});

dequeue()

Remove a próxima função da fila, e, em seguida, executa a função Nota: Você deve garantir que o método dequeue() é chamado após a adição de uma função com queue(), para permitir que o processo continue. Sintaxe:

$(selector).dequeue(queueName) queueName – Opcional. Especifica o nome da fila. O padrão é "fx", a fila de efeitos padrão Exemplo:

$("div").queue(function(){

$("div").css("background-color","red");

$("div").dequeue();

});

finish()

Paradas, remove e completa todas as animações na fila para os elementos selecionados Este método é semelhante ao método .stop(true,true) exceto que finish() também faz com que todas as propriedades CSS de todas

as animações de fila parem. Sintaxe:

$(selector).finish(queueName)

queueName – Opcional. Especifica o nome da fila. O padrão é "fx", a fila de efeitos padrão

Exemplo:

$("#complete").click(function(){

$("div").finish();

});

queue()

Mostra as filas de funções dos elementos selecionados. Uma fila é uma ou mais funções esperando para serem executadas. O método da queue() pode ser utilizado em conjunto com o método de retirada da dequeue() Sintaxe:

$(selector).queue(queueName)

queueName – Opcional. Especifica o nome da fila. O padrão é "fx", a fila de efeitos padrão

Exemplo:

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

6.jQuery HTML

6.1.Obtendo conteúdo e atributos

Uma parte muito importante do jQuery é a possibilidade de manipular o DOM. jQuery vem com um monte de métodos DOM relacionados que tornam fácil acessar e manipular elementos e atributos.

Pegando conteúdo com text(), html(), e val() Três simples, mas úteis, métodos jQuery para a manipulação de DOM são:

text() - Define ou retorna o conteúdo de texto de elementos selecionados

html() - Define ou retorna o conteúdo de elementos selecionados (incluindo marcação HTML)

val() - Define ou retorna o valor dos campos de formulário

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 método 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 conteúdo e atributos

Os métodos para obter conteúdo são os mesmos para defini-lo.

text() - Define ou retorna o conteúdo de texto de elementos selecionados

html() - Define ou retorna o conteúdo de elementos seleccionados (incluindo marcação HTML)

val() - Define ou retorna o valor dos campos de formulário

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 função Callback Todos os três métodos jQuery acima: text(), html(), e val(), também vem com uma função callback. A função callback tem dois parâmetros: o índice do elemento atual na lista de elementos selecionados e o valor original. Você, então, retornar a string que você deseja usar como o novo valor da função.

O exemplo a seguir demonstra text() e html() com uma função 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 método attr() também é 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 método attr() também permite que você defina vários 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

método attr(), também vem com uma função callback.

O

exemplo a seguir demonstra attr () com uma função callback:

$("button").click(function(){ $("#w3s").attr("href", function(i,origValue){ return origValue + "/jquery"; }); });

6.3.Adicionando elementos

Nós veremos quatro métodos jQuery que são usados para adicionar novos conteúdos:

append() - Insere conteúdo no final dos elementos selecionados

prepend() - Insere conteúdo no começo dos elementos selecionados

after() - Insere o conteúdo após os elementos selecionados

before() - Insere o conteúdo 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 vários elementos

É possível criar um número infinito de elementos, que podem ser gerados usando HTML, jQuery ou JavaScript.

Veja os exemplos a seguir:

function appendText()

{

var txt1="<p>Text.</p>";

var txt2=$("<p></p>").text("Text.");

var txt3=document.createElement("p"); // Create with DOM

txt3.innerHTML="Text.";

// Create element with HTML

// Create with jQuery

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

}

// Append the new elements

function afterText()

{

var txt1="<b>I </b>"; var txt2=$("<i></i>").text("love ");

// Create element with HTML // 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 conteúdos, há dois métodos 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 método remove() aceita um parâmetro que permite filtrar os elementos a serem removidos. O parâmetro 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 vários métodos para a manipulação de CSS. Nós veremos os seguintes métodos:

addClass() - Adiciona uma ou mais classes para os elementos selecionados

removeClass() - Remove uma ou mais classes a partir dos elementos selecionados

toggleClass() - Alterna entre adição / remoção 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 página:

.important

{

font-weight:bold;

font-size:xx-large;

}

.blue

{

color:blue;

}

Método addClass()

$("button").click(function(){

$("h1,h2,p").addClass("blue");

$("div").addClass("important");

});

Você também pode especificar várias classes dentro do método addClass ():

$("button").click(function(){ $("#div1").addClass("important blue"); });

Método removeClass()

$("button").click(function(){

$("h1,h2,p").removeClass("blue");

});

Método toggleClass()

$("button").click(function(){

$("h1,h2,p").toggleClass("blue");

});

Método css() O método 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 múltiplas propriedades CSS Para definir múltiplas propriedades CSS, use as seguinte sintaxe:

css({"propertyname":"value","propertyname":"value",

Por exemplo:

});

$("p").css({"background-color":"yellow","font-size":"200%"});

6.6.Dimensão

jQuery tem vários métodos importantes para trabalhar com dimensões:

width()

height()

innerWidth()

com dimensões: • width() • height() • innerWidth() • innerHeigh t() • outerWidt h() • outerHeigh

innerHeigh

t()

outerWidt

h()

outerHeigh

t()

Métodos width() e height() O método width() define ou retorna a largura de um elemento (não inclui o preenchimento, borda ou margem). O método height() define ou retorna a altura de um elemento (não 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);

});

Métodos 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);

});

Métodos 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

método outerWidth (true) retorna a largura de um elemento (inclui o padding, border e margin).

O

método 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 página da web - sem recarregar a página inteira.

AJAX = Asynchronous JavaScript And XML.

Qual é a relação de jQuery com AJAX ? jQuery oferece diversos métodos para a funcionalidade de AJAX. Com os métodos 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 página web! Sem jQuery, codificar AJAX pode ser um pouco complicado! Escrever código AJAX regular pode ser um pouco complicado, porque os navegadores diferentes têm sintaxe diferente para a implementação de AJAX. Isto significa que você terá que escrever código extra para testar diferentes navegadores. No entanto, a equipe jQuery tem cuidado disso para nós, para que possamos escrever a funcionalidade de AJAX com apenas uma única linha de código.

7.1.Métodos jQuery AJAX

Método load()

O método load() carrega os dados de um servidor e coloca os dados retornados no elemento selecionado.

Sintaxe:

$(selector).load(URL,data,callback);

O

parâmetro URL obrigatório especifica a URL que você deseja carregar.

O

parâmetro opcional data especifica uma série de strings de consulta com valores pares chave/valor para enviar junto com o

request.

O parâmetro opcional calback é o nome de uma função a ser executada depois de o método load() é completado.

Aqui está o conteúdo 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 conteúdo do arquivo "demo_test.txt" em um elemento <div> específico:

$("#div1").load("demo_test.txt");

O parâmetro opcional callback especifica uma função de retorno para ser executado quando o método load() é concluído. A função

callback pode ter diferentes parâmetros:

responseTxt - contém o conteúdo resultante se a chamada sucesso

statusTXT - contém o estado da chamada

xhr - contém o objeto XMLHttpRequest

O exemplo a seguir exibe uma caixa de alerta após a conclusão do método load(). Se o método load() tiver sucesso, ele exibe

"conteúdo 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.Métodos AJAX

GET e POST

O jQuery get() e post() métodos são utilizado para solicitar os dados do servidor com uma requisição HTTP GET ou POST.

Método $.get()

O método $.get() requisita dados do servidor com uma requisição HTTP GET.

Sintaxe:

$.get(URL,callback);

O

parâmetro obrigatório URL especifica a URL que você deseja solicitar.

O

parâmetro callback opcional é o nome de uma função a ser executada se a solicitação for bem sucedida.

$.get(URL,data,function(data,status,xhr),dataType)

url –O parâmetro obrigatório URL especifica a URL que você deseja solicitar.

data – Opcional. Especifica dados para enviar para o servidor, juntamente com a solicitação

function(data,status,xhr) – Opcional. Especifica uma função a ser executada, se o pedido for bem-sucedido Os parâmetros adicionais:

data – contém os dados resultantes do pedido

status – contém o status da solicitação ("success", "notmodified", "error", "timeout", ou "parsererror")

xhr – contêm o objeto XMLHttpRequest

dataType – Opcional. Especifica o tipo de dados esperado da resposta do servidor. Por padrão jQuery executa uma suposição

automática. Entre os tipos possíveis: “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); }); });

Método $.post()

O método $.post() requisita dados do servidor usando uma requisição HTTP POST.

Sintaxe

$.post(URL,data,callback);

O

parâmetro obrigatório URL especifica a URL que você deseja solicitar.

O

parâmetro callback opcional é o nome de uma função a ser executada se a solicitação for bem sucedida.

$(selector).post(URL,data,function(data,status,xhr),dataType)

Os parâmetros são os mesmos do método $.get

O exemplo a seguir usa o método $post() para enviar alguns dados junto com a requisição.:

$("button").click(function(){

$.post("demo_test_post.asp",

{

name:"Donald Duck",

city:"Duckburg"

}, function(data,status){ alert("Data: " + data + "\nStatus: " + status); }); });

$.ajax()

Executa uma solicitação assíncrona AJAX

Todos os métodos jQuery para AJAX utilizam o método ajax(). Este método é usado principalmente para pedidos em que os outros métodos não podem ser utilizados.

Sintaxe:

$.ajax({name:value, name:value,

})

Os parâmetros especificam um ou mais pares nome/valor para a requisição AJAX.

Os possíveis parâmetros nome/valor são:

async – Um valor booleano que indica se a solicitação deve ser tratada assíncronamente ou não. O padrão é true

beforeSend(xhr) – A função a ser executada antes que o pedido seja enviado

cache – Um valor booleano que indica se o navegador deve armazenar em cache as páginas solicitadas. O padrão é true

complete(xhr,status) –A função a ser executada quando a solicitação for concluída (depois de funções de erro e sucesso).

contentType –O tipo de conteúdo utilizado durante o envio de dados para o servidor. O padrão é: "application/x-www- form-urlencoded"

context –Especifica o valor “this” para todas as funções callback relacionadas a AJAX

data –Especifica os dados a serem enviado para o servidor

dataFilter(data,type) –A função 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 função a ser executada se a solicitação falhar.

global –Um valor booleano especificando se deve ou não disparar manipuladores de eventos globais AJAX para a solicitação.O padrão é true.

ifModified –Um valor booleano que especifica se uma solicitação só é bem sucedida se a resposta mudou desde a última solicitação. O padrão é: false.

jsonp –Uma string que substitui a função callback em uma solicitação jsonp.

jsonpCallback –Especifica um nome para a função callback em uma solicitação jsonp

password –Especifica uma senha para ser usada em uma solicitação de autenticação de acesso HTTP.

processData –Um valor booleano que especifica se os dados enviados com a solicitação devem ser transformados em

uma string de consulta. O padrão é true

scriptCharset –Especifica a codificação para a solicitação

success(result,status,xhr) –A função a ser executada quando a solicitação for bem-sucedida

timeout –O limite de tempo (em milissegundos) para a solicitação

traditional –Um valor booleano que especifica se deve ou não usar o estilo tradicional de serialização de parâmetros

type –Especifica o tipo de solicitação. (GET ou POST)

url –Especifica a URL destino do pedido. O padrão é a página atual

username –Especifica um login para ser usado em uma solicitação de autenticação de acesso HTTP.

xhr – A função usada para criar o objeto XMLHttpRequest

Exemplo:

$("button").click(function(){ $.ajax({url:"demo_test.txt",success:function(result){

$("#div1").html(result);

}});

});

$.ajaxPrefilter()

Manipula as opções personalizadas do Ajax ou modifica as opções existentes antes de que cada solicitação seja enviada e antes que sejam processadas por $.ajax()

$.ajaxSetup()

Define os valores padrão para futuras solicitações AJAX

Sintaxe:

$.ajaxSetup({name:value, name:value,

})

Os parâmetros especificam um ou mais pares nome/valor para a requisição AJAX. Os possíveis parâmetros nome/valor são 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 transmissão de dados Ajax

$.getJSON()

Carrega dados no formato JSON de um servidor usando uma solicitação HTTP GET Sintaxe:

$(selector).getJSON(url,data,success(data,status,xhr))

url – Obrigatório. Especifica a URL para enviar a solicitação

data – Opcional. Especifica os dados a serem enviado para o servidor

success(data,status,xhr) – Opcional. Especifica a função a ser executada, se o pedido for bem-sucedido

Os parâmetros adicionais:

data – contém os dados resultantes do pedido

status – contém o status da solicitação ("success", "notmodified", "error", "timeout", ou "parsererror")

xhr – contêm 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 solicitação HTML GET.

Sintaxe:

$(selector).getScript(url,success(response,status))

url – Obrigatório. Especifica a URL para enviar a solicitação

data – Opcional. Especifica os dados a serem enviado para o servidor

success(data,status,xhr) – Opcional. Especifica a função a ser executada, se o pedido for bem-sucedido

Os parâmetros adicionais:

data – contém os dados resultantes do pedido

status – contém o status da solicitação ("success", "notmodified", "error", "timeout", ou "parsererror")

xhr – contêm o objeto XMLHttpRequest Exemplo:

$("button").click(function(){

$.getScript("demo_ajax_script.js");

});

$.param()

Cria uma representação serializada de uma matriz ou objeto (pode ser usado como uma URL de string de consulta para

solicitações AJAX) Sintaxe:

$.param(object,trad)

object – Obrigatório. Especifica uma matriz ou objeto para serializar

trad – Opcional. Um valor booleano que especifica se deve ou não usar o estilo tradicional de serialização de

parâmetros

Exemplo:

$("button").click(function(){

$("div").text($.param(personObj));

});

ajaxComplete()

Especifica uma função a ser executada quando a solicitação AJAX for concluída. Nota: A partir da versão 1.8 do jQuery, este método só deve ser anexado ao documento. Ao contrário ajaxSuccess(), funções especificadas com o método ajaxComplete() será executado quando a solicitação for concluída, mesmo que não seja bem-sucedida. Sintaxe:

$(document).ajaxComplete(function(event,xhr,options))

function(event,xhr,options) – Obrigatório. Especifica a função a ser executada quando a solicitação for concluída Os parâmetros adicionais:

event – contem o objeto event

xhr – contem o objeto XMLHttpRequest

options - contém as opções usadas na solicitação AJAX

Exemplo:

$(document).ajaxStart(function(){

$("#wait").css("display","block");

});

$(document).ajaxComplete(function(){

$("#wait").css("display","none");

});

ajaxError()

Especifica uma função a ser executada quando um pedido de AJAX falhar. Nota: A partir da versão 1.8 do jQuery, este método só deve ser anexado ao documento. Sintaxe:

$(document).ajaxError(function(event,xhr,options,exc))

Os parâmetros adicionais:

event – contem o objeto event

xhr – contem o objeto XMLHttpRequest

options - contém as opções usadas na solicitação AJAX

exc - contém a exceptiion JavaScript, se ocorreu Exemplo:

$(document).ajaxError(function(){ alert("An error occurred!"); });

ajaxSend()

Especifica uma função a ser executada antes da solicitação AJAX seja enviada Nota: A partir da versão 1.8 do jQuery, este método só deve ser anexado ao documento. Sintaxe:

$(document).ajaxSend(function(event,xhr,options))

function(event,xhr,options) – Obrigatório. Especifica a função a ser executada antes do envio da solicitação Os parâmetros adicionais:

event – contem o objeto event

xhr – contem o objeto XMLHttpRequest

options - contém as opções usadas na solicitação AJAX

Exemplo:

$(document).ajaxSend(function(e,xhr,opt){ $("div").append("<p>Requesting: " + opt.url + "</p>"); });

ajaxStart()

Especifica uma função a ser executada quando começa a primeira solicitação AJAX Nota: A partir da versão 1.8 do jQuery, este método só deve ser anexado ao documento. Sintaxe:

$(document).ajaxStart(function())

function() – Obrigatório. Especifica a função a ser executada quando a solicitação AJAX inicia

Exemplo:

$(document).ajaxStart(function(){ $(this).html("<img src='demo_wait.gif' />"); });

ajaxStop()

Especifica uma função a ser executada quando todas as solicitações AJAX tiverem sido concluídas Nota: A partir da versão 1.8 do jQuery, este método só deve ser anexado ao documento.

Sintaxe:

$(document).ajaxStop(function())

function() – Obrigatório. Especifica a função a ser executada quando as solicitações AJAX terminam

Exemplo:

$(document).ajaxStop(function(){ alert("All AJAX requests completed");

});

ajaxSuccess()

Especifica uma função para ser executada quando uma solicitação AJAX é completada com êxito.

Nota: A partir da versão 1.8 do jQuery, este método só deve ser anexado ao documento. Sintaxe:

$(document).ajaxSuccess(function(){ alert("AJAX request successfully completed"); });

function(event,xhr,options) – Obrigatório. Especifica a função a ser executada, se a solicitação for bem-sucedida Os parâmetros adicionais:

event – contem o objeto event

xhr – contem o objeto XMLHttpRequest

options - contém as opções usadas na solicitação AJAX Exemplo:

$(document).ajaxSuccess(function(){ alert("AJAX request successfully completed"); });

serialize()

Codifica um conjunto de elementos form em uma string para submissão.

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 submissão. 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.Métodos genéticos

data() – Atribui dados ou recebe dados de um elemento especificado Dica: Para remover os dados use o método removeData() Sintaxe:

$(selector).data(name)

name – Opcional. Especifica o nome dos dados para recuperar. Se nenhum nome for especificado, este método 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 função 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) – Obrigatório. A função a ser executada para cada elemento selecionado.

index - A posição de índice do seletor

element - o elemento atual (o seletor "this" também 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 posição de índice de elementos especificados em relação a outros elementos especificados. Os elementos podem ser especificados por seletores jQuery, ou um elemento DOM. Nota: Se o elemento não for encontrado, index() retornará -1 Sintaxe:

Obtém a posição de índice do primeiro elemento selecionado em relaçao aos seus irmãos $(selector).index()

Obter a posição de índice de um elemento, em relação 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 posição 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 método irá remover todos os dados armazenados a partir dos elementos selecionados Exemplo:

$("#btn2").click(function(){

$("div").removeData("greeting"); alert("Greeting is: " + $("div").data("greeting")); });

toArray() – Recuperar todos os elementos DOM contidos no conjunto de jQuery, como um array

Sintaxe:

$(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 – Contém o nó de contexto DOM originalmente aprovado para jQuery()

jquery – Contém o número da versão do jQuery

jQuery.fx.interval – Contém a taxa (em milissegundos) em que animações disparam

jQuery.fx.off – Globalmente desativar todas as animações

jQuery.support – Uma coleção de propriedades que representam recursos de navegadores diferentes ou bugs (destinado para uso interno do jQuery) Sintaxe:

jQuery.support.propvalue

propvalue – Obrigatório. Especifica a função para testar. Os testes estão incluídos:

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 – Contém o número de elementos no objeto jQuery

Sintaxe:

$(selector).length

Exemplo:

$("button").click(function(){

alert($("li").length);

});

8.3.Navegação 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 próprio elemento e percorrendo até o seus antessesores.

contents() – Receba os filhos de cada elemento no conjunto de elementos correspondentes

each() – Executar uma função 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) – Obrigatório. A função a ser executada para cada elemento selecionado.

index - A posição de índice do seletor

element - o elemento atual (o seletor "this" também pode ser usado)

Exemplo:

$("button").click(function(){

$("li").each(function(){

alert($(this).text())

});

});

end() – Termine a operação 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 função 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 têm 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 função, e produz um novo objeto jQuery contendo os valores de retorno

next() – Obter o seguinte irmão de cada elemento do conjunto de elementos correspondentes. Se um seletor é fornecido, ele recupera o próximo irmão só se ele corresponde ao selector

nextAll() – Obter todos os irmãos 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() – Obtém o pai de cada elemento do conjunto de elementos correspondentes

parents() – Obtém 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() – Obtém o irmão imediatamente anterior, por cada elemento do conjunto de elementos correspondentes

prevAll() – Obtém todos os irmãos 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 irmãos 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 também usar o sinal $ como um atalho?

Alguns dos outros frameworks também usar o caractere $ como um atalho (como jQuery), e então 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 método noConflict().

Método noConflict() O método noConflict() libera o domínio 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ê também pode criar seu próprio atalho muito facilmente. O noConflict () retorna uma referência para jQuery, que você pode salvar em uma variável, 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 código jQuery que utiliza o atalho $ e você não quer mudar tudo, você pode passar o sinal $ como um parâmetro para o método pronto. Isso permite que você acesse jQuery usando $, dentro dessa função - fora dele, você vai ter que usar "jQuery":

$.noConflict(); jQuery(document).ready(function($){ $("button").click(function(){ $("p").text("jQuery is still working!"); }); });

I- Apêndice JSON

JSON (JavaScript Object Notation - Notação de Objetos JavaScript) é uma formatação leve de troca de dados. Para seres humanos, é fácil de ler e escrever. Para máquinas, é fácil de interpretar e gerar. Está baseado em um subconjunto da linguagem de programação JavaScript, Standard ECMA-262 3a Edição -Dezembro - 1999. JSON é em formato texto e completamente independente de linguagem, pois usa convenções que são 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á constituído em duas estruturas:

Uma coleção de pares nome/valor. Em várias linguagens, isto é caracterizado como um object, record, struct, dicionário, hash table, keyed list, ou arrays associativas. Uma lista ordenada de valores. Na maioria das linguagens, isto é caracterizado como uma array, vetor, lista ou sequência. Estas são estruturas de dados universais. Virtualmente todas as linguagens de programação modernas as suportam, de uma forma ou de outra. É aceitavel que um formato de troca de dados que seja independente de linguagem de programação se baseie nestas estruturas.

Em JSON, os dados são apresentados desta forma:

Um objeto é um conjunto desordenado de pares nome/valor. Um objeto começa com { (chave de abertura) e termina com } (chave de fechamento). Cada nome é seguido por : (dois pontos) e os pares nome/valor são seguidos por , (vírgula).

e os pares nome/valor são seguidos por , (vírgula). Uma array é uma coleção de valores

Uma array é uma coleção de valores ordenados. O array começa com [ (conchete de abertura) e termina com ] (conchete de fechamento). Os valores são separados por , (vírgula).

Um valor (value, na imagem acima) pode ser uma cadeia de caracteres (string), ou um

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

objeto ou uma array. Estas estruturas podem estar aninhadas. Uma string é uma coleção de nenhum

Uma string é uma coleção 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.

é parecida com uma cadeia de caracteres em C ou Java. Um número é similar a

Um número é similar a um número em C ou Java, exceto quando não se usa os números octais ou hexadecimais.

Espaços em branco podem ser inseridos em qualquer parte dos símbolos. Exceto pequenos detalhes de

Espaços em branco podem ser inseridos em qualquer parte dos símbolos. Exceto pequenos detalhes de codificação, a linguagem é completamente descrita.

REFERÊNCIAS

[W3]

[JSON]

JSON; Introdução ao JSON, www.json.org/json-pt.html