http://www.imooc.com/video/4767 zepto教学视频笔记

时间:2021-11-19 06:42:59

一、介绍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储存;

以上