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);
            }
  })