Zepto-API知识梳理

作者: 东邪_黄药师 | 来源:发表于2019-05-31 22:45 被阅读0次

Zepto

特点：
1、体积8kb
2、针对移动端的框架
3、语法同jquery大部分一样，都是$为核心函数
4、目前功能完善的框架体积最小的左右

同jquery相似的语法

核心： $ --作为函数使用参数： 1、function(){} 2、选择器字符串 3、html标签字符串 3、DOM code --作为对象使用方法； 1、$ .each()
2、 $.trim() 3、$ .ajax() $.get()$ .post()
4、 $.isArray() jquery对象/zepto对象概念：$ 调用返回的就是 jquery对象/zepto对象伪数组(有时候只有一个元素)

zepto同jquery不同的API

attr和prop

attr与prop的区别:
1、prop多用在标签的固有属性，布尔值属性。比如：a标签的href，class，selected，checked等。

2、attr多用在自定义属性上。
3、jquery中用attr获取布尔值属性且布尔值属性在标签体内没有定义的时候会得到 undefined；

在zepto中用attr也可以获取布尔值属性;
prop在读取属性的时候优先级高于attr，布尔值属性的读取还是建议用prop;
坑！------zepto中 removeProp()的方法。在1.2+版本才支持。
demo:

$(function(){
  $('option').each(function(index,item){
    //console.log(index,item)
    //console.log($(this).attr('selected'))
    console.log($(this).prop('selected'))
  })
})

DOM操作

jquery中插入DOM元素的时候添加配置对象(比如：id，class等。。。)不起作用。
Zepto 插入DOM元素的时候添加配置对象（id，class等。。）的时候可以添加进去，并且会直接显示在标签属性内，可以操作，影响DOM元素。

$(function(){
  var $p = $('<p> 这是新添加的p标签啊</p>',{
    id:'insert',
    class:'insert'
  })
  $('#box').append($p)
})

each方法:

jq:
$.each(collection, function(index, item){ ... }) 可以遍历数组,以index，item的形式，可以遍历对象，以key-value的形式不可以遍历字符串。 z:$ .each(collection, function(index, item){ ... })
可以遍历数组,以index，item的形式，
可以遍历对象，以key-value的形式
可以遍历字符串。
遍历json对象以字符串的形式遍历。

offset()的区别

jq:

offset();
1、获取匹配元素在当前视口的相对偏移。
2、返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。

Z:

offset()
1、获得当前元素相对于视口的位置。
2、返回一个对象含有： top, left, width和height(获取到的width，height都是包含padding和border的值)

width(),height()区别:

jq:

jquery获取宽高的方法
1、width(),height()---content内容区的宽高，没有单位px
2、.css('width')----可以获取content内容区的宽高、padding、border的值，有单位px;
3、innerHeight(),innerWidth()---outerHeight(),outerWidth()来获取

Z:

zepto中的width(),height()是根据盒模型来取值的，包含补白和border的值。且不带单位。
zepto中没有innerHeight(),innerWidth()---outerHeight(),outerWidth()
.css获取的width，height是内容区的宽高，包含单位。
通过.css()获取padding，border的值

隐藏元素宽高:

jquery可以获取隐藏元素的宽高。
zepto无法获取隐藏元素宽高

事件委托:

原理：利用冒泡的原理将事件绑定到父元素/祖先元素身上，event.target指向的子元素
zepto：
1、委托同一个父元素身上
2、同一个世界
3、操作关联，操作对应的元素/类
4、顺序
5、谁操作的关联类就是谁触发的

在zepto中事件委托
委托的事件先被依次放入数组队列里，然后由自身开始往后找直到找到最后，期间符合条件的元素委托的事件都会执行。
1、委托在同一个父元素,或者触发的元素的事件范围小于同类型事件(冒泡能冒到自身范围)
2、同一个事件
3、委托关联操作的类要进行关联
4、绑定顺序---从当前的位置往后看

touch Event:

1、同jquery类似事件:
on() 绑定事件处理程序
off() 方法移除用目标元素on绑定的事件处理程序。
bind() 为每个匹配元素的特定事件绑定事件处理函数，可同时绑定多个事件，也可以自定义事件。
one() 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。只执行一次。
trigger() 触发有bind定义的事件（通常是自定义事件）
unbind() bind的反向操作，删除匹配元素所绑定的bind事件。

$(function(){
        $('#btn1').on('touchstart',function(){
            alert('我是btn1');
        });
//      $('#btn1').off('click');
        //bind
        $('.btn2').bind('touchstart touchmove',function(){
            $(this).toggleClass("btnSty")
        });
        //one
        $('#btn3').one('click',function(){
            alert('我是btn3')
        });
        //trigger  自动执行
        $('#btn1').bind('myTouch',function(event,a,b){
            alert('我是由trigger触发的btn');
            console.log(a + ' ' + b);
        });
        $('#btn1').trigger('myTouch',['hello','world']);

        //unbind
        $('#btn2').unbind('touchmove');
        
    })

