Zepto开发之——入门详解

Zepto开发之——入门详解

一 概述

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 第一个Demo

4.2 事件ready和onload的区别123456789101112131415161718192021222324 事件ready和onload的区别

4.3 zepto转Dom对象如果需要用到原生js的api,可将zepto的对象和dom对象互相转换

12345678910111213141516171819 dom对象和zepto对象互转

4.4 选择器选择器的使用基本跟jquery类似,基本选择器,后台选择器,子元素选择器,相邻元素选择器等等

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374 选择器

你好

你好

11

22

33

我是兄弟节点

44

55

66

过滤1
过滤2
过滤3

4.5 Zepto对DOM的操作1234567891011121314151617181920212223242526272829303132333435363738394041424344 zepto对dom操作

你好

  • 删除

要被替换的节点

被包裹的节点

4.6 Zepto对dom属性操作1234567891011121314151617181920212223242526272829303132333435363738 zepto对dom属性操作

属性操作

4.7 获取元素对象api12345678910111213141516171819202122232425262728 Title

我是第一个元素

我是第二个元素

我是第三个元素

4.8 Zepto进行css样式修改1234567891011121314151617181920212223 zepto中的css-dom操作

我是一个CSS的测试div

4.9 事件绑定123456789101112131415161718192021222324 事件绑定

事件绑定

4.10 事件冒泡和事件捕获Zepto不能进行事件捕获,所以需要用原生js,并将绑定事件默认值false改成true

123456789101112131415161718192021222324252627282930313233 事件冒泡和事件捕获

我是事件A

4.11 事件委托123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 事件委托代理

  • 我是1
  • 我是2
  • 我是3
  • 我是4

4.12 事件其他用法12345678910111213141516171819202122232425262728293031323334353637 事件其他用法

4.13 Zepto动画因为zepto.min是轻量级的,只保留核心功能,所以动画需要引入相关的js代码,可自行到git下载

123456789101112131415161718192021222324252627282930 Zepto动画

123

4.14 自定义animate动画函数12345678910111213141516171819202122232425262728293031323334353637383940414243 zepto动画函数

我是方块

4.15 移动端事件12345678910111213141516171819202122232425262728293031323334353637383940414243444546 触屏事件

屏幕

4.16 自定义Zepto插件123456789101112131415161718192021222324252627 Title

我是插件

五 参考

博客园—Zepto入门详解

Zepto.js API 中文版

Zepto官网

Github-Zepto

相关推荐

易跑和亿健哪个质量好,体重轻的选易跑跑步机/体重重的选亿健
《王者荣耀》钟馗怎么甩钩 S17钟馗甩钩技巧教学攻略
365bet体育在线投注注册备

《王者荣耀》钟馗怎么甩钩 S17钟馗甩钩技巧教学攻略

📅 07-21 👍 504
FPX冠军皮肤6折来袭 三分钟看懂小长假活动
365客服电话

FPX冠军皮肤6折来袭 三分钟看懂小长假活动

📅 07-04 👍 379
Google Wallet怎么注册?申请开通Google Wallet账户需要哪些资料?
win7鼠标灵敏度怎么调_win7鼠标灵敏度的设置办法步骤
有人被365黑过钱吗

win7鼠标灵敏度怎么调_win7鼠标灵敏度的设置办法步骤

📅 07-02 👍 13
阴茎的锻炼(男人“坚持时间”太短怎么办?别自卑,3个方法改善)