Zepto.js_開始

https://zeptojs.com

輕量級的 JavaScript 庫，移動端優先框架

 

針對移動端，處理了一系列如 click 點擊延遲 毫秒

響應執行快

目前 API 完善的框架中體積最小的一個（能用於項目的）

• 與 jQuery 
• 相同點： 語法與 jQUery 大部分同樣，至關於 jQuery 的子集，都是以 $ 核心函數

• 不一樣點： 
• zepto 體積更輕，針對移動端，擁有獨特的移動端事件，且以上特色 zepto 所有適用
• 引入 zepto.js 核心庫（zepto、ajax、event、form、ie）之後，還須引入相關附屬庫（如： touch.js）
• jQuery 更重，也更重要，API 完善
  • 核心    $ / jQuery
  • 兩大利器
    • jQuery 函數
      • $(function(){});
      • $("#box");
      • $('div');
      • $("<p>123456</p>");
    • jQuery 對象        
      • $.ajax();    $.get();    $.post();
      • $.isArray(obj)        // 判斷是否爲數組    
      • $.each(arr, function(index, each){});        // arr.forEach(each, index, self);        
      • $.trim("    Hello World   ");    // "Hello World"
      • $.find("div");    // 獲取頁面全部的 <div> 元素
        • var divPs = $("div").find("p");    // 獲取頁面全部父元素爲 div 元素的 p元素
        • 鏈式調用的核心是，返回值爲 目標對象
      • $.size();
      • $.length;
      • $.get();        $box.get(0);    $box[0]    轉化爲 DOM 對象
      • $.index();
• jQuery 的 attr 與 prop

prop() 經常使用於布爾值屬性的操做    checked seleted disabled enabled

attr() 經常使用於自定義屬性，獲取 布爾值屬性 時若是無則返回 undefined，prop 則不會出現這個問題

• zepto 的 attr 與 prop

在 zepto 中，用 attr() 也能夠獲取 布爾值屬性，當未定義屬性時，返回的是 false

prop 則與 jQuery 的 prop 徹底相同

• 布爾值屬性的操做仍是優先使用 prop，prop 的優先級高於 attr

• 按鈕延時可點擊（ 坑1. removeProp()    大於 zepto1.2  版本纔可用。。。因此移除任何屬性，都建議使用 removeAttr() ）

• <!-- javascript 代碼 -->
          <script type="text/javascript" src="./js/zepto/zepto.js"></script>
          <script type="text/javascript" src="./js/zepto/touch.js"></script>
          <script type="text/javascript" src="./js/index.js"></script>
          <script>
              $("#btn").on("touchstart", function(){
                  $("#btn").prop("disabled", true);
                  setTimeout(function(){
                      $("#btn").removeAttr("disabled");
                  }, 2000);
              });
          </script>

   

• DOM 操做
• 正常

$("#box").append("<p class="blue_line">Hello World</p>");

• zepto 新用法（ jQuery 不支持在增長 DOM 元素時，添加配置對象，影響 DOM 結構）

$newEle = $("<p class="blue_line">Hello World</p>", {class:"blue_line red_font", id:"new_ele"});

$("#box").append($newEle);

 

• $.each

正常

$.each(數組, function(index, eachValue, arr){});

$.each(對象, function(attr, eachValue, obj){});

不能遍歷字符串、json 對象(本質也是字符串)

var jsonObj = JSON.stringify({name:"浩克", age:"31"});

zepto 可使用 $.each() 遍歷字符串、json

$.each(字符串, function(index, eachChar, str){});

$.each(jsonObj, function(attr, eachValue, obj){});

 

• $("#box").offset();       

在 jQuery 中，獲取元素相對於視口的偏移量 {left: "200", top: "100"}，只對佔位的元素可用，不然返回(0, 0)

在 zepto 中，返回的是一個對象，返回的的是一個對象 {left: "200", top: "100", width: "50", heigth: "50"}，其中 width、height 包含 padding、border

 

• $("#box").width() 和 $("#box").height();

在 jQuery 中返回的是 content-box 的寬高

在 zepto 中返回的是 content-box + padding-box 的寬高

且 zepto 中 沒有 innerWidth() 和 innerHeight() 方法

 

• $("#box").css("border-width");
• $("#box").css("border-height");    jQuery 中返回 undefined，zepto 中返回 null

 

• display: none; 隱藏元素的 width / height

jQuery 中能夠拿到隱藏元素的 width / height

zepto 中

不能用 .width() / .height() 獲取到隱藏元素的 width / height

可是能夠用 .css("width"); / .css("height") 獲取到 width / height

 

• 事件委派----直接使用 $("ul").on("touchstart", "li", func);

使用父元素監聽子元素的事件觸發

最終觸發的是 子元素，使用 event.target 獲取觸發元素

一次綁定一勞永逸

在 jQuery 中

$("ul").live("click", "li", func);    事件委派在 jQuery-1.7 中剔除了 .live() 和 die()

$("ul").delegate("li", "click", func);        $("ul").undelegate("li", "click", func); 

$("ul").on("click", "li", func);        其中 this 指向 觸發事件的 li

在 zepto 中

剔除了 .live() 和 .delegate() 的相關方法（動物被襲擊）

 

• 坑2. 
• zepto 委託的事件依次進入隊列，在執行本元素觸發事件時，還會觸發知足必定條件的事件

1. 委託了同一個父元素    或者    觸發元素的事件範圍小於同類型元素的事件範圍

2. 同一個事件

3. 委派的事件產生了關聯

若是委託了同一父元素，則先綁定的會觸發後綁定的

若是委派範圍有包含關係，則範圍小的會觸發範圍大的事件

 

• zepto 封裝的 touch 方法

.tap    在 document 上綁定 touch 事件 實現單擊

.singleTap()    單擊事件        

.doubleTab()    雙擊事件        若是還要實現單擊事件時，必須使用 .singleTab()____使用 .tap() 的話，雙擊無效

 

.longTap()    當元素被長按超過 750ms 時觸發

.swipe()      .swipeUp()     .swipeDown()     .swipeLeft()     .swipeRight()     

當在元素上滑動 30px 以上時觸發

• 正常其狀況下，手機會將滑動識別成翻頁
• 此時須要在目標元素設置 css { touch-action: none; }   
• 此時又出現一個新問題： 滑動滾動條失效了____解決： 

 

zepto 的 <form>

var data = $().serialize();        // 序列化成字符串    返回表單項鍵值對    name=kjf&password=123&rember=true

var data = $().serializeArray();        // 序列化成字符串    返回表單項鍵值對    ["name=jf", "password=123", "rember=true"]

var data = $().serializeArray();        // 序列化成字符串    返回表單項鍵值對    ["name=jf", "password=123", "rember=true"]