11-移动端开发教程-zepto.js入门教程
Zepto.js是一个轻量级的针对现代浏览器的JavaScript库, 它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto。
1. Why Zepto.js?
- API类似jQuery,熟悉jQuery可以无缝迁移到Zepto.js
- Zepto仅针对高版本现代浏览器设计了最小核心的通用库,代码体积小,尤其适合移动端开发。
- Zepto增加了针对移动端的触摸和手势相关的事件
- Zepto模块化做的很灵活,可以自定义组合模块
2. Zepto.js下载
代码下载:zeptojs中文站 、 github
2.1 自定义Zepto.js文件模块
zepto默认是有五个模块的,分别为zepto、event、ajax、form、ie,这五个模块被称为核心模块。
module | default | description |
---|---|---|
zepto | ✔ | 核心模块;包含许多方法 |
event | ✔ | 通过on() & off() 处理事件 |
ajax | ✔ | XMLHttpRequest 和 JSONP 实用功能 |
form | ✔ | 序列化 & 提交web表单 |
ie | ✔ | 增加支持桌面的Internet Explorer 10+和Windows Phone 8。 |
detect | 提供 $.os 和 $.browser 消息 |
|
fx | The animate() 方法 |
|
fx_methods | 以动画形式的 show , hide , toggle , 和 fade*() 方法. |
|
assets | 实验性支持从DOM中移除image元素后清理iOS的内存。 | |
data | 一个全面的 data() 方法, 能够在内存中存储任意对象。 |
|
deferred | 提供 $.Deferred promises API. 依赖"callbacks" 模块. 当包含这个模块时候, $.ajax() 支持promise接口链式的回调。 |
|
callbacks | 为"deferred"模块提供 $.Callbacks 。 |
|
selector | 实验性的支持 jQuery CSS 表达式 实用功能,比如 $('div:first') 和el.is(':visible') 。 |
|
touch | 在触摸设备上触发tap– 和 swipe– 相关事件。这适用于所有的touch (iOS, Android)和pointer 事件(Windows Phone)。 |
|
gesture | 在触摸设备上触发 pinch 手势事件。 | |
stack | 提供 andSelf & end() 链式调用方法 |
|
ios3 | String.prototype.trim 和 Array.prototype.reduce 方法 (如果他们不存在) ,以兼容 iOS 3.x. |
如果需要其他非核心模块,需要下载github的源码自行编译。
自定义编译步骤:
- 第一步:下载zeptojs源码:源码
- 第二步:解压源码,并打开命令行进入源码根目录
# 打开命令行工具,进入解压的zepto目录
$ cd zepto-master
# 安装npm包依赖
$ npm install
- 第三步:修改make编译文件的依赖模块
modules = (env['MODULES'] || 'zepto event ajax form ie').split(' ')
## 修改:增加 touch gesture fx fx_methods等模块 ##
modules = (env['MODULES'] || 'zepto event ajax form ie touch gesture fx fx_methods').split(' ')
- 第四步:编译最终的zeptojs
$ npm run-script dist
3. zepto注意事项
- 注意某些模块必须打包进zeptojs文件才能用,比如:
fx_methods
模块的方法:hide() show()
等动画方法。 - Zepto只设置全局变量$指向它本身。 没有Zepto.noConflict方法。
- 不支持jQuery CSS 扩展, 然而,可选的“selector”模块有限提供了支持几个最常用的伪选择器
- Zepto.js: 无法获取隐藏元素宽高;
- Zepto 的选择器表达式: [name=value] 中value 必须用 双引号 " or 单引号 ' 括起来
- 移动端端点透需要阻止默认行为来规避。
其实还有很多方法的缺失,所以大家自己在写代码的时候多留意下zepto和jQuery的区别吧,在此就不多赘述了。
4. zepto的应用demo
用法基本跟jQuery一致,直接上手就行,不用客气。
<ul>
<li>list item 1</li>
<li class="yaotaiyang">list item 2</li>
<li>list item 3</li>
</ul>
<p>a paragraph</p>
<script type="text/javascript">
$(function() {
$("p").on('click', function(e) {
$("li").toggleClass("yaotaiyang");
});
});
</script>
5. 总结
zepto.js确实非常小巧,而且非常讨巧的利用了大家熟悉jQuery的优势,确实非常可爱的一个js库,设计的模块中庸而又实用,在移动端的触屏事件封装的很不错,移动端web开发值得推荐。
11-移动端开发教程-zepto.js入门教程的更多相关文章
- D3.js 入门教程
最近需要用到d3, 记录下d3的教程 网上搜了几个关于d3的教程 D3.js 入门教程 http://wiki.jikexueyuan.com/project/d3wiki/author.h ...
- 【特别推荐】Node.js 入门教程和学习资源汇总
这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...
- Node.js 入门教程和学习资源汇总
这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...
- CentOS开发ASP.NET Core入门教程
作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9891346.html 因为之前一直没怎么玩过CentOS,大多数时间都是使用Win10进行开发,然后程序 ...
- Vue.js 入门教程
Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html
- Nginx教程(一) Nginx入门教程
Nginx教程(一) Nginx入门教程 1 Nginx入门教程 Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like协议下发行.由 ...
- AFNnetworking快速教程,官方入门教程译
AFNnetworking快速教程,官方入门教程译 分类: IOS2013-12-15 20:29 12489人阅读 评论(5) 收藏 举报 afnetworkingjsonios入门教程快速教程 A ...
- node.js 入门教程(beginnder guide
非常好的教程: node入门: JavaScript与Node.js JavaScript与你 简短申明 服务器端JavaScript “Hello World” 一个完整的基于Node.js的web ...
- 1. web前端开发分享-css,js入门篇
关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...
随机推荐
- Bzoj3930: [CQOI 2015] 选数 & COGS2699: [CQOI 2015] 选数加强版
题面 Bzoj COGS加强版 Sol 非加强版可以枚举AC这里不再讲述 设\(f(i)\)表示在\([L, H]\)取\(N\)个,\(gcd为i\)的方案数 \(F(i)=\sum_{i|d}f( ...
- 1.1 java语言有什么优点
1.java是一种纯面向对象的语言.(更易理解和学习) 2.平台无关性.(java是一种解释性的语言,编译器会把java语言变成中间代码,然后在JVM上运行,可移植性) 3.java提供了很多内置的库 ...
- less-more使用方法及区别
Less按屏(空格,page up/page down)或按行(回车)查看文件 Less按屏(空格)或按行(回车)查看文件(不能向上翻)
- 对html进行截图并保存为本地图片
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- mysql执行计划简介
介绍 本篇主要通过汇总网上的大牛的知识,简单介绍一下如何使用mysql的执行计划,并根据执行计划判断如何优化和是否索引最优. 执行计划可显示估计查询语句执行计划,从中可以分析查询的执行情况是否最优,有 ...
- centos7.2 配置内网ntp服务器进行时间同步
(一)修改/etc/ntp.conf 配置文件,注意红色部分,其他部分不需要改 ########################################################### ...
- php seaslog的使用
今天有幸在慕课网看到了 关于php日志处理工具 seasLog 的使用视频,本着好奇看完了该视频,觉得不错,便自己也倒腾了下,现在整理出来 seaslog github: https://githu ...
- 深入理解Java虚拟机类加载机制
1.类加载时机 对于类加载的第一个阶段---加载,虚拟机没有强制的约束,但是对于初始化阶段,虚拟机强制规定有且只有以下的5中情况必须开始初始化,当然,加载.验证.准备阶段在初始化前就已经开始. ①使用 ...
- WordPress文章页添加展开/收缩功能
很多时候我们在WordPress上发布一些文章的时候里面都包含了很多的代码,我一般又不喜欢把代码压缩起来而喜欢让代码格式化显示,但是格式化显示通常会让文章内容看起来很多,不便于访问者浏览,所以今天就介 ...
- Spring事务传播机制和数据库隔离级别
Spring事务传播机制和数据库隔离级别 转载 2010年06月26日 10:52:00 标签: spring / 数据库 / exception / token / transactions / s ...