有些不了解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. javascript的面向对象详解

    每次说到javascript到面向对象,总感觉自己心里懂,但是却不知道该怎么说,这就是似懂非懂到表现,于是乎,每次一说,就要到处去查找资料,零零碎碎到看了一些,感觉有懂了,但是过段时间,好像又不知道是 ...

  2. Apple本地认证(密码+Touch id)

    转载请注明原文链接:http://www.cnblogs.com/zhanggui/p/6839554.html 前言 本片博客主要介绍如何在自己的APP中添加指纹解锁/密码解锁技术.主要是对苹果的L ...

  3. 转:修改Tomcat控制台标题

    转自:http://blog.csdn.net/chanryma/article/details/46930729 背景:用控制台方式启动Tomcat,控制台的标题默认是"Tomcat&qu ...

  4. yaf学习之——生成yaf示例框架

    windows 下面的生成yaf示例框架 1,下载 https://github.com/laruence/yaf 2,解压以后得到yaf-master文件夹 3,cmd命令窗口cd到上面解压的文件夹 ...

  5. /usr/lib/x86_64-linux-gnu/libopencv_highgui.so.2.4.9: undefined reference toTIFFIsTiled@LIBTIFF_4.0'

    今天编译caffe ,本来编译过无数次caffe了,基本坑都能解决的.但这次惹恼我了.一直搞不定. 错误信息是这样的: /usr/lib/x86_64-linux-gnu/libopencv_high ...

  6. 终端的CTRL+S 解说

    在很多类Unix 的系统上,Ctrl-S 都有特殊的含义:它会"冻结"终端(它曾 经被用来暂停快速滚动).因为"保存"一般也是用这个快捷键,所以经常 会有人不假 ...

  7. 无阻塞加载和defer、async

    无阻塞加载 把js放在head里,浏览器是怎么去执行它的呢,是按顺序加载还是并行加载呢?在旧的浏览器下,都是按照先后顺序来加载的,这就保证了加载的js依赖不会发生问题.但是少部分新的浏览器已经开始允许 ...

  8. 《Android进阶》之第五篇 Fragment 的使用

    http://blog.csdn.net/lmj623565791/article/details/37970961 1.Fragment的产生与介绍 Android运行在各种各样的设备中,有小屏幕的 ...

  9. swfit - 实现类似今日头条顶部标签和底部内容的动态解决方案

    TYPageView TYPageView 类似今日头条 的标签导航解决方案,支持多种样式选择,基于swift3.0,支持文字颜色动态变化,底部选中线的动态变化 配图: 使用方法: let title ...

  10. 使用FileUtils简化你的文件操作

    前言: 在工作当中我们往往遇到很多文件的操作,我们也习惯写一些自己定义的工具类来简化文件操作,其实apache的commons的FileUtils类就是这样一个工具类,使用它能大大的简化我们对文件的操 ...