zepto

Posted 2021-02-14 zhanghua-zh

简介

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