Zepto入门
Zepto 的介绍
#什么是 Zepto
zepto是轻量级的JavaScript库，专门为移动端定制的框架。
与jquery有着类似的API，俗称：会jquery就会用zepto
#zepto的特点
针对移动端
轻量级，压缩版本只有8kb左右
响应，执行快
语法、API大部分同jquery一样，学习难度低，上手快。
目前API完善的框架中体积最小的一个
#相关网址
#Zepto 与 jQuery 的前世今生
#相同点
都是优秀的js函数库
语法、API大部分都一样（zepto是按照jquery的思路来设计的）
Zepto 相当于 jQuery 的子集
同jQuery一样，都是以
$符号为核心函数。
#不同点
#Zepto 的初体验
（1）Zepto 库的下载：
我们去官网下载 Zepto的开发版本zepto.js：
官网里，还有这样一张图：
上图的意思是：
最前面打钩的那五个api，已经包含在
zepto.js文件里了；后面没有打钩的那些api，如果需要用它们，必须单独下载响应的文件。
比如说，移动端的 touch 事件是很常见的，我们可以将touch.js这个文件下载，稍后用。
（2）代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#btn {
width: 200px;
height: 200px;
background: pink;
margin: 10px auto;
}
</style>
</head>
<body>
<div id="btn">我是 div</div>
<script src="libs/zepto1.2.0.js"></script>
<script src="libs/touch.js"></script>
<script>
$(function () {
$('#btn').on('touchstart', function () {
alert('hello world');
});
});
</script>
</body>
</html>
上方代码实现的效果是，当手在div上滑动时，就会弹出 alert窗。可以看出，这里面代码的写法和 jQuery 是一致的。
注意，我们要将浏览器切换到手机模式，才能看到touchstart事件的效果；否则，在浏览器上点来点去，是没有反应的。
#Zepto 和 jQuery 相同的 api
意思是，jQuery 和 Zepto 有哪些共同点。
#jQuery 的主要特性
下面来讲一下 jQuery 的主要特性（jQuery 的核心函数$、jQuery 对象），它们对 Zepto 来说，同样适用。
1、jQuery 的核心函数$:
作为函数使用（参数）：
function
html字符串
DOM code
选择器字符串
作为对象调用(方法)：
$.ajax() $.get() $.post()
$.isArray() $.each() $.isFunction() $.trim()
2、jQuery 对象：
概念：jquery核心函数$()调用返回的对象就是jquery对象的数组（可能有只有一个）。
使用列举：
addClass()
removeClass()
show()
find()
#代码举例
1、$.each()方法举例：（遍历数组）
<script src="libs/zepto-1.2.0.js"></script>
<script src="libs/zepto-1.2.0.js"></script>
<script>
var arr = [2, 4, 6, 8];
$.each(arr, function (index, item) {
console.log(index, item);
});
</script>
打印结果：
2、append()举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background: pink;
}
</style>
</head>
<body>
<div class="box1"></div>
<script src="libs/zepto-1.2.0.js"></script>
<script src="libs/touch.js"></script>
<script>
$('.box1').on('touchstart', function () {
$('.box1').append('<p>我是新添加的元素</p>');
});
</script>
</body>
</html>
上方代码实现的效果是：每次，当手在box1上滑动时，会在 box1 中新添加一个元素。
4、find()方法举例：
$('.box1').on('touchstart', function () {
console.log('touch');
$(this).find('p').css('background', 'red');
});
代码解释：找到 box1 中的 p 标签， 给 p 标签设置背景色。
注意，代码里的$(this).find()相当于this.find，只不过this没有find方法，而$有find方法。
5、show()方法举例：
$(`.box1`).on('touchstart', function () {
$('.box2').show();
});
2
3
假设 box2 一开始是隐藏的，事件中，让 box2 显示出来。
Zepto入门的更多相关文章
- zepto 入门
2017-03-17 文章来源:http://www.cnblogs.com/daysme zepto 简介 jq虽然有一些衍生的插件可用在移动端上,但它有点大. click 有,但有问题 onmou ...
- http://www.imooc.com/video/4767 zepto教学视频笔记
一.介绍js移动端框架:zepto.js与jquery mobile 对比:zepto特点 1.与jquery相似度95%,会jquery基本会zepto: 2.API少,轻量级框架 3.移动端无缝接 ...
- 支持触屏的zepto轮播图插件
占个座,有时间再写,呵呵 关于zepto.js,官方标准版是不支持touch的.可以去github下载压缩包,里面有所有支持的模块.我用的zepto.js,是经过打包的,包括polyfill zept ...
- Zepto.js入门介绍
GitHub Zepto Zepto的一些可选功能是专门针对移动端浏览器的:因为它的最初目标在移动端提供一个精简的类似jquery的js库. Zepto不支持旧版本的Internet Explorer ...
- 11-移动端开发教程-zepto.js入门教程
Zepto.js是一个轻量级的针对现代浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. 1. Why Zepto.js? API类 ...
- zepto快速入门教程
* zepto* 特点:1.体积8kb2.针对移动端的框架3.语法同jquery大部分一样,都是$为核心函数4.目前功能完善的框架体积最小的左右* 同jquery相似的语法核心:$--作为函数使用参数 ...
- Javascript快速入门(下篇)
Javascript, cheer up. Ajax:其通过在Web页面与服务器之间建立一个额外的处理层,这个处理层就被称为Ajax引擎,它解释来自用户的请求,在后台以异步的方式处理服务器通信,其结构 ...
- Backbone入门
Backbone入门讲解 Backbone是一个实现了web前端mvc模式的js框架. 一种解决问题的通用方法,我们叫做模式. 设计模式:工厂模式,适配器模式,观察者模式等,推荐js设计模式这本书.设 ...
- 学习web前端怎样入门？初学者赶紧看过来！
web前端怎么样才能入门,首先我们要从什么是初级web前端工程师说起: 按照我的想法,我把前端工程师分为了入门.初级.中级.高级这四个级别, 入门级别指的是了解什么是前端(前端到底是什么其实很多人还是 ...
随机推荐
- Guitar Pro小课堂之弹唱和弦转换小技巧
吉他相对其他乐器的便携性,还有其便于弹唱的特点,受到了很多音乐萌新们的喜爱.对于刚刚接触吉他的萌新来说,学琴初期弹唱的时候经常会因为和弦卡顿的转换,和因为食指力度不够或技巧不对无法顺利演奏的大横按,导 ...
- 开始使用 java8 的日期工具类
例如,现有的类(例如java.util.Date和SimpleDateFormatter)不是线程安全的,这会导致用户潜在的并发问题.而新的LocalDate.LocalDateTime.DateTi ...
- 墨振文档__UnitTest断言
unittest 断言方法 断言:自动化测试主要用于对流程来进行测试,断言就是自动化测试中的预期结果与实际结果的对比.
- 灵彤彤女版PUA机构火了！“我花了8888报名学撩汉，却被导师骗去卖身。
最近,几张女PUA机构的导师和课程海报在社交网络广泛刷屏. 而社长觉得自己可以去潜心研究一下,为什么有女PUA机构的这种课程呢? 爱情的确是一门玄学. 精通此技能的女孩桃花不断,前任和现任无缝切换 ...
- Java蓝桥杯02——第二题集锦：生日蜡烛、星期一、方格计数、猴子分香蕉
第二题 生日蜡烛(结果填空) 某君从某年开始每年都举办一次生日party,并且每次都要吹熄与年龄相同根数的蜡烛. 现在算起来,他一共吹熄了236根蜡烛. 请问,他从多少岁开始过生日party的? 请填 ...
- VisualStudio 编写汇编代码相关设置
VS编写汇编代码方法 新建空项目,不创建解决方案 项目右键,Build Customizations,选择masm 新建源文件,后缀为.ASM 编写代码 .386 ; Tells MASM to us ...
- Beta冲刺随笔——Day_Three
这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 Beta 冲刺 这个作业的目标 团队进行Beta冲刺 作业正文 正文 其他参考文献 无 今日事今日毕 林涛: ...
- java并发编程实战《六》等待-通知机制
用"等待-通知"机制优化循环等待 前言 在破坏占用且等待条件的时候,如果转出账本和转入账本不满足同时在文件架上这个条件,就用死循环的方式来循环等待. 1 // 一次性申请转出账户和 ...
- 第12.2节 Python sys模块导览
sys模块包括一些用于系统处理的功能,常用的成员包括: sys.argv:当前执行进程的命令参数列表,不含执行程序本身的名字: sys.stdin .sys.stdout 和 stderr :分别对应 ...
- PyQt(Python+Qt)学习随笔：Qt Designer中部件的enabled属性
enabled属性非常简单,最开始老猿没准备介绍该属性的,因为大家都应该知道,但仔细看了看官网文章,觉得还是有些细节可能很少有人注意到,因此还是在此介绍一下. enabled属性用于表示部件是否可用, ...