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"]