一 概述
Zepto项目地址
Zepto介绍
Zepto入门案例
参考
二 Zepto项目地址2.1 项目地址ZeptoZepto:https://github.com/madrobby/zepto
2.2 文件下载:zepto/src/目录下
2.3 如何使用
说明:
将js文件放入js目录下
示例项目导入js中的依赖文件(目录结构如上图)
三 Zepto介绍
发音:仄普托
用文档的话来说,Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api
如果你会用jquery,那么你也会用zepto
主要针对移动端,因为不兼容IE浏览器,所以更轻量级,体积更小,才10k左右
为移动端各事件提供很好的支持,但它也有部分API是和jQuery的实现方式是不同的
四 Zepto入门案例4.1 Hello Zepto12345678910111213141516
4.2 事件ready和onload的区别123456789101112131415161718192021222324
4.3 zepto转Dom对象如果需要用到原生js的api,可将zepto的对象和dom对象互相转换
12345678910111213141516171819
4.4 选择器选择器的使用基本跟jquery类似,基本选择器,后台选择器,子元素选择器,相邻元素选择器等等
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
你好
你好
22
33
44
55
66
4.5 Zepto对DOM的操作1234567891011121314151617181920212223242526272829303132333435363738394041424344
你好
- 删除
要被替换的节点
被包裹的节点
4.6 Zepto对dom属性操作1234567891011121314151617181920212223242526272829303132333435363738
4.7 获取元素对象api12345678910111213141516171819202122232425262728
我是第一个元素
我是第二个元素
我是第三个元素
4.8 Zepto进行css样式修改1234567891011121314151617181920212223
4.9 事件绑定123456789101112131415161718192021222324
4.10 事件冒泡和事件捕获Zepto不能进行事件捕获,所以需要用原生js,并将绑定事件默认值false改成true
123456789101112131415161718192021222324252627282930313233
4.11 事件委托123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
- 我是1
- 我是2
- 我是3
- 我是4
4.12 事件其他用法12345678910111213141516171819202122232425262728293031323334353637
4.13 Zepto动画因为zepto.min是轻量级的,只保留核心功能,所以动画需要引入相关的js代码,可自行到git下载
123456789101112131415161718192021222324252627282930
4.14 自定义animate动画函数12345678910111213141516171819202122232425262728293031323334353637383940414243
4.15 移动端事件12345678910111213141516171819202122232425262728293031323334353637383940414243444546
4.16 自定义Zepto插件123456789101112131415161718192021222324252627
五 参考
博客园—Zepto入门详解
Zepto.js API 中文版
Zepto官网
Github-Zepto