zepto

簡介

• zepto是輕量級的JavaScript庫，專門爲移動端定製的框架
• 它與jquery有着相似的API，俗稱：會jquery就會用zepto
• zepto官網
• zepto github地址

特色

• 針對移動端
• 輕量級，壓縮版本只有8kb左右
• 響應，執行快
• 語法，API大部分同jquery同樣，學習難度低，上手快，與jquery同樣以$做爲核心函數和核心對象
• 目前API完善的框架中體積最小的一個

Zepto與jQuery的區別

attr和prop

• jQuery
  • prop
    • 多用在標籤的固有屬性，布爾值屬性。好比：a標籤的href，class，selected等。
  • attr
    • 多用在自定義屬性上。
    • 在jquery中若是用attr去獲取布爾值屬性且該布爾值屬性在標籤體內沒有定義的時候，會返回undefined
• zepto
  • 與jQuery不一樣，zepto中用attr也能夠獲取布爾值屬性
  • zepto中removeProp()的方法。在1.2及以上才支持。
  • 可是，prop在讀取屬性的時候優先級高於attr，布爾值屬性的讀取仍是建議用prop

    • <!--html-->
      <select>
          <option value="name">科比</option>
          <option value="name">韋德</option>
          <option value="name" selected="selected">鄧肯</option>
          <option value="name">吉諾比利</option>
          <option value="name" selected="selected">艾弗森</option>
      </select>
      
      <!--javascript-->
      <script>
      $('option').each(function (index, item) {
                console.log($(this).attr('selected')); // false false selected false selected
                console.log($(this).prop('selected')); // false false false false true
      });
      </script>

DOM操做

• zepto在經過 $() 建立元素時，能夠額外傳入一個對象
• 這個對象是該元素的配置對象，而且添加的配置對象的內容會直接反應在標籤屬性內，並影響對應的DOM元素
• 案例：

  var $insert = $('<p>我是新添加的p標籤</p>', {
        id:'insert',
        class:'insert',
        style: 'color:red'
  });

  最終效果：

each方法

• jQuery中的each方法能夠遍歷數組和對象，不能夠遍歷字符串
• zepto中的each方法不只能夠遍歷數組和對象，還能夠遍歷字符串

offset方法

• jQuery
  • 獲取匹配元素在當前視口的相對偏移。
  • 返回的對象包含兩個整型屬性：top 和 left。此方法只對可見元素有效。
• zepto
  • 得到當前元素相對於視口的位置。
  • 返回一個對象，包含四個屬性值： top, left, width, height；獲取的寬高是盒模型可見區域的寬高

 

width()和height()

• jQuery
  • width(),height()：獲取content內容區的寬高，沒有單位px;
  • css()：能夠分別獲取content內容區的寬高，padding，border的值，有單位px;
  • innerHeight(),innerWidth()
  • outerHeight(),outerWidth()
• zepto
  • 用width(),height()是根據盒模型決定的，而且不包含單位PX
  • zepto中沒有innerHeight(),innerWidth()和outerHeight(),outerWidth()‘’
• 須要注意的是，jQuery使用width()和height()方法能夠獲取隱藏元素的寬高，而zepto則不行

事件委託

• jQuery
  • on
  • delegate
  • live
• zepto
  • zepto的官網表示已經廢除了live，delegate
  • 委託的事件先被依次放入數組隊列裏，而後由自身開始日後找直到找到最後，期間符合條件的元素委託的事件都會執行。

touch Event

與jQuery相似的事件

• on() 綁定事件處理程序
• off() 方法移除用目標on綁定的事件處理程序。
• bind() 爲每一個匹配元素的特定事件綁定事件處理函數，可同時綁定多個事件，也能夠自定義事件
• one() 爲每個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數。只執行一次。
• trigger() 觸發有bind定義的事件（一般是自定義事件）
• unbind() bind的反向操做，刪除匹配元素所綁定的bind事件。
• zepto有本身的一套事件機制，而且對不一樣的瀏覽器作了兼容的內部封裝處理。
• 新版本的zepto中已經捨棄了bind，delegate，die。注：jquery中捨棄了live，die等。
• 故咱們統一使用on，off標準事件來綁定事件。

zepto touch

• tap()：tap點擊事件，利用在document上綁定touch事件來模擬tap事件的，而且tap事件會冒泡到document上
• singleTap() ：單擊事件
• doubleTap()：雙擊事件
• longTap()：當一個元素被按住超過750ms觸發。
• swipe()：在同一個方向連續滑動超過30px即爲滑動。不然算點擊。
• swipeLeft()
• swipeRight()
• swipeUp()
• swipeDown()
• 新版本的zepto中已經捨棄了bind，delegate，die。注：jquery中捨棄了live，die等。

表單

• serialize()
  • 將用做提交的表單元素的值編譯成 URL-encoded 字符串。---key(name)/value
• serializeArray()
  • 將用做提交的表單元素的值編譯成擁有name和value對象組成的數組。
  • 不能使用的表單元素，buttons，未選中的radio buttons/checkboxs 將會被跳過。
• submit()
  • 爲 "submit" 事件綁定一個處理函數，或者觸發元素上的 "submit" 事件。
  • 參數function沒有給出時，觸發當前表單「submit」事件，而且執行默認的提交表單行爲，除非阻止默認行爲。

AJAX

• 案例

  $.ajax({
            method: 'GET',
            url: 'http://localhost:3000/',
            dataType: 'json',
            success: function (data) {
              console.log(data);
            },
            error: function (err) {
              console.log(err);
            }
  })