一、介绍js移动端框架:zepto.js与jquery mobile
对比:zepto特点
1、与jquery相似度95%,会jquery基本会zepto;
2、API少,轻量级框架
3、移动端无缝接入
4、高性能
jquery mobile特点
1、高度组件化
2、加载多内容,性能降低
二、zepto入门
1、自带模块:核心模块,事件,ajax,IE兼容性;
2、$认识:构造函数,与jquery区别在:
i,$()相当于$(document).ready(function(){});
ii,$(jq对象)=jq对象
3、core 核心模块
*学习方法:在浏览器console中直接写代码打印调试*
i,方法与JQ差不多,除此之外可自定义事件:$.event(),要先bind事件,再tiggle事件;
4,touch event 事件
手机端本来没有onclick事件,为了兼职性,给予封装,如下
var CLICK = 'click'
var UA = window.navigtor.userAgent;
if('/pad|iphone|android/'.test(UA)){
CLICK = 'tap';
}
*PC端调试移动web应用:设置浏览器touch event即可模拟手机端操作*
i,tap 轻按;longtap长按等等
5、ajax
可跨域访问
6、插件i,fx 动画效果,不建议使用
ii,derferred 异步请求
iii,创建插件
(function($){
$.extend($.fn,{
});
});
三、举例
1、NODE.JS项目结构
2、展示图片方法:
i,将图片URL赋值给属性data-src,再通过函数创建canvas展示,同时用localStorage储存;
以上