SlideShare uma empresa Scribd logo
Fonte:Tutorial do site
http://www.escolacriatividade.com
http://vinteum.com/ajax-facil-com-jquery/
Adaptação: Cristiano Pires Martins
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
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
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>
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>
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.
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"
SELETORES JQUERY
• Os seletores permitem-lhe selecionar e
manipular elementos HTML.
• É possível selecionar por nome, nome de
atributo ou conteúdo.
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".
2 – Seletores de Atributos
• jQuery utiliza expressões XPath para
selecionar elementos com dados atributos.
$("[href]") // Seleciona todos os elementos com um atributo href
 
$("[href='#']") // Selecionar todos os elementos com um valor href igual a "#"
 
$("[href!='#']") // Seleciona todos os elementos com um valor href não igual a "#"
 
$("[href$='.jpg']") // Seleciona todos os elementos com um atributo href que acabe
em .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");
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.
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 símbolo $.
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
 
});
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 título</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();
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>
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()
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();
});
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)
• 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.
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);
));
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.
Exemplos Práticos
$("#flip").click(function(){
 
    $(".panel").slideDown();
 
));
$("#flip").click(function(){
 
    $(".panel").slideUp();
 
));
$("#flip").click(function(){
 
    $(".panel").slideToggle();
 
));
slideDown()
slideUp()
slideToggle()
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.
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()
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.
Exemplo:
<script type="text/javascript">
 
$(document).ready(function(){
 
    $("button").click(function(){
 
        $("div").animate({marginLeft:"29px"},"slow");
 
        $("div").animate({fontSize:"4em"},"slow");
 
    });
 
});
</script>
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:
MANIPULAÇÃO HTML
• jQuery tem ferramentas muito poderosas
que permitem alterar e manipular atributos
e elementos HTML.
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:
Exemplo: html(), text() e val()
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
});
</script>
</head>
<body>
<p id="test1">This is a paragraph.</p>
<p id="test2">This is another paragraph.</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">Set Text</button>
<button id="btn2">Set HTML</button>
<button id="btn3">Set Value</button>
</body>
</html>
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)
Exemplo:
$("p").append("Escola de Criatividade");
$("p").prepend("Escola de Criatividade");
Exemplo append() e prepend()
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").prepend("Antes do parágrafo<br>");
$("#test1").append("<br>Depois do parágrafo");
});
});
</script>
</head>
<body>
<p id="test1">Texto do paragrafo.</p>
<button id="btn1">Set Text</button>
</body>
</html>
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.");
Exemplo: before() e after()
<html>
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").before("<b>Before</b>");
});
$("#btn2").click(function(){
$("p").after("<i>After</i>");
});
});
</script>
</head>
<body>
<p>PARÁGRAFO</p>
<button id="btn1">Insert before</button>
<button id="btn2">Insert after</button>
</body>
</html>
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
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");
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");}
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%"});
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
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.
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)
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)
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();
Método ajax utilizando jQuery
$.ajax({
  url:'arquivo.html',
  success:function(data) {
  alert(data);
  }
});
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>&nbsp;</div>
  </body>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
</html
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>
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.
}
});
usando gif
$.ajax({
url: 'arquivo.html',
success: function(data) {
$('div').html(data);
},
beforeSend: function(){
$('.loader').css({display:"block"});
},
complete: function(){
$('.loader').css({display:"none"});
}
});
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>&nbsp;</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
UsandoValidation: Exemplo
$(".selector").validate({
rules: {
name: {
required: true,
minlength: 2
}
},
messages: {
name: {
required: "We need your email address to
contact you",
minlength:"At least 2 characters required!")
}
}
});
exemplo online
• http://vinteum.com/estudos/jquery/
ajax.html
• http://www.maujor.com/blog/2009/02/11/
jquery-efeito-corredico-em-diferentes-
direcoes/

Mais conteúdo relacionado

Mais procurados

Introdução ao JQuery e AJAX
Introdução ao JQuery e AJAXIntrodução ao JQuery e AJAX
Introdução ao JQuery e AJAX
Sérgio Souza Costa
 
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
Harlley Oliveira
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
Gabriel Moura
 
Html dom, eventos, jquery
Html dom, eventos, jqueryHtml dom, eventos, jquery
Html dom, eventos, jquery
Ricardo Cavalcanti
 
JQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEBJQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEB
Luciano Borges
 
Javascript - Biblioteca Jquery
Javascript - Biblioteca JqueryJavascript - Biblioteca Jquery
Javascript - Biblioteca Jquery
Multside Digital
 
