有些不了解zepto的同学在刚接触的时候肯定有很多疑惑,这个东西怎么用啊,去哪里下载啊,什么时候该用什么时候不该用啊,其实我以前也是这样的。jquery使用多了那么就让我们一起来了解下zepto把。

在移动端用不着pc端兼容难么多的浏览器,所以就有了zepto.js,如果此时用jquery的话就有些重了,现在pc端可以使用jquery,但是反过来的话pc端如果用zepto,js的话就不怎么兼容ie浏览器了。

这个库几乎和jquery 一样。使用上没什么区别,用法一样,可以理解为zepto.js仿照的jquery.

绑定事件和jquery一模一样,用下面这个改变背景色的小例子来说明一下↓

此时的用法和jquery,只需要引入zepto文件即可。

但是zepto也不完全和jquery一样,在zepto里面有些功能是默认没有的,比如说animate方法,此时如果想用的话需要在zepto里面增加一个fx模块。因为zepto是基于模块来管理的(将某些特定的功能独立出来形成一个单独的js文件,称为模块)。

之所以采用模块的方式是因为为了提高性能,需要哪个模块的功能就添加哪个模块。

zepto默认是有五个模块的,分别为zepto、event、ajax、form、ie,这五个模块被称为核心模块。

下面这张图是zepto里面的所有模块。

那么如何在zepto里面增加和删除模块呢?

1、首先要安装node.js环境;

2、去zeptojs.com网站下载安装zepto.js,然后解压缩

3、打开cmd命令窗口进入解压缩后的zepto目录(解压后的这个解压文件夹里面) 。

4、执行npm install 命令

5、然后编辑make文件,添加需要的自定义模块并保存

6、然后执行命令 npm run-script dist

7、此时会生成一个dist文件,查看目录dist即构建好的zepto.js

这时候直接引入你的zepto文件就可以用啦。

在这里我只说了一下zepto的下载和使用,具体模块下的方法请到官方的说明文档查看。

纯手打,如有错误请大家提出指正。

 

zepto的使用方法的更多相关文章

  1. jquery和zepto的扩展方法extend

    jquery和zepto的扩展方法extend 总结下jQuery(3.1.1)和zepto(1.1.6)到底是如何来开放接口,使之可以进行扩展,两者都会有类型判断,本文使用简单的类型判断,暂不考虑兼 ...

  2. 学习zepto.js(原型方法)

    学习zepto.js(原型方法)[1] 转载 新的一周,新的开始,今天来学习一下zepto里边的原型方法,就是通过$.进行调用的方法,也是可以通过$.fn进行扩展的方法: $.camelCase(): ...

  3. zepto的ready方法

    zepto中的ready函数是作为$.fn的一个方法,即作为一个zepto对象的方法 readyRE = /complete|loaded|interactive/; ready: function( ...

  4. 学习zepto.js(对象方法)[6]

    first: 获取当前对象集合中的第一个dom元素. $("div").first(); // 返回第一个div对象(zepto对象) //相当于$("div" ...

  5. 学习zepto.js(对象方法)[5]

    继续说. clone: 该方法不接收任何参数,会返回对象中的所有元素集合,但不会对象绑定的事件. var $temp = $("div").clone(); //并不接收任何参数. ...

  6. 学习zepto.js(对象方法)[4]

    今天说说那一套获取元素集合的一些方法: ["children", "clone", "closest", "contents&qu ...

  7. 学习zepto.js(对象方法)[3]

    继续说zepto里attributes的相关操作. attr,removeAttr,prop这三个方法. attr(): 三种用途 get: 返回值为一个string字符串 $("<s ...

  8. 学习zepto.js(对象方法)[2]

    今天来说下zepto那一套dom操作方法, prepend,append,prependTo,appendTo,before,after,insertBefore,insertAfter; 按着从内到 ...

  9. 学习zepto.js(对象方法)[1]

    zepto也是使用的链式操作,链式操作:函数返回调用函数的对象. 但并不是所有的对象方法都可以进行链式操作,举几个例子:.size(),.html()|.text()//不传参数的情况下; 若非特殊说 ...

  10. 学习zepto.js(原型方法)[2]

    接着昨天的来,继续说原型方法,昨天的传送阵(昨天出了点小意外,博文经过WP手机的UC浏览器进行编辑后标签就露出来了- -,现已修复); $.grep(): 作用与Array.filter类似(其实就是 ...

随机推荐

  1. ASP.Net MVC连接MySQL和Code First的使用

    首先要准备一下的工具作为环境 MySQL Community Server 5.7.x My Workbench 6.3 VS2017 新建一个项目,NetMySQLCodeFirst 选择MVC,再 ...

  2. 通过HPS控制FPGA端的GPIO

    该笔记主要记录HPS端如何通过AXI Bridge控制FPGA端口的GPIO,主要是如何操作FPGA侧的Led 1.AXI Bridge         AXIB主要包括H2FB.F2HB.LWH2F ...

  3. 如何在Unity中分别实现Flat Shading(平面着色)、Gouraud Shading(高洛德着色)、Phong Shading(冯氏着色)

    写在前面: 先说一下为什么决定写这篇文章,我也是这两年开始学习3D物体的光照还有着色方式的,对这个特别感兴趣,在Wiki还有NVIDIA官网看了相关资料后,基本掌握了渲染物体时的渲染管道(The re ...

  4. Jquery datatable 动态隐藏列(根据有无值)

    一场景: 前端利用datatable初始化的时候会向后端调用数据,需求是 要动态的使某一列根据传回来的一个标志位是否有值来决定显示与否 这是当前传回值有活动优惠幅度的情况下 这是没有活动优惠的情况下 ...

  5. SCAU Individual Contest #1

    总结一下就是自己太弱.每次打比赛遇到比较难题就喜欢瞎开题,结果都是每题想一下,然后就是结束了. A:题意让你用小写字母构造一个总共有K个的回文串,比如aba的话就是{a}{b}{a}{aba}四个,比 ...

  6. 开涛spring3(6.3) - AOP 之 6.3 基于Schema的AOP

    6.3  基于Schema的AOP 基于Schema的AOP从Spring2.0之后通过“aop”命名空间来定义切面.切入点及声明通知. 在Spring配置文件中,所以AOP相关定义必须放在<a ...

  7. GRPC在NET上的实践(记录篇)

    GRPC是什么? GRPC是一个开源RPC框架,于2015年3月开源,其由Google主要面向移动应用开发并基于HTTP/2协议标准而设计,基于Protobuf 3.0(Protocol Buffer ...

  8. nginx源码分析——线程池

    源码: nginx 1.13.0-release   一.前言      nginx是采用多进程模型,master和worker之间主要通过pipe管道的方式进行通信,多进程的优势就在于各个进程互不影 ...

  9. jq、js中判断checkbox是否选中

    最近在开发项目时用到checkbox复选框,其中遇到一个问题:在JQ中如何判断checkbox是否被选中呢?之前用JQ获取元素的属性用的都是attr(),但用在checkbox上却没有用,原因何在?? ...

  10. Redis 小白指南(四)- 数据的持久化保存(草稿)

    Redis 小白指南(四)- 数据的持久化保存 简介 因为 redis 将数据保存在内存中,很容易诱发的一个问题就是,程序崩溃或服务器重启等情况如何保证数据的正常存储. 当我们以 redis 作为主数 ...