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   //下滑