11 Java Script - Exemplos com eventos
11 Java Script - Exemplos com eventos11 Java Script - Exemplos com eventos
11 Java Script - Exemplos com eventos
Centro Paula Souza
 
Introdução à MEAN Stack
Introdução à MEAN StackIntrodução à MEAN Stack
Introdução à MEAN Stack
Bruno Catão
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
Victor Adriel Oliveira
 
ODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQuery
Marketing Digital ODIG
 
Evento Front End SP - Organizando o Javascript
 Evento Front End SP - Organizando o Javascript Evento Front End SP - Organizando o Javascript
Evento Front End SP - Organizando o Javascript
Michel Ribeiro
 
Aula 07 acessibilidade
Aula 07  acessibilidadeAula 07  acessibilidade
Aula 07 acessibilidade
Cristiano Pires Martins
 
Python 06
Python 06Python 06
Python 06
Bruno Catão
 
Ajax em java
Ajax em javaAjax em java
Ajax em java
Maurício Linhares
 
J query javascript para seres humanos
J query   javascript para seres humanosJ query   javascript para seres humanos
J query javascript para seres humanos
nobios
 
Beagajs
BeagajsBeagajs
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScriptjQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
Everaldo Wanderlei Uavniczak
 
JavaScript Hacks
JavaScript HacksJavaScript Hacks
JavaScript Hacks
Caio Ribeiro Pereira
 
Prototype Framework Javascript
Prototype Framework JavascriptPrototype Framework Javascript
Prototype Framework Javascript
Marcio Romu
 
JavaScript Model-View no Frontend
JavaScript Model-View no FrontendJavaScript Model-View no Frontend
JavaScript Model-View no Frontend
Henrique Gogó
 

Mais procurados (20)

Introdução ao JQuery e AJAX
Introdução ao JQuery e AJAXIntrodução ao JQuery e AJAX
Introdução ao JQuery e AJAX
 
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
 
Html dom, eventos, jquery
Html dom, eventos, jqueryHtml dom, eventos, jquery
Html dom, eventos, jquery
 
JQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEBJQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEB
 
Javascript - Biblioteca Jquery
Javascript - Biblioteca JqueryJavascript - Biblioteca Jquery
Javascript - Biblioteca Jquery
 
11 Java Script - Exemplos com eventos
11 Java Script - Exemplos com eventos11 Java Script - Exemplos com eventos
11 Java Script - Exemplos com eventos
 
Introdução à MEAN Stack
Introdução à MEAN StackIntrodução à MEAN Stack
Introdução à MEAN Stack
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
 
ODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQuery
 
Evento Front End SP - Organizando o Javascript
 Evento Front End SP - Organizando o Javascript Evento Front End SP - Organizando o Javascript
Evento Front End SP - Organizando o Javascript
 
Aula 07 acessibilidade
Aula 07  acessibilidadeAula 07  acessibilidade
Aula 07 acessibilidade
 
Python 06
Python 06Python 06
Python 06
 
Ajax em java
Ajax em javaAjax em java
Ajax em java
 
J query javascript para seres humanos
J query   javascript para seres humanosJ query   javascript para seres humanos
J query javascript para seres humanos
 
Beagajs
BeagajsBeagajs
Beagajs
 
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScriptjQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
 
JavaScript Hacks
JavaScript HacksJavaScript Hacks
JavaScript Hacks
 
Prototype Framework Javascript
Prototype Framework JavascriptPrototype Framework Javascript
Prototype Framework Javascript
 
JavaScript Model-View no Frontend
JavaScript Model-View no FrontendJavaScript Model-View no Frontend
JavaScript Model-View no Frontend
 

Semelhante a Java script aula 09 - JQuery

Javascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQueryJavascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQuery
Wesley Lemos
 
jQuery na Prática!
jQuery na Prática!jQuery na Prática!
jQuery na Prática!
José Alexandre Macedo
 
LPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfLPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdf
GabrielaMota46
 
jQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê FajolijQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê Fajoli
Caue Fajoli
 
JQuery
JQueryJQuery
Minicurso de jQuery
Minicurso de jQueryMinicurso de jQuery
Minicurso de jQuery
André Willik Valenti
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
Victor Adriel Oliveira
 
CSS & JQquery
CSS & JQqueryCSS & JQquery
CSS & JQquery
ScrumHalf Tool
 
jQuery - Visão Geral
jQuery - Visão GeraljQuery - Visão Geral
jQuery - Visão Geral
Kaio Valente
 