2、zepto的touch event:
- tap点击事件
  - singleTap()点击事件
  - doubleTap()双击事件
  - longTap()长按事件--连续作用750ms
  - 滑动事件(浏览器的默认行为---翻页---touch-action)
    1、swipe滑动事件在同一个方向连续滑动30px才为滑动，否则就是点击
    2、longTap长按事件手指在目标对象上连续作用超过750ms算长按，否则算点击

<script type="text/javascript">
    $(function () {
      //tap()点击事件---真机测没问题

//      $('#box').tap(function () {
//          alert('tap事件');
//      });
      $('#box').on('tap',function () {
          alert('tap事件');
      });
      //singleTap()单击事件
      $('#box2').singleTap(function () {
          alert('我单击了一下');
      });

      //doubleTap()  双击事件
      $('#box2').doubleTap(function () {
          alert('我双击了一下');
      });

      //longTap()长按事件----按住屏幕时间超过750ms触发
      $('#box3').longTap(function () {
          alert('我长按了一下box3');
      });

      //swipe()滑动事件---在同一个方向连续滑动超过30px

//      $('#btn').swipe(function () {
//          alert('我滑动了超过30px');
//      });
      $('#btn').swipeLeft(function () {
          alert('我向左滑动了');
      });
    });
  </script>

事件处理机制:

zepto有自己的一套事件机制，并且对不同的浏览器做了兼容的内部封装处理。

1、像新版本的zepto中已经舍弃了bind，delegate，die，同样jquery中舍弃了live，die等。
2、现在统一使用on，off标准事件来绑定事件。

 $(function(){
    //简单绑定
    $('#box').on('touchstart',function(){
      alert('ddd');
    });
    //事件委托
    $('#box1').on('touchstart','p',function(){
      alert($(this).text());
    });
    //解除绑定事件
    //$('#box').off('touchstart');

    //一次函数
    $('#box2').one('touchstart',function(){
      alert('我就执行一次');
    });

  })

z中的form：

1、serialize()
* 在Ajax post请求中将用作提交的表单元素的值编译成 URL-encoded 字符串。---key(name)/value
2、serializeArray()
* 将用作提交的表单元素的值编译成拥有name和value对象组成的数组。
* 不能使用的表单元素，buttons，未选中的radio buttons/checkboxs 将会被跳过。
3、submit()
* 为 "submit" 事件绑定一个处理函数，或者触发元素上的 "submit" 事件。
* 当参数function没有给出时，触发当前表单“submit”事件，并且执行默认的提交表单行为，除非阻止默认行为。

 $(function(){
    //serialize()
    var list = $('form').serialize();
    console.log(list);
    //serializeArray()
    var listArr = $('form').serializeArray();
    console.log(listArr);
    //submit()
    $('form').submit(function(e){
        e.preventDefault();
        var data = $(this).serialize();
        console.log(data);
    })
  })

Ajax:

如何废除一个ajax请求 ----abort()方法

需求：点击获取验证码的按钮，用户十秒时候可以再次获取，当十秒过后第一次请求没有返回，用户再次点击获取
然后因为网速好或者其他原因，两次请求同时返回，该怎么解决
disabled属性设置表单项或者按钮不可再点击或者操作；但是只是针对click事件，而并没有针对touch事件作出处理。

 <script type="text/javascript">
    $(function () {
      var xmlHttp = null;//初始化xmlHttp对象
      var isSend = false;//初始化判断按钮是否可以点击
      $('#btn').on('touchstart', function () {
        if(isSend === true){//如果不能点击，直接返回
            return;
        }
        $(this).css('background', 'gray');
        isSend = true;//修改为不能点击
        if(xmlHttp === null){//如果用户首次点击，发送请求
            xmlHttp = sendXmlHttp();
        }else{
            xmlHttp.abort();//再次点击的时候取消上一次请求
            xmlHttp = sendXmlHttp();//再次发送最新的请求
        }
        setTimeout(function () {
            $('#btn').css('background', 'red');
            isSend = false;//2s以后用户可以再次点击
        }, 2000);

      });
      //发送ajax请求的函数;
      function sendXmlHttp() {
        var xmlHttp = null;
        xmlHttp = $.ajax({
          type : 'GET',
          url : 'http://localhost:3000/',
          dataType : 'json',
          success : function (msg) {
            console.log(msg);
          },
          error : function (error) {
            console.log(error);
          }
        });
        return xmlHttp;
      }
    });
  </script>