Escolar Documentos
Profissional Documentos
Cultura Documentos
<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:
$("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>
No exemplo acima, uma função é <h2>Isto é um título</h2>
chamada quando o evento de
clique no botão é acionado:
<p>Isto é um parágrafo.</p>
$(“botão”).click(função() <p>Isto é mais um parágrafo.</p>
{código}); <button>Clica-me</button>
E esta função esconde todos os </body>
elementos <p>:
$(“p”).hide();
</html>
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)
Mostrar e Esconder
( hide(), show() )
• O parâmetro “speed” especifica a
velocidade de mostrar/esconder, e pode ter
os valores “slow”, “normal”, “fast” ou em
milisegundos:
$("#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.
$(selector).toggle(speed,callback)
$(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
slideDown()
$("#flip").click(function(){
$(".panel").slideDown();
));
slideUp()
$("#flip").click(function(){
$(".panel").slideUp();
)); slideToggle()
$("#flip").click(function(){
$(".panel").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)
fadeOut()
$("#botao").click(funçao(){
$("div").fadeOut(2000);
});
fadeTo()
$("#botao").click(funçao(){
$("div").fadeTo("slow",0.30);
});
Animações jQuery
• As animações são introduzidas através do
seguinte código
$(selector).animate({parametros},[duracao],[easing],[callback])
</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.
Exemplo: $("p").hide(1000,function(){
alert("O parágrafo foi escondido");
});
MANIPULAÇÃO HTML
• jQuery tem ferramentas muito poderosas
que permitem alterar e manipular atributos
e elementos HTML.
Alterar conteúdo HTML
Exemplo:
$("p").html("Escola de Criatividade");
<!DOCTYPE html>
<html> Exemplo: html(),
<head>
text() e val()
<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
$(selector).append(content)
• pode-se anexar informação aos elementos
selecionados.
• Utilizando a sintaxe
$(selector).prepend(content)
• pode-se “desanexar” informação dos
elementos selecionados.
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
$(selector).before/after(content)
$("#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 selecionados
$("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:
$(selector).load(url,data,callback)
• Utilize o selector para definir os elementos
HTML a alterar e o parâmetro url para
especificar o endereço web para os dados.
AJAX de baixo nível
• A sintaxe para o baixo nível das funções AJAX é:
$.ajax(opçoes)
• 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.
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);
}
});
<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 {
Botão para acionar
display: none; a função ajax e um
float: left;
} elemento div
</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>
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 completo div {
width: 600px;
height: 600px;
html> }
<head> .loader {
<title>Ajax</title> display: none;
<meta charset="UTF-8"> float: left;
<style type=“text/css"> </style> }
</head> $('input').click(function(){
<body> $.ajax({
<img src="loader.gif"
url: 'arquivo.html',
class="loader" alt="loading" />
success: function(data) {
<input type="button"
value="AJAX!">
$('div').html(data);
<div> </div> //alert(data);
</body> },
<script type="text/javascript" beforeSend: function(){
src="http://code.jquery.com/ $('.loader').css({display:"block"});
jquery-1.4.3.min.js"></script> },
<script type="text/javascript"> complete: function(){
</script> $('.loader').css({display:"none"});
</html }
});
});
Usando Validation: 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/