Introdução ao jquery
Introdução ao jqueryIntrodução ao jquery
Introdução ao jquery
Yuri Costa
 
Simplificando o Javascrip
Simplificando o JavascripSimplificando o Javascrip
Simplificando o Javascrip
Miquéias Amaro
 
jQuery
jQueryjQuery
jQuery
Bruno Cunha
 
jQuery
jQueryjQuery
jQuery
Bruno Cunha
 
Web 3.0
Web 3.0Web 3.0
Web 3.0
Miguel Alho
 
Plone e JQuery ao gosto do Cliente
Plone e JQuery ao gosto do ClientePlone e JQuery ao gosto do Cliente
Plone e JQuery ao gosto do Cliente
Simples Consultoria
 
Introdução a jQuery
Introdução a jQueryIntrodução a jQuery
Introdução a jQuery
Rodrigo Aramburu
 
Evento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de FrontEvento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de Front
Michel Ribeiro
 
Desevolvimento Web Client-side - jQuery
Desevolvimento Web Client-side - jQueryDesevolvimento Web Client-side - jQuery
Desevolvimento Web Client-side - jQuery
Guilherme
 
Jquery a technical overview
Jquery a technical overviewJquery a technical overview
Jquery a technical overview
Alexandre Marreiros
 
Aplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com DjangoAplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com Django
Diemesleno Souza Carvalho
 

Semelhante a Java script aula 09 - JQuery (20)

Javascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQueryJavascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQuery
 
jQuery na Prática!
jQuery na Prática!jQuery na Prática!
jQuery na Prática!
 
LPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfLPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdf
 
jQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê FajolijQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê Fajoli
 
JQuery
JQueryJQuery
JQuery
 
Minicurso de jQuery
Minicurso de jQueryMinicurso de jQuery
Minicurso de jQuery
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
 
CSS & JQquery
CSS & JQqueryCSS & JQquery
CSS & JQquery
 
jQuery - Visão Geral
jQuery - Visão GeraljQuery - Visão Geral
jQuery - Visão Geral
 
Introdução ao jquery
Introdução ao jqueryIntrodução ao jquery
Introdução ao jquery
 
Simplificando o Javascrip
Simplificando o JavascripSimplificando o Javascrip
Simplificando o Javascrip
 
jQuery
jQueryjQuery
jQuery
 
jQuery
jQueryjQuery
jQuery
 
Web 3.0
Web 3.0Web 3.0
Web 3.0
 
Plone e JQuery ao gosto do Cliente
Plone e JQuery ao gosto do ClientePlone e JQuery ao gosto do Cliente
Plone e JQuery ao gosto do Cliente
 
Introdução a jQuery
Introdução a jQueryIntrodução a jQuery
Introdução a jQuery
 
Evento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de FrontEvento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de Front
 
Desevolvimento Web Client-side - jQuery
Desevolvimento Web Client-side - jQueryDesevolvimento Web Client-side - jQuery
Desevolvimento Web Client-side - jQuery
 
Jquery a technical overview
Jquery a technical overviewJquery a technical overview
Jquery a technical overview
 
Aplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com DjangoAplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com Django
 

Mais de Cristiano Pires Martins

Aula 08 - árvores
Aula 08 - árvoresAula 08 - árvores
Aula 08 - árvores
Cristiano Pires Martins
 
Aula 06 textos na web
Aula 06   textos na webAula 06   textos na web
Aula 06 textos na web
Cristiano Pires Martins
 
Aula 05 layout e composição do site
Aula 05   layout e composição do siteAula 05   layout e composição do site
Aula 05 layout e composição do site
Cristiano Pires Martins
 
Aula 04 layout e composição do site
Aula 04   layout e composição do siteAula 04   layout e composição do site
Aula 04 layout e composição do site
Cristiano Pires Martins
 
Aula 02 semiótica e cores
Aula 02   semiótica e coresAula 02   semiótica e cores
Aula 02 semiótica e cores
Cristiano Pires Martins
 
Aula 01 introdução
Aula 01   introduçãoAula 01   introdução
Aula 01 introdução
Cristiano Pires Martins
 
Aula 03 esquema de cores
Aula 03   esquema de coresAula 03   esquema de cores
Aula 03 esquema de cores
Cristiano Pires Martins
 
Java script aula 04 - objeto array
Java script   aula 04 - objeto arrayJava script   aula 04 - objeto array
Java script aula 04 - objeto array
Cristiano Pires Martins
 
WDI - aula 07 - css com html
WDI - aula 07 - css com htmlWDI - aula 07 - css com html
WDI - aula 07 - css com html
Cristiano Pires Martins
 
