. $(".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 selecionar e manipular elementos HTML (s). (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

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 cl asse 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

el1,el2,el3

$("h1,div,p")

Todos os elemntos

,

e

:first

$("p:first")

O primeiro elemento

:last

$("p:last")

O último elemento

:even

$("tr:even")

Todos os elementos até

: odd

$("tr:odd")

Todos os elementos impares

:first-child

$("p:first-child")

Todos os elementos

que são o primeiro filho de seu pai

:first-of-type

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

Todos os elementos

que são o primeiro

de seu pai

:last-child

$("p:last-child")

Todos os elementos

que são o último filho do seu pai

:last-of-type

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

Todos os elementos

que são o último

de seu pai

:nth-child(n)

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

Todos os elementos

que são o segundo filho de seu pai

:nth-last-child(n)

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

Todos os elementos

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

que são a segunda

de seu pai

:nth-last-of-type(n)

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

Todos os elementos

que são o segundo

de seu pai, contando a partir do último filho

:only-child

$("p:only-child")

Todos os elementos

que são o único filho de seu pai

:only-of-type

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

Todos os elementos

que são o único filho, de seu tipo, de seu  pai

 parent > child

$("div > p")

Todos os elementos

que são um filho direto direto de um elemento

 parent descendant

$("div p")

Todos os elementos

que são descendentes descendentes de um elemento

element + next

$("div + p")

O elemento

que vem depois de cada elemento

element ~ siblings

$("div ~ p")

Todos os elementos

que são irmãos de um elemento

: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

,

...

: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

elementos que têm um elemento

: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

:visible

$("table:visible")

Todas as tabelas visíveis

:root

$(":root")

Elemento raiz do documento

:lang(language)

$("p:lang(de)")

Todos os elementos

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 os el elementos co com um um va valor de de at atributo hhrref ig 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 co com um um va valor do do at atributo nnaame co 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 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ê 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 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 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 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. event.delegateTarget é igual a event.currentTarget, se o evento é diretamente ligado a um elemento e não ocorre nenhuma Dica: event.delegateTarget delegação. $("div").on("click","button",function(event){ $(event.delegateTarget).css("background-color", $(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 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 alert("relatedTarget is: " + event.relatedTarget); 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 alert("You entered p1!"); }, function(){ alert("Bye! You 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 não é acionado para todas as chaves chaves (por exemplo, ALT, 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 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 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. 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. 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. função, evento: função, ...}) que contém um ou mais eventos eventos para map – Especifica um mapa do evento ({evento: função, 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) 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 ◦

event – Obrigatório. Especifica um ou

◦

◦ ◦ ◦

$("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 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 . 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 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, 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 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() 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() fadeToggle() com parâmetros diferentes: $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); O método fadeTo() fadeTo() Define a opacidade ao desvanecer, entre 0 e 1. Sintaxe: $(selector).fadeTo(speed,opacity $(selector).fadeTo(speed,opacity,callback); ,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() 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 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() 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 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

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 mais chamadas de método, se necessário. 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 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) ◦ ◦

velocidade do atraso. Em milissegundos ou speed – Opcional. Especifica a velocidade

“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 DOM relacionados que tornam fácil acessar e manipular 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: 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: 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("Hello world!"); }); $("#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 atual na lista de elementos selecionados selecionados e o valor original. Você, 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 world! (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", "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){ function(i,origValue){ return origValue + "/jquery"; }); });

6.3.Adicionando elementos  Nós veremos quatro métodos jQuery 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 antes os elementos selecionados before() - Insere o conteúdo antes • • • •

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() appendText() { var txt1="

Text.

"; txt1="

Text.

"; // Create element with HTML var txt2=$("

").text("T txt2=$("

").text("Text."); ext."); // Create with jQuery var txt3=document.createElement("p"); txt3=document.createElement("p"); // Create with DOM txt3.innerHTML="Text.";

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

// Append the new elements

function afterText() afterText() { var txt1="I "; // Create element with HTML var txt2=$("").text("love "); // Create with jQuery var txt3=document.createElement("big"); txt3=document.createElement("big"); // Create with 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 r emovidos 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. jQuery. O exemplo a seguir remove todos os elementos

com class = "italic": $("p").remove(".italic");

6.5.Manipulando classes CSS   jQuery tem vários métodos para a manipulação manipulação de CSS. Nós veremos os seguintes 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 importantes para trabalhar com dimensões: • • •

width() height() innerWidth() •

•

•

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

especificado: $("button").click(function(){ var txt=""; txt+="Width: " + $("#div1").width() + "
"; txt+="Height: " + $("#div1").height(); $("#div1").html(txt); }); O exemplo a seguir define a largura e altura de um elemento

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

especificado: $("button").click(function(){ var txt=""; txt+="Inner width: " + $("#div1").innerWidth() + "
"; txt+="Inner height: " + $("#div1").innerHeight(); $("#div1").html(txt); }); Métodos outerWidth() e outerHeight() O outerWidth () retorna a largura largura de um elemento (inclui padding e de border). O outerHeight () retorna a altura de um elemento (inclui padding padding e de border). O exemplo a seguir retorna o outer-width/height de um elemento

especificado: $("button").click(function(){ var txt=""; txt+="Outer width: " + $("#div1").outerWidth() + "
"; 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, padding, border e margin). $("button").click(function(){ var txt=""; txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "
"; 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 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. 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":

jQuery and AJAX is FUN!!!

This is some text in a paragraph.

O exemplo seguinte carrega o conteúdo do arquivo "demo_test.txt" em um elemento

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 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.status+": "+xhr.statusTe "+xhr.statusText); xt); }); });

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. POST. Método $.get() O método $.get() requisita dados do servidor com uma requisição HTTP GET. 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 ser executada, se o pedido for bem-sucedido bem-sucedido function(data,status,xhr)  – Opcional. Especifica uma função a ser

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 função a ser executada antes que o pedido seja enviado beforeSend(xhr) – A função 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-wwwform-urlencoded" t odas as funções callback relacionadas a AJAX context –Especifica o valor “this” para todas 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. solicitação devem ser transformados em em processData –Um valor booleano que especifica se os dados enviados com a solicitação 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. função usada para criar o objeto XMLHttpRequest xhr – A função ◦ ◦ ◦ ◦ ◦

◦ ◦ ◦ ◦ ◦ ◦

◦

◦ ◦ ◦ ◦

◦ ◦ ◦ ◦ ◦ ◦ ◦ ◦

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  especifica se deve ou não usar o estilo estilo tradicional de serialização de trad – Opcional. Um valor booleano que especifica

 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. jQuery, este método só deve ser anexado ao documento. Nota: A partir da versão 1.8 do jQuery, 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. jQuery, este método só deve ser anexado ao documento. Nota: A partir da versão 1.8 do jQuery, 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 JJavaScript, avaScript, 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 jQuery, este método só deve ser anexado ao documento. Nota: A partir da versão 1.8 do jQuery, Sintaxe: $(document).ajaxSend(function(event,xhr,options))  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("

Requesting: " + opt.url + "

"); }); • • •

•

ajaxStart()

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

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

Exemplo: $(document).ajaxStart(function(){ $(this).html(""); }); •

ajaxStop()

Especifica uma função a ser executada quando todas as solicitações AJAX tiverem sido concluídas jQuery, este método só deve ser anexado ao documento. Nota: A partir da versão 1.8 do jQuery, Sintaxe: $(document).ajaxStop(function()) executada quando as solicitações solicitações AJAX terminam function() – Obrigatório. Especifica a função a ser executada 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. jQuery, este método só deve ser anexado ao documento. Nota: A partir da versão 1.8 do jQuery, 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")); ◦

}); •

elemento corresponde each() – Executa uma função para cada elemento

Dica: o retorno false pode ser usado para parar o loop mais cedo. Sintaxe: $(selector).each(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)

 function(index,element) ▪ ▪

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); }); •

relação a outros elementos especificados. especificados. index() – Retorna a posição de índice de elementos especificados em relação

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. seletor. O elemento pode ser especificado usando um elemento DOM, ou um seletor jQuery. 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")); }); ◦

•

Sintaxe:

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

$(selector).toArray() Exemplo: $("button").click(function(){ x=$("li").toArray() for (i=0;i
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  jQuery.fx.interval  jQuery.fx.interval – Contém a taxa (em milissegundos) milissegundos) em que animações disparam  jQuery.fx.off  jQuery.fx.off – Globalmente desativar todas as animações  jQuery.support  jQuery.support – Uma coleção de propriedades que representam representam recursos de navegadores navegadores diferentes ou bugs (destinado para uso interno do jQuery) Sintaxe:  jQuery.support.propvalue  jQuery.support.propvalue • • • • •

•

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

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 XM LHttpRequest 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. cada elemento no conjunto de elementos correspondentes correspondentes contents() – Receba os filhos de cada 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)) • •

– 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)

 function(index,element)

◦

▪ ▪

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 correspondentes para aqueles que correspondem correspondem ao seletor ou passam na função de filter() – Reduz o conjunto de elementos correspondentes 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 corresponde ao seletor / has() – Reduz o conjunto de elementos correspondentes para aqueles que têm um descendente que corresponde elemento DOM Verifica o conjunto de elementos correspondentes contra um objeto selector / elemento / jQuery, e retornar true se pelo is() – Verifica 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 conjunto de elementos correspondentes parent()  – Obtém o pai de cada elemento do conjunto  – Obtém os antepassados de c cada ada elemento do conjunto de elementos correspondentes parents() 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 elementos correspondentes prevAll() – Obtém todos os irmãos anteriores de cada elemento do conjunto de elementos prevUntil() – seleciona tudo o que estiver antes de um elemento até um determinado elemento exclusive; elemento no conjunto de elementos correspondentes correspondentes siblings() – Obter os irmãos de cada elemento 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, jQuery, simplesmente escrevendo o nome completo, 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 usando $, dentro dessa função - fora dele, você vai ter 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 Edição -Dezembro - 1999. JSON é em formato texto e completamente completamente independente de linguagem, pois usa convenções que são familiares f amiliares à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, 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).

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 http://www.w3schools.c .w3schools.com/jquery/default.asp om/jquery/default.asp

[JSON]

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

×

Report "Livro JQuery E Ajax um mero resumo"

Your name

Email

Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint

Description

Close Send

×

Sign In

Email

Password

Remember me Forgot password?

Sign In

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close