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();

        });
1
2
3

假设 box2 一开始是隐藏的，事件中，让 box2 显示出来。

Zepto入门的更多相关文章

  1. zepto 入门

    2017-03-17 文章来源:http://www.cnblogs.com/daysme zepto 简介 jq虽然有一些衍生的插件可用在移动端上,但它有点大. click 有,但有问题 onmou ...

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

    一.介绍js移动端框架:zepto.js与jquery mobile 对比:zepto特点 1.与jquery相似度95%,会jquery基本会zepto: 2.API少,轻量级框架 3.移动端无缝接 ...

  3. 支持触屏的zepto轮播图插件

    占个座,有时间再写,呵呵 关于zepto.js,官方标准版是不支持touch的.可以去github下载压缩包,里面有所有支持的模块.我用的zepto.js,是经过打包的,包括polyfill zept ...

  4. Zepto.js入门介绍

    GitHub Zepto Zepto的一些可选功能是专门针对移动端浏览器的:因为它的最初目标在移动端提供一个精简的类似jquery的js库. Zepto不支持旧版本的Internet Explorer ...

  5. 11-移动端开发教程-zepto.js入门教程

    Zepto.js是一个轻量级的针对现代浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. 1. Why Zepto.js? API类 ...

  6. zepto快速入门教程

    * zepto* 特点:1.体积8kb2.针对移动端的框架3.语法同jquery大部分一样,都是$为核心函数4.目前功能完善的框架体积最小的左右* 同jquery相似的语法核心:$--作为函数使用参数 ...

  7. Javascript快速入门(下篇)

    Javascript, cheer up. Ajax:其通过在Web页面与服务器之间建立一个额外的处理层,这个处理层就被称为Ajax引擎,它解释来自用户的请求,在后台以异步的方式处理服务器通信,其结构 ...

  8. Backbone入门

    Backbone入门讲解 Backbone是一个实现了web前端mvc模式的js框架. 一种解决问题的通用方法,我们叫做模式. 设计模式:工厂模式,适配器模式,观察者模式等,推荐js设计模式这本书.设 ...

  9. 学习web前端怎样入门？初学者赶紧看过来！

    web前端怎么样才能入门,首先我们要从什么是初级web前端工程师说起: 按照我的想法,我把前端工程师分为了入门.初级.中级.高级这四个级别, 入门级别指的是了解什么是前端(前端到底是什么其实很多人还是 ...

随机推荐

  1. FL Studio钢琴卷轴之刷子工具以及其他

    上一篇文章我们重点讲解了FL Studio钢琴卷轴的画笔工具,今天我们就来讲解钢琴卷轴窗口中剩下的工具.由于接下来的工具都很简单,所以我们将放在一起讲,现在就和小编一起来看看FL Studio钢琴卷轴 ...

  2. 使用Eclipse创建Maven的JSP项目

    使用Eclipse创建Maven的JSP项目 MyEclipse2015根本不行,试过各种解决方案都无济于事. 创建Maven项目 此时项目上有错,pom.xml有错. 修改Java版本 生成web. ...

  3. C语言初级编程实践：2048小游戏

    大部分同学学习C语言编程以后不知道能通过什么样的项目才可以锻炼自己的思维功力,2048相信大家都应该熟悉,不管是手机上还是网页版的相信大家都玩过,这个简单的控制台版本的游戏是我曾经在伟易达上班时一个嵌 ...

  4. k8s+docker_part2

    docker+k8s 目录 docker+k8s 1 简介 1.1 docker是什么 1.2 为什么要用docker 1.2.1 docker容器虚拟化的好处 1.2.2 docker在开发和运维中 ...

  5. 【2020.12.03提高组模拟】A组反思

    估计:40+10+0+0=50 实际:40+10+0+0=50 rank40 T1 赛时看到\(n,m\leq9\),我当机立断决定打表,暴力打了几个点之后发现在\(n\ne m\)且\(k\ne0\ ...

  6. vue回调接口

    1.微博回调接口 1.1oauth/urls.py 中添加路由 urlpatterns = [ path('weibo/callback/', views.OauthWeiboCallback.as_ ...

  7. moviepy音视频剪辑基类VideoClip的write_gif方法opt、fuzz、dispose、colors、loop等参数的作用

    ☞ ░ 前往老猿Python博文目录 ░ moviepy音视频剪辑模块的视频剪辑基类write_gif方法用于将视频剪辑输出到gif文件,调用语法如下: def write_gif(self, fil ...

  8. 第7.19节 Python中的抽象类详解：abstractmethod、abc与真实子类

    第7.19节 Python中的抽象类详解:abstractmethod.abc与真实子类 一.    引言 前面相关的章节已经介绍过,Python中定义某种类型是以实现了该类型对应的协议为标准的,而不 ...

  9. 第三十六章、PyQt输入部件：QAbstractSpinBox派生类QSpinBox、 QDoubleSpinBox、QDateTimeEdit、QDateEdit和QTimeEdit

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 一.概述 Designer输入部件中的Spin B ...

  10. 第10.4节 Python模块的弱封装机制

    一. 引言 Python模块可以为调用者提供模块内成员的访问和调用,但某些情况下, 因为某些成员可能有特殊访问规则等原因,并不适合将模块内所有成员都提供给调用者访问,此时模块可以类似类的封装机制类似的 ...