Aula 08 - árvores
Aula 08 - árvoresAula 08 - árvores
Aula 08 - árvores
Cristiano Pires Martins
 
OAC Aula 09 - Entrada e Saída
OAC Aula 09 - Entrada e SaídaOAC Aula 09 - Entrada e Saída
OAC Aula 09 - Entrada e Saída
Cristiano Pires Martins
 
Aula 07 - lista linear
Aula 07 - lista linearAula 07 - lista linear
Aula 07 - lista linear
Cristiano Pires Martins
 
Aula 08-oac-execucao-de-programas
Aula 08-oac-execucao-de-programasAula 08-oac-execucao-de-programas
Aula 08-oac-execucao-de-programas
Cristiano Pires Martins
 
Aula 07-oac-processadores
Aula 07-oac-processadoresAula 07-oac-processadores
Aula 07-oac-processadores
Cristiano Pires Martins
 
Aula 06-oac-memoria-principal
Aula 06-oac-memoria-principalAula 06-oac-memoria-principal
Aula 06-oac-memoria-principal
Cristiano Pires Martins
 
Aula 05-oac-conceitos-de-logica-digital
Aula 05-oac-conceitos-de-logica-digitalAula 05-oac-conceitos-de-logica-digital
Aula 05-oac-conceitos-de-logica-digital
Cristiano Pires Martins
 
Aula 03-oac-componentes-de-um-sistema-de-computacao
Aula 03-oac-componentes-de-um-sistema-de-computacaoAula 03-oac-componentes-de-um-sistema-de-computacao
Aula 03-oac-componentes-de-um-sistema-de-computacao
Cristiano Pires Martins
 
Aula 02-oac-historia-da-computacao-part2
Aula 02-oac-historia-da-computacao-part2Aula 02-oac-historia-da-computacao-part2
Aula 02-oac-historia-da-computacao-part2
Cristiano Pires Martins
 
Aula 02-oac-historia-da-computacao-part1
Aula 02-oac-historia-da-computacao-part1Aula 02-oac-historia-da-computacao-part1
Aula 02-oac-historia-da-computacao-part1
Cristiano Pires Martins
 
Aula 01-oac-introducao-a-oac
Aula 01-oac-introducao-a-oacAula 01-oac-introducao-a-oac
Aula 01-oac-introducao-a-oac
Cristiano Pires Martins
 

Mais de Cristiano Pires Martins (20)

Aula 08 - árvores
Aula 08 - árvoresAula 08 - árvores
Aula 08 - árvores
 
Aula 06 textos na web
Aula 06   textos na webAula 06   textos na web
Aula 06 textos na web
 
Aula 05 layout e composição do site
Aula 05   layout e composição do siteAula 05   layout e composição do site
Aula 05 layout e composição do site
 
Aula 04 layout e composição do site
Aula 04   layout e composição do siteAula 04   layout e composição do site
Aula 04 layout e composição do site
 
Aula 02 semiótica e cores
Aula 02   semiótica e coresAula 02   semiótica e cores
Aula 02 semiótica e cores
 
Aula 01 introdução
Aula 01   introduçãoAula 01   introdução
Aula 01 introdução
 
Aula 03 esquema de cores
Aula 03   esquema de coresAula 03   esquema de cores
Aula 03 esquema de cores
 
Java script aula 04 - objeto array
Java script   aula 04 - objeto arrayJava script   aula 04 - objeto array
Java script aula 04 - objeto array
 
WDI - aula 07 - css com html
WDI - aula 07 - css com htmlWDI - aula 07 - css com html
WDI - aula 07 - css com html
 
Aula 08 - árvores
Aula 08 - árvoresAula 08 - árvores
Aula 08 - árvores
 
OAC Aula 09 - Entrada e Saída
OAC Aula 09 - Entrada e SaídaOAC Aula 09 - Entrada e Saída
OAC Aula 09 - Entrada e Saída
 
Aula 07 - lista linear
Aula 07 - lista linearAula 07 - lista linear
Aula 07 - lista linear
 
Aula 08-oac-execucao-de-programas
Aula 08-oac-execucao-de-programasAula 08-oac-execucao-de-programas
Aula 08-oac-execucao-de-programas
 
Aula 07-oac-processadores
Aula 07-oac-processadoresAula 07-oac-processadores
Aula 07-oac-processadores
 
Aula 06-oac-memoria-principal
Aula 06-oac-memoria-principalAula 06-oac-memoria-principal
Aula 06-oac-memoria-principal
 
