zepto中的动画
zepto中不具备动画模块,需要单独引入 fx.js 和 fx_methods.js
https://github.com/madrobby/zepto
toggle 元素显示与隐藏
<!DOCTYPE html> <html lang="en"head> meta charset="UTF-8"title>zepto</name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"style> bodydiv>boxbutton id="btn">点我button> script src="js/zepto.min.js"></script="js/fx.js"><!-- 动画模块 --> ="js/fx_methods.js"> $("#btn).click(function(){ $(div).toggle(); $().toggle(slow); $(3000); }) html>
show 显示 hide 隐藏
).hide(); $().hide(); $().show(); $().show(>
fadeIn 淡入 fadeOut 淡出 fadeToggle 切换淡入与淡出
span>span).fadeIn(); $().fadeIn(fast).fadeOut(); $().fadeOut().fadeToggle(); $().fadeToggle(); //控制多个元素 $(div,span>
fadeTo 切换透明度
).fadeTo(,.3>
animate动画:
对元素的属性进行动画
参数分别是:动画的属性、动画持续时间、动画完成后的回调
#div{width:50px;heightbackgroundpinkpositionabsolutetop0left} #btn absolute} div ="div"#div).animate({300},(){ alert(finished); }) }) >
多属性动画:
>
多属性不同时进行动画,而是执行完一个属性再执行另一个
将第二个动画写在第一个的回调里
(){ $(this(){ alert(); }) }) }) >
zepto中的Ajax:
get post ajax
get 和 post 属于 ajax 的一种简写方式
> 原生ajax请求 Ajax(){ var xmlHttpReq=null; if(window.ActiveXObject){ IE5,6 xmlHttpReqnew ActiveXObject(Microsoft.XMLHTTP); }else{ xmlHttpReq XMLHttpRequest(); } xmlHttpReq.open(GETtest.phptrue); xmlHttpReq.onreadystatechange(){ (xmlHttpReq.readyState==4){请求完毕 (xmlHttpReq.status200获取到数据 console.log(获取数据:+xmlHttpReq.responseText); } } } xmlHttpReq.send(); } zepto ajax get 参数分别是:1、url 2、传递给后端的参数 3、接收到数据的处理 4、预期接收到的数据的类型 $.get((res){ $(document.body).append(res); },[dataType]); post 参数与get相同(参数2和4不是必须,参数4一般并不需要填写) $.post(5json); ajax $.ajax({ type:(res){ console.log(res); },error:(){ console.log(error); } }) >
zepto中的touch模块:
找到touch.js,下载下来
#cce="js/touch.js"阻止默认行为 $().on(touchmove(e){ e.preventDefault();}) 各种touch事件 ).tap((){ console.log(tap);点击 }).singleTap(singleTap单击 }).longTap(longTap长按 }).doubleTap(doubleTap双击 }).swipe(swipe快速划动 }).swipeLeft(swipeLeft快速右划 }).swipeRight(swipeRight快速左划 }).swipeUp(swipeUp快速上划 }).swipeDown(swipeDown快速下划 }); >
zepto插件:
单插件:
100px>我是div="js/zepto.fullpage.js"插件的写法 ;(($){ $.fn.myfn(options){ 对象合并,相同属性后面的覆盖前面的 options$.extend({ 设置默认值 colororangefontSize14px },options); .css({:options.color,1)">:options.fontSize}); return 方便链式调用 } })(Zepto); 使用插件 ).myfn({ fontSize:20px }).html(可以链式调用啦); >
一组插件:
($){ 一组插件 $.extend($.fn,{ myfn:(options){ $.extend({ 设置默认值 },options); :options.fontSize}); },myfn2:backgroundColorlightgreen:options.backgroundColor}); ; } }); })(Zepto); }).myfn2(); >
将插件独立出去,使用时再引入
myfn.js
//插件的写法 ;(function($){ 一组插件 $.extend($.fn,{ myfn:(options){ var options=$.extend({ 设置默认值 "color":"orange" },options); this.css({"color":options.color,"fontSize":options.fontSize}); return this;方便链式调用 },myfn2:$.extend({ "backgroundColor":"lightgreen"this.css({"backgroundColor":options.backgroundColor}); this; } }); })(Zepto);
index.html
="js/myfn.js" 引入插件 --> }).myfn2({ backgroundColor:lightblue }); >
jQuery和zepto的区别:
zepto是jQuery的精简版,主要针对移动端(因此不会去兼容IE)
部分API实现方式不同
区别1:添加id时,jQuery不会生效,而zepto会生效
jQuery
class>div="hide">hide="js/jquery.min.js" <script src="js/zepto.min.js"></script> $((){ 区别1:添加id时,jQuery不会生效,而zepto会生效 $$(<div>new</div> }); $.appendTo($(body)); 区别2:offset() // 区别3:zepto无法获取隐藏的元素的宽高,而jQuery可以 >
zepto
)); }); >
区别2:
区别2:offset()输出元素的定位
jQuery返回元素的top和left
zepto返回元素的top、left、width、height
jQuery
divmargin-bottom区别2:offset()输出元素的定位 jQuery返回元素的top和left zepto返回元素的top、left、width、height console.log($().offset()); }); >
zepto
<script src="js/jquery.min.js"></script> ).offset()); >
区别3:添加id时,jQuery不会生效,而zepto会生效
jQuery
.hidedisplay none.hide).width()); }); >
zepto
>