59 / 68
59
à &KURPH
à )LUHIR[
à 6DIDUL
à $QGURLG %URZVHU
à 2SHUD
à ZHE26
%URZVHU
à %ODFN%HUU\ 7DEOHW
26
%URZVHU
à $PD]RQ 6LON
à 2WKHU :HE.LW EDVHG EURZVHUV
runtimes
Se alguém já programa
com jQuery, vai se sentir bem
FRQIRUW£YHO FRP R =HSWR %RD
parte do código e da sintaxe é
igual, e os procedimentos seguem
o padrão do “irmão maior” jQuery
(veja a imagem abaixo).
3DUD DOWHUDU R KWPO GH
um elemento, utilizamos o
seguinte código:
$('#home').html('<a
href="index.html">home</
a>');
Para alterar o CSS de um ou
mais elementos com a classe
LWHP PHQX
$('.item-menu').
css('background-color',
'red');
Ou:
$('.item-menu').
css({backgroundColor: 'red',
color: '#fff'});
Para adicionar um novo
elemento a um elemento existente:
$('<a href="index.
html">home</a>').
appendTo('nav');
,VVR VLJQLíFD XPD FXUYD GH
aprendizado praticamente nula
para usuários do jQuery.
Eventos
A associação de eventos
também segue a API do jQuery:
$('a').on('click',
function(e){ console.
[
O ZEPTO PODE SER OTIMIZADO PARA DISPOSITIVOS
MOBILES E NAVEGADORES MODERNOS. ELE NÃO É
COMPATÍVEL COM BROWSERS ANTIGOS
]
log('clique'); });
$('#home').click(function(e)
{ e.preventDefault(); });
Ajax
Para fazer requisições Ajax
usamos este comando simples:
DMD[ RX VHXV DWDOKRV JHW
$.post e $.getJSON.
$.ajax(options)
ށ
XMLHttpRequest
Um exemplo para pegar
GDGRV FRP Û*(7Ü HP XPD S£JLQD
FKDPDGD SDJLQDBDMD[ DVS
$.get('/pagina_ajax.asp’,
function(response){
$(document.body).
append(response)
})
Callbacks controlam as
respostas com funções como:
à VXFFHVV GDWD VWDWXV [KU
quando uma requisição
tem sucesso;
à HUURU [KU HUURU7\SH HUURU
quando a requisição retorna erro;
à FRPSOHWH [KU VWDWXV GHSRLV
que a requisição se completa.
Animação
Zepto permite animar
transições suaves de elementos,
controlando o CSS de cada um.
animate(properties,
[duration, [easing,
[function(){ ... }]]])
ށ
self
animate(properties, {
duration: msec, easing:
type, complete: fn })
ށ
self
animate(animationName, { ...
})
ށ
self
Boa parte do código e
da sintaxe do Zepto é
igual ao do jQuery
REVISTA LOCAWEB