Aula 05-oac-conceitos-de-logica-digital
Aula 05-oac-conceitos-de-logica-digitalAula 05-oac-conceitos-de-logica-digital
Aula 05-oac-conceitos-de-logica-digital
 
Aula 03-oac-componentes-de-um-sistema-de-computacao
Aula 03-oac-componentes-de-um-sistema-de-computacaoAula 03-oac-componentes-de-um-sistema-de-computacao
Aula 03-oac-componentes-de-um-sistema-de-computacao
 
Aula 02-oac-historia-da-computacao-part2
Aula 02-oac-historia-da-computacao-part2Aula 02-oac-historia-da-computacao-part2
Aula 02-oac-historia-da-computacao-part2
 
Aula 02-oac-historia-da-computacao-part1
Aula 02-oac-historia-da-computacao-part1Aula 02-oac-historia-da-computacao-part1
Aula 02-oac-historia-da-computacao-part1
 
Aula 01-oac-introducao-a-oac
Aula 01-oac-introducao-a-oacAula 01-oac-introducao-a-oac
Aula 01-oac-introducao-a-oac
 

Java script aula 09 - JQuery

  • 2. 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
  • 3. 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
  • 4. 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>
  • 5. 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>
  • 6. 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.
  • 7. 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"
  • 8. SELETORES JQUERY • Os seletores permitem-lhe selecionar e manipular elementos HTML. • É possível selecionar por nome, nome de atributo ou conteúdo.
  • 9. 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".
  • 10. 2 – Seletores de Atributos • jQuery utiliza expressões XPath para selecionar elementos com dados atributos. $("[href]") // Seleciona todos os elementos com um atributo href   $("[href='#']") // Selecionar todos os elementos com um valor href igual a "#"   $("[href!='#']") // Seleciona todos os elementos com um valor href não igual a "#"   $("[href$='.jpg']") // Seleciona todos os elementos com um atributo href que acabe em .jpg
  • 11. 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");
  • 12. 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.
  • 13. 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 símbolo $.
  • 14. 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   });
  • 15. 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 título</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();
  • 16. 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>
  • 17. 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()
  • 18. 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(); });
  • 19. 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)
  • 20. • 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.
  • 21. 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); ));
  • 22. 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.
  • 24. 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.
  • 26. 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.
  • 28. 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:
  • 29. MANIPULAÇÃO HTML • jQuery tem ferramentas muito poderosas que permitem alterar e manipular atributos e elementos HTML.
  • 30. 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:
  • 31. Exemplo: html(), text() e val() <!DOCTYPE html> <html> <head> <script src="jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); }); }); </script> </head> <body> <p id="test1">This is a paragraph.</p> <p id="test2">This is another paragraph.</p> <p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p> <button id="btn1">Set Text</button> <button id="btn2">Set HTML</button> <button id="btn3">Set Value</button> </body> </html>
  • 32. 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)
  • 34. Exemplo append() e prepend() <!DOCTYPE html> <html> <head> <script src="jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").prepend("Antes do parágrafo<br>"); $("#test1").append("<br>Depois do parágrafo"); }); }); </script> </head> <body> <p id="test1">Texto do paragrafo.</p> <button id="btn1">Set Text</button> </body> </html>
  • 35. 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.");
  • 36. Exemplo: before() e after() <html> <head> <script src="jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").before("<b>Before</b>"); }); $("#btn2").click(function(){ $("p").after("<i>After</i>"); }); }); </script> </head> <body> <p>PARÁGRAFO</p> <button id="btn1">Insert before</button> <button id="btn2">Insert after</button> </body> </html>
  • 37. 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
  • 38. 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");
  • 39. 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");}
  • 40. 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%"});
  • 41. 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
  • 42. 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.
  • 43. 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)
  • 44. 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)
  • 45. 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();
  • 46. Método ajax utilizando jQuery $.ajax({   url:'arquivo.html',   success:function(data) {   alert(data);   } });
  • 47. 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>&nbsp;</div>   </body>   <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script> </html
  • 48. 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>
  • 49. 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. } });
  • 50. usando gif $.ajax({ url: 'arquivo.html', success: function(data) { $('div').html(data); }, beforeSend: function(){ $('.loader').css({display:"block"}); }, complete: function(){ $('.loader').css({display:"none"}); } });
  • 51. 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>&nbsp;</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
  • 52. UsandoValidation: Exemplo $(".selector").validate({ rules: { name: { required: true, minlength: 2 } }, messages: { name: { required: "We need your email address to contact you", minlength:"At least 2 characters required!") } } });