Livro JQuery E Ajax um mero resumo

jQuery e Ajax

Um mero resumo

Jonas Mayer

versão 1.0

Sumário1.Introdução............................................................................................................................................................32.Sintaxe..................................................................................................................................................................43.Seletores...............................................................................................................................................................44.Eventos.................................................................................................................................................................7

4.1.Métodos de Eventos.....................................................................................................................................75.Efeitos................................................................................................................................................................15

5.1.Ocultar e mostrar........................................................................................................................................155.2.Desvanecer elementos................................................................................................................................155.3.Deslizar elementos (Slide)..........................................................................................................................165.4.Animação....................................................................................................................................................175.5.Parar animação...........................................................................................................................................185.6.Função callback..........................................................................................................................................195.7.Encadeamento............................................................................................................................................195.8.Filas............................................................................................................................................................19

6.jQuery HTML....................................................................................................................................................216.1.Obtendo conteúdo e atributos.....................................................................................................................216.2. Definindo conteúdo e atributos.................................................................................................................216.3.Adicionando elementos..............................................................................................................................226.4.Removendo elementos...............................................................................................................................236.5.Manipulando classes CSS..........................................................................................................................236.6.Dimensão....................................................................................................................................................24

7. AJAX.................................................................................................................................................................267.1.Métodos jQuery AJAX...............................................................................................................................267.2.Métodos AJAX...........................................................................................................................................27

8.Outras propriedades...........................................................................................................................................318.1.Métodos genéticos......................................................................................................................................318.2.Propriedades jQuery...................................................................................................................................338.3.Navegação entre elementos........................................................................................................................34

9.Evitando conflitos .............................................................................................................................................35I- Apêndice JSON ................................................................................................................................................35REFERÊNCIAS....................................................................................................................................................37

jQuery

1.IntroduçãoO 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 downloadSe 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 separadoQuando 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>

});});

O seletor .classO 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

:lt(no) $("ul li:lt(3)") Elementos da lista com um índice inferior 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çandocom "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.EventosTodas 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 EventosjQuery 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.currentTargetA 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.dataA 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.namespaceRetorna o namespace especificado quando o evento foi disparadoEsta 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.pageXRetorna 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.pageYRetorna 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 eventoDica: 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.relatedTargetRetorna o elemento alvo do mouse

$("div").mouseenter(function(event){ alert("relatedTarget is: " + event.relatedTarget);});

• event.resultContê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 eventoDica: 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.targetRetorna qual elemento DOM acionou o eventoMuitas 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.timeStampRetorna o número de milissegundos desde 1 º de janeiro de 1970, quando o evento é acionado

$("button").click(function(event){ $("span").text(event.timeStamp);});

• event.typeRetorna 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 focusInO 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 focusoutO 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 HTMLO 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 processartodos 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 filhosNota: 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 particularEste 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 carregadoComo 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 mostrarCom 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 elementosCom 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 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 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 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 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 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 exemplo seguinte demonstra o método slideUp():

$("#flip").click(function(){ $("#panel").slideToggle();});

5.4.AnimaçãoO 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 propriedadesObserve 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 relativosTambé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é-definidosVocê 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 filaPor 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çãoO 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 callbackA 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.EncadeamentoEncadeamento 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 selecionadosSintaxe:

$(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ãoExemplo:

$("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 processocontinue.Sintaxe:

$(selector).dequeue(queueName)

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

$("div").queue(function(){ $("div").css("background-color","red"); $("div").dequeue();});

• finish()Paradas, remove e completa todas as animações na fila para os elementos selecionadosEste 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ãoExemplo:

$("#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 atributosUma 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 atributosOs 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 CallbackTodos 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 elementosNó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>"; // Create element with HTML var txt2=$("<p></p>").text("Text."); // Create with jQueryvar txt3=document.createElement("p"); // Create with DOMtxt3.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 jQueryvar txt3=document.createElement("big"); // Create with DOMtxt3.innerHTML="jQuery!";$("img").after(txt1,txt2,txt3); // Insert new elements after img}

6.4.Removendo elementosPara 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 removidosO 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 CSSjQuery 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 CSSPara retornar o valor de uma propriedade CSS especifica, use a seguinte sintaxe:

css("propertyname");

Por exemplo:

$("p").css("background-color");

Definindo uma propriedade CSSPara 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 CSSPara 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ãojQuery tem vários métodos importantes para trabalhar com dimensões:

• width()• height()• innerWidth()

• innerHeight()

• outerWidth()

• outerHeight()

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 totaisO 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. AJAXAJAX é 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 AJAXMé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çãocallback 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 AJAXGET 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 $.getO 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


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


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ídaOs 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


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

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


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


$(document).ajaxStart(function())

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

$(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ídasNota: 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 terminamExemplo:

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

});

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


$(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-sucedidaOs parâmetros adicionais:


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 especificadoDica: 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 objetoExemplo:

$("#btn1").click(function(){ $("div").data("greeting", "Hello World");});$("#btn2").click(function(){ alert($("div").data("greeting"));

});

• each() – Executa uma função para cada elemento correspondeDica: 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 seletorSintaxe:

$(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á -1Sintaxe: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 jQueryExemplo:

$("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 arraySintaxe:

$(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 jQuerySintaxe:

$(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 } (chavede fechamento). Cada nome é seguido por : (dois pontos) e os pares nome/valor são seguidos por , (vírgula).

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 número, ou true ou false, ou null, ou um objeto ou uma array. Estas estruturas podem estar aninhadas.

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.

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 codificação, a linguagem é completamente descrita.

REFERÊNCIAS

[W3] Wscholl; jQuery Tutorial, http://www.w3schools.com/jquery/default.asp

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

http://www.json.org/json-pt.html

http://www.w3schools.com/jquery/default.asp

Livro JQuery E Ajax um mero resumo

Documents

Transcript of Livro JQuery E Ajax um mero resumo