java script aula 07 - j-query
DESCRIPTION
Java script aula 07 - j-queryTRANSCRIPT
![Page 1: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/1.jpg)
Fonte: Tutorial do site http://www.escolacriatividade.com
http://vinteum.com/ajax-facil-com-jquery/
Adaptação: Cristiano Pires Martins
![Page 2: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/2.jpg)
Introdução• Lema: “Escrever menos e fazer mais”
• Biblioteca de funções de Javascript
• A sua aparição remonta a Janeiro de 2006, tendo sido anunciado no BarCampNYC
• Objetivos do JQuery:
• ajudar a resolver problemas de incompatibilidades entre os navegadores
• reduzir o tamanho de código
• introduzir a reutilização de código através de plugins
• Permite a implementação de recursos de CSS1, CSS2 e CSS3
• Trabalha com AJAX e DOM
![Page 3: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/3.jpg)
O QUE É JQUERY?• Contém os seguintes recursos:
• Seleções de elementos HTML
• Manipulação de elementos HTML
• Manipulação CSS
• Eventos HTML
• Efeitos e animações Javascript
• HTML DOM
• AJAX
![Page 4: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/4.jpg)
COMO ADICIONAR A BIBLIOTECA JQUERY
• A biblioteca jQuery é guardada num arquivo Javascript, que contém as funções jQuery.
• Para adicionar a uma página web, utilize o seguinte código:
<head> <script type="text/javascript" src="jquery.js"></script> </head>
![Page 5: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/5.jpg)
COMO ADICIONAR A BIBLIOTECA JQUERY
• Existem 2 versões disponíveis para download, uma simplificada, e outra descomprimida, para correcção de erros ou leitura. Ambas podem ser baixadas em jQuery.com
• Alternativamente, se não pretender baixar os arquivos, poderá utilizar os ficheiros alojados nos servidores da Google ou da Microsoft
Google <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> </head> Microsoft <head> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-‐1.4.2.min.js"></script> </head>
![Page 6: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/6.jpg)
SINTAXE JQUERY• A sintaxe jQuery é orientada para selecionar elementos
HTML e em seguida efetuar ações nos mesmos.
• A sintaxe básica é $(seletorHTML).ação()
• Trocando por palavras:
• $ é para definir jQuery
• (seletorHTML) é onde se introduz o elemento
• ação() é onde irão ser introduzidas as ações a efetuar nos elementos.
![Page 7: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/7.jpg)
Exemplos:
$(this).hide() // Esconde o elemento atual $("p").hide() // Esconde todos os parágrafos $("p.teste").hide() // Esconde todos os parágrafos com a classe="teste" $("#test").hide() // Esconde o elemento com o id="teste"
![Page 8: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/8.jpg)
SELETORES JQUERY
• Os seletores permitem-lhe selecionar e manipular elementos HTML.
• É possível selecionar por nome, nome de atributo ou conteúdo.
![Page 9: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/9.jpg)
1 – Seletores de elementos
• jQuery utiliza selectores CSS para selecionar elementos HTML
$("p") seleciona os elementos <p> $("p.intro") seleciona todos os elementos <p> com class="intro". $("p#demo") seleciona o primeito elemento <p> com id="demo".
![Page 10: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/10.jpg)
2 – Seletores de Atributos
• jQuery utiliza expressões XPath para selecionar elementos com dados atributos.
$("[href]") // Selecciona todos os elementos com um atributo href $("[href='#']") // Seleccionar todos os elementos com um valor href igual a "#" $("[href!='#']") // Selecciona todos os elementos com um valor href não igual a "#" $("[href$='.jpg']") // Selecciona todos os elementos com um atributo href que acabe em .jpg
![Page 11: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/11.jpg)
3 – Seletores CSS
• Os seletores CSS podem ser utilizados para alterar propriedades CSS de elementos HTML
• No exemplo a seguir mostra como alterar a cor de fundo de todos os elementos “p” para amarelo:
$("p").css("background-‐color","yellow");
![Page 12: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/12.jpg)
EVENTOS JQUERY
• Os eventos jQuery são peça chave.
• As funções que lidam com os eventos são chamados quando “algo acontece” no HTML.
• Quando isto acontece, o termo “acionado por um evento” é muito conhecido e frequentemente utilizado.
![Page 13: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/13.jpg)
Conflitos de nomes jQuery
• jQuery usa o símbolo $ como atalho para jQuery.
• Outras bibliotecas Javascript também utilizam este símbolo para as funções.
• Para evitar conflitos com jQuery, o método noconflict() permite atribuir um nome alternativo, por exemplo “jq”, em vez de utilizar o simbolo $.
![Page 14: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/14.jpg)
DICAS• Função Documento Pronto
• Esta função permite garantir que o conteúdo jQuery só seja executado depois que a página for completamente carregada.
• Isto evita que o jQuery tente acessar elementos da página que ainda não tenham sido baixados.
$(document).ready(function(){ // Funções jQuery entram aqui });
![Page 15: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/15.jpg)
Exemplo <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready ( function() { $("button").click ( function() { $("p").hide(); } ); } ); </script> </head> <body> <h2>Isto é um titulo</h2> <p>Isto é um parágrafo.</p> <p>Isto é mais um parágrafo.</p> <button>Clica-‐me</button> </body> </html>
No exemplo acima, uma função é chamada quando o evento de clique no botão é acionado:
$(“botão”).click(função() {código});
E esta função esconde todos os elementos <p>:
$(“p”).hide();
![Page 16: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/16.jpg)
Utilizar funções em arquivo separado
• Se a sua página web contém inúmeras páginas, e pretende que as suas funções jQuery tenham fácil acesso para manutenção, pode introduzi-las num arquivo .js separado.
• É possível colocar as funções jQuery na secção <head>. No entanto, algumas vezes é preferível introduzir as funções num arquivo, e chamá-las através do atributo “src”:
<head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="a_minha_funçao.js"></script> </head>
![Page 17: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/17.jpg)
EFEITOS JQUERY• Exemplos de efeitos jQuery
• $(selector).hide()
• $(selector).show()
• $(selector).toggle()
• $(selector).slideDown()
• $(selector).slideUp()
• $(selector).slideToggle()
• $(selector).fadeIn()
• $(selector).fadeOut()
• $(selector).fadeTo()
• $(selector).animate()
![Page 18: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/18.jpg)
Mostrar e Esconder ( hide(), show() )
• Com jQuery é possível mostrar, esconder elementos HTML com estas funções.
$("#hide").click(function(){ $("p").hide(); });
$("#show").click(function(){ $("p").show(); });
![Page 19: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/19.jpg)
Mostrar e Esconder ( hide(), show() )
• Ambos podem funcionar em conjunto com parâmetros opcionais: “speed” e “callback”.
$(selector).hide(speed,callback) $(selector).show(speed,callback)
![Page 20: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/20.jpg)
• O parâmetro “speed” especifica a velocidade de mostrar/esconder, e pode ter os valores “slow”, “normal”, “fast” ou em milisegundos:
Mostrar e Esconder ( hide(), show() )
$("#botao").click(function(){ $("p").hide(800);
));
O parâmetro “callback” é o nome de uma função a ser executada depois da função hide/show estar completa.
![Page 21: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/21.jpg)
Alternar ( toggle() )
• O método toggle() permite alterar a visibilidade de elementos HTML que usam a função show/hide.
• Os elementos escondidos são mostrados, e os elementos visíveis são escondidos.
• Tal como referido anteriormente, o parâmetro “speed” aceita valores “slow”, “normal”, “fast” ou em milisegundos.
$(selector).toggle(speed,callback)
$("#botao").click(function(){ $("p").toggle(850);
));
![Page 22: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/22.jpg)
Deslizar (slideDown(), slideUp(), slideToggle())• Os métodos de deslizamento do jQuery
alteram gradualmente a altura dos elementos selecionados, através dos seguintes métodos
$(selector).slideDown(speed,callback) $(selector).slideUp(speed,callback) $(selector).slideToggle(speed,callback)
O parâmetro “callback” é o nome de uma função a ser executada depois da função hide/show estar completa.
![Page 23: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/23.jpg)
Exemplos Práticos
$("#flip").click(function(){ $(".panel").slideDown(); ));
$("#flip").click(function(){ $(".panel").slideUp(); ));
$("#flip").click(function(){ $(".panel").slideToggle(); ));
slideDown()
slideUp()
slideToggle()
![Page 24: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/24.jpg)
Desvanecer (fadeIn(), fadeOut(), fadeTo())
• Os métodos de desvanecer alteram gradualmente a opacidade dos elementos selecionados
• jQuery tem os seguintes métodos de desvanecimento:
$(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback) $(selector).fadeTo(speed,opacity,callback)
Os parâmetros de “speed” e “callback” são os mesmos de anteriormente, e o parâmetro “opacity” permite desvanecer para uma opacidade escolhida.
![Page 25: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/25.jpg)
Exemplos práticos
$("#botao").click(funçao(){ $("div").fadeIn(2000); });
$("#botao").click(funçao(){ $("div").fadeOut(2000); });
$("#botao").click(funçao(){ $("div").fadeTo("slow",0.30); });
fadeIn()
fadeOut()
fadeTo()
![Page 26: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/26.jpg)
Animações jQuery
• As animações são introduzidas através do seguinte código
• O parâmetro chave é “parametros” onde serão introduzidas propriedades CSS que serão animadas. Podem ser animadas várias propriedades ao mesmo tempo.
$(selector).animate({parametros},[duracao],[e asing],[callback])
animate({width:"60%",opacity:0.3,marginTop:"0.3in",fontsize:"2em"})
O segundo parâmetro é a duração, que define o tempo da animação. Aceita valores “slow”, “fast”, “normal” e em milisegundos.
![Page 27: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/27.jpg)
Exemplo:
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:"29px"},"slow"); $("div").animate({fontSize:"4em"},"slow"); }); });
</script>
![Page 28: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/28.jpg)
FUNÇÃO CALLBACK• A função callback é executada depois de a animação
estar concluída.
• As declarações Javascript são executadas linha-a-linha. No entanto, com as animações, a próxima linha de código pode ser executada mesmo que a animação não esteja concluída, o que pode levar a erros.
• Para prevenir estas situações, cria-se a função callback. Esta não será chamada antes da animação terminar.
$("p").hide(1000,function(){ alert("O parágrafo foi escondido"); });
Exemplo:
![Page 29: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/29.jpg)
MANIPULAÇÃO HTML
• jQuery tem ferramentas muito poderosas que permitem alterar e manipular atributos e elementos HTML.
![Page 30: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/30.jpg)
Alterar conteúdo HTML
• Utilizando esta sintaxe
• Altera o conteúdo de um dado parâmetro.
$("p").html("Escola de Criatividade");
$(selector).html(content)
Exemplo:
![Page 31: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/31.jpg)
Adicionar conteúdo HTML
• Utilizando a sintaxe
• pode-se anexar informação aos elementos selecionados.
• Utilizando a sintaxe
• pode-se “desanexar” informação dos elementos selecionados.
$(selector).append(content)
$(selector).prepend(content)
![Page 32: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/32.jpg)
Exemplo:
$("p").append("Escola de Criatividade"); $("p").prepend("Escola de Criatividade");
![Page 33: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/33.jpg)
Inserir conteúdo antes e depois de elementos HTML
• Utilizando a sintaxe
• pode ser introduzido conteúdo depois do elemento escolhido.
$(selector).before/after(content)
$("p").after(" Escola de Criatividade.");$("p").before("Escola de Criatividade.");
![Page 34: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/34.jpg)
MÉTODOS CSS
• jQuery tem um método bastante importante para manipulação CSS que é css().
• Tem três sintaxes diferentes:
• css(nome) – Devolve o valor de uma propriedade CSS
• css(nome,valor) – Define um valor numa propriedade CSS
• css({propriedades}) – Define múltiplos valores em múltiplas propriedades
![Page 35: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/35.jpg)
Devolver propriedade CSS
• Utilize o método css(nome) para devolver uma propriedade CSS escolhida, que será extraída do primeiro elemento encontrado que tenha a propriedade.
$(this).css("background-‐color");
![Page 36: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/36.jpg)
Definir propriedade e valor CSS
• Utilize css(nome,valor) para definir as propriedades de uma propriedade CSS para todos os elementos que combinam com o introduzido.
function(){$("p").css("background-‐color","yellow");}
![Page 37: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/37.jpg)
Definir múltplas propriedades e valores CSS
• Utilize css({propriedades}) para definir uma ou mais proriedades/valores para os elementos seleccionados
$("p").css({"background-‐color":"yellow","font-‐size":"200%"});
![Page 38: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/38.jpg)
Métodos de Altura e Largura ( height () e width() )
• Altera a largura e altura para os elementos selecionados
$("#div1").height("200px"); // altura $("#div1").width("200px"); // largura
![Page 39: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/39.jpg)
JQUERY E FUNÇÕES AJAX
• AJAX significa “Asynchronous JavaScript and XML”. É uma técnica para criar páginas rápidas e dinâmicas.
• AJAX permite que páginas sejam atualizadas de forma assincronizada alterando pequenas quantidades de dados com o servidor a fazer o trabalho.
• Isto significa que é possível atualizar partes da página sem atualizar toda a página.
![Page 40: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/40.jpg)
Escreva menos, faça mais
• A função jQuery load() é uma função AJAX simples, mas muito poderosa, que pode ser utilizada com a seguinte sintaxe:
• Utilize o selector para definir os elementos HTML a alterar e o parâmetro url para especificar o endereço web para os dados.
$(selector).load(url,data,callback)
![Page 41: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/41.jpg)
AJAX de baixo nível
• A sintaxe para o baixo nível das funções AJAX é:
• Que oferece mais funcionalidade do que as funções de alto nível, como “load”,”get” entre outros, mas é também um pouco mais difícil de utilizar.
• O parâmetro opções aceita nomes/valor que definam dados url, passwords, tipos de dados, filtros, funções de erro, entre outros.
$.ajax(opçoes)
![Page 42: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/42.jpg)
Exemplo de método ajax sem utilizar jQuery
function handler() {
if(this.readyState == 4 && this.status == 200){
if(this.responseXML!=null && this.responseXML.getElementById('test').firstChild.data)
//successo
alert(this.responseXML.getElementById('test').firstChild.data);
else
return false
} else if (this.readyState == 4 && this.status != 200) {
//página não encontrada ou erro na conexão
return false
}
}
var client = new XMLHttpRequest();
client.onreadystatechange = handler;
client.open("GET", "arquivo.html");
client.send();
![Page 43: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/43.jpg)
Método ajax utilizando jQuery
$.ajax({ url:'arquivo.html', success:function(data) { alert(data); }});
![Page 44: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/44.jpg)
Botão para acionar a função ajax e um elemento div
html> <head> <title>Ajax fácil com jQuery</title> <meta http-‐equiv="Content-‐Type" content="text/html; charset=UTF-‐8"> <style type="text/css"> div { width: 600px; height: 600px; } .loader { display: none; float: left; } </style> </head> <body> <img src="loader.gif" class="loader" alt="loader" /> <input type="button" value="AJAX!"> <div> </div> </body> <script type="text/javascript" src="http://code.jquery.com/jquery-‐1.4.3.min.js"></script> </html
![Page 45: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/45.jpg)
arquivo.html<!doctype html> <html> <head> <meta charset="UTF-‐8"> <title>Untitled Document</title> </head>
<body> <h1>Ajax!</h1> <p>Duis in turpis in arcu blandit pretium at sed metus. Sed tortor sapien, cursus vitae facilisis ac, tempor non eros. Donec at velit velit, cursus tristique justo?Nullam commodo sapien sit amet sapien porttitor eu rutrum arcu mollis. Nullam sagittis tempor risus, et convallis dolor eleifend vitae.In ac lacus libero; ut aliquam turpis.Quisque placerat blandit libero; eget orttitor nunc eleifend vel. In hac habitasse platea dictumst. Aliquam dapibus fermentum fringilla.Integer mi erat, porta at aliquet a, consectetur in est.<br><img src="http://images.vinteum.com/img/logo.png" /> </p> </body> </html>
![Page 46: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/46.jpg)
script ajax
$.ajax({ url: 'arquivo.html', //URL solicitada success: function(data) {
//O HTML é retornado em 'data' alert(data);
//Se sucesso um alert com o conteúdo retornado pela URL solicitada será exibido.
} });
![Page 47: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/47.jpg)
usando gif$.ajax({ url: 'arquivo.html', success: function(data) { $('div').html(data); }, beforeSend: function(){ $('.loader').css({display:"block"}); }, complete: function(){ $('.loader').css({display:"none"}); } });
![Page 48: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/48.jpg)
código completohtml> <head> <title>Ajax fácil com jQuery</title> <meta http-‐equiv="Content-‐Type" content="text/html; charset=UTF-‐8"> <style type="text/css"> div { width: 600px; height: 600px; } .loader { display: none; float: left; } </style> </head> <body> <img src="loader.gif" class="loader" alt="loading" /> <input type="button" value="AJAX!"> <div> </div> </body> <script type="text/javascript" src="http://code.jquery.com/jquery-‐1.4.3.min.js"></script> <script type="text/javascript"> $('input').click(function(){ //Quando clicado no elemento input $.ajax({ url: 'arquivo.html', success: function(data) { $('div').html(data); //alert(data); }, beforeSend: function(){ $('.loader').css({display:"block"}); }, complete: function(){ $('.loader').css({display:"none"}); } }); }); </script> </html
![Page 49: Java script aula 07 - j-query](https://reader033.vdocuments.net/reader033/viewer/2022052203/5590ba241a28abc5308b45a8/html5/thumbnails/49.jpg)
exemplo online
• http://vinteum.com/estudos/jquery/ajax.html