zepto框架介绍(了解)和jquery类似

zepto框架介绍(了解)

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

github地址

中文文档

zepto与jquery的区别

  • jquery针对pc端,主要用于解决浏览器兼容性问题,zepto主要针对移动端。

  • zepto比jquery轻量,文件体积更小

  • zepto封装了一些移动端的手势事件

zepto的基本使用

zepto的使用与jquery基本一致,zepto是分模块的,需要某个功能,就需要引入某个zepto的文件。

<script src="zepto/zepto.js"></script>
<script src="zepto/event.js"></script>
<script src="zepto/fx.js"></script>
<script>
​
  $(function () {
    $(".box").addClass("demo");
​
    $("button").on("click", function () {
      $(".box").animate({width:500}, 1000);
    });
  });
​
​
</script>

zepto的定制

安装Nodejs环境

1、下载zepto.js

2、解压缩

3、cmd命令行进入解压缩后的目录

4、执行npm install命令

5、编辑make文件的41行,添加自定义模块并保存,

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

8、查看目录dist即构建好的zepto.js

zepto手势事件

zepto中根据touchstart touchmove touchend封装了一些常用的手势事件

tap   // 轻触事件,用于替代移动端的click事件,因为click事件在老版本中会有300ms的延迟
	//穿透的问题    fastclick:
swipe //手指滑动时触发
swipeLeft  //左滑
swipeRight  //右滑
swipeUp    //上滑
swipeDown   //下滑
发布了64 篇原创文章 · 获赞 19 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_44114310/article/details/89526194