zepto的使用方法
有些不了解zepto的同学在刚接触的时候肯定有很多疑惑,这个东西怎么用啊,去哪里下载啊,什么时候该用什么时候不该用啊,其实我以前也是这样的。jquery使用多了那么就让我们一起来了解下zepto把。
在移动端用不着pc端兼容难么多的浏览器,所以就有了zepto.js,如果此时用jquery的话就有些重了,现在pc端可以使用jquery,但是反过来的话pc端如果用zepto,js的话就不怎么兼容ie浏览器了。
绑定事件和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的使用方法的更多相关文章
- jquery和zepto的扩展方法extend
jquery和zepto的扩展方法extend 总结下jQuery(3.1.1)和zepto(1.1.6)到底是如何来开放接口,使之可以进行扩展,两者都会有类型判断,本文使用简单的类型判断,暂不考虑兼 ...
- 学习zepto.js(原型方法)
学习zepto.js(原型方法)[1] 转载 新的一周,新的开始,今天来学习一下zepto里边的原型方法,就是通过$.进行调用的方法,也是可以通过$.fn进行扩展的方法: $.camelCase(): ...
- zepto的ready方法
zepto中的ready函数是作为$.fn的一个方法,即作为一个zepto对象的方法 readyRE = /complete|loaded|interactive/; ready: function( ...
- 学习zepto.js(对象方法)[6]
first: 获取当前对象集合中的第一个dom元素. $("div").first(); // 返回第一个div对象(zepto对象) //相当于$("div" ...
- 学习zepto.js(对象方法)[5]
继续说. clone: 该方法不接收任何参数,会返回对象中的所有元素集合,但不会对象绑定的事件. var $temp = $("div").clone(); //并不接收任何参数. ...
- 学习zepto.js(对象方法)[4]
今天说说那一套获取元素集合的一些方法: ["children", "clone", "closest", "contents&qu ...
- 学习zepto.js(对象方法)[3]
继续说zepto里attributes的相关操作. attr,removeAttr,prop这三个方法. attr(): 三种用途 get: 返回值为一个string字符串 $("<s ...
- 学习zepto.js(对象方法)[2]
今天来说下zepto那一套dom操作方法, prepend,append,prependTo,appendTo,before,after,insertBefore,insertAfter; 按着从内到 ...
- 学习zepto.js(对象方法)[1]
zepto也是使用的链式操作,链式操作:函数返回调用函数的对象. 但并不是所有的对象方法都可以进行链式操作,举几个例子:.size(),.html()|.text()//不传参数的情况下; 若非特殊说 ...
- 学习zepto.js(原型方法)[2]
接着昨天的来,继续说原型方法,昨天的传送阵(昨天出了点小意外,博文经过WP手机的UC浏览器进行编辑后标签就露出来了- -,现已修复); $.grep(): 作用与Array.filter类似(其实就是 ...
随机推荐
- python3 selenium 鼠标悬停操作
使用场景: 测试过程中有些元素隐藏在某些元素下面,需要鼠标悬停,才会看到 使用方法: # 定位元素hover_element = driver.find_element_by_css_selector ...
- tpcc-mysql安装
1.因为我的虚拟机是centos 7 min版本,所以先得安装gcc gcc++: http://mirror.centos.org/centos/7/os/x86_64/Packages/ rp ...
- Viewpager结合fragment实现底部导航
具体实现如下: FindFragment.java package fbtt.com.fbtt.fragment; import android.os.Bundle; import android.s ...
- 全国各省市GeoCoord SQL文件(不包括区县)
/* Navicat MySQL Data Transfer Source Server : 192.168.0.234 Source Server Version : 50543 Source Ho ...
- 关于ONION/Wncry勒索病毒
1.通告 2017年5月12日起,在国内外网络中发现爆发基于Windows网络共享协议进行攻击传播的蠕虫恶意代码,这是不法分子通过改造之前泄露的NSA黑客武器库中“永恒之蓝”攻击程序发起的网络攻击事件 ...
- sublime Text3 新建文件时定义模块
开发的过程中有很多的东西,不需要每次编写,如果每次编写这样会很蛋疼,所以sublime 提供了一个牛逼的插件SublimeTmpl, 这个插件可以定义自己新建的模块. sublimeTmpl 安装 1 ...
- c# 对加密的MP4文件进行解密
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- Norm 数据库操作竟然可以如此简单
github地址,https://github.com/xcr1234/norm/欢迎各位大神fork&交流! Norm Norm是一套微型的JAVA数据库ORM库,提供了简单高效的 API, ...
- ES6核心内容精讲--快速实践ES6(一)
前言 本文大量参考了阮一峰老师的开源教程ECMAScript6入门,适合新手入门或者对ES6常用知识点进行全面回顾,目标是以较少的篇幅涵盖ES6及部分ES7在实践中的绝大多数使用场景.更全面.更深入的 ...
- 百度前端技术学院—-小薇学院(HTML+CSS课程任务)
任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...