Java script aula 07 - j-query

Adaptação: Cristiano Pires Martins
Fonte: Tutorial do site
http://www.escolacriatividade.com
http://vinteum.com/ajax-facil-com-jquery/

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
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/
jquery.min.js"></script>
</head>
Microsoft
<head>
<script
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]")
//
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

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 simbolo $.

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
<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();

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
<script
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)
• Tal como referido anteriormente, o parâmetro
“speed” aceita valores “slow”, “normal”, “fast” ou
em milisegundos.
$("#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
slideDown()
$("#flip").click(function(){
$(".panel").slideDown();
));
$(".panel").slideUp();
));
$(".panel").slideToggle();
));
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
fadeIn()
$("#botao").click(funçao(){
$("div").fadeIn(2000);
});
$("div").fadeOut(2000);
});
$("div").fadeTo("slow",0.30);
});
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
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:"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
$(selector).html(content)
• Altera o conteúdo de um dado
parâmetro.
Exemplo:
$("p").html("Escola
de
Criatividade");

Adicionar conteúdo HTML
• Utilizando a sintaxe
$(selector).append(content)
• pode-se anexar informação aos elementos
selecionados.
$(selector).prepend(content)
• pode-se “desanexar” informação dos
elementos selecionados.

Exemplo:
$("p").append("Escola
de
Criatividade");
$("p").prepend("Escola
de
Criatividade");

Inserir conteúdo antes e depois
de elementos HTML
$(selector).before/after(content)
• pode ser introduzido conteúdo depois do
elemento escolhido.
$("p").after("
Escola
de
Criatividade.");
$("p").before("Escola
de
Criatividade.");

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:
$(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);
}
});

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

html>
código completo
<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
src="http://code.jquery.com/jquery-‐1.4.3.min.js"></script>
<script
$('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

exemplo online
• http://vinteum.com/estudos/jquery/
ajax.html

Java script aula 07 - j-query

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Java script aula 07 - j-query

Similaire à Java script aula 07 - j-query (20)

Plus de Cristiano Pires Martins

Plus de Cristiano Pires Martins (14)

Java script aula 07 - j-query