移动端JS开发库zepto.js基础知识点

中文官方文档：https://www.html.cn/doc/zeptojs_api/

对nodeJS有一定的了解之后再学习

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

 $('#box').on('touchstart', '.a', function () {
    alert('aaaaaa');
    $(this).removeClass().addClass('b');
});

  $('#box').on('touchstart', '.b', function () {
      alert('bbbb');
      $(this).removeClass().addClass('a');
  });

  $('#box').append('<p class="a">我是新添加的</p>')

 二、zepto无法获取隐藏元素的宽高

 $(function () {
        console.log($('#box').width());
        console.log($('#box').height());   //结果是0
    });

 三、zepto touch方法

1、tap()  点击事件 利用在document上绑定touch事件来模拟tap事件的，并且tap事件会冒泡到document上
2、 singleTap()  点击事件
3、 doubleTap()  双击事件
4、 longTap()    当一个元素被按住超过750ms触发。
5、 swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 当元素被划过（同一个方向大于30px）时触发。(可选择给定的方向)
在一个方向滑动大于30px即为滑动。否则算点击。

 $(function () {
      /*$("#box1").on('tap', function () {
          alert("taptap");
      });*/

      $('#box1').tap(function () {
          alert('taptap');
      });

      // singRap()   单击事件
      $('#box2').singleTap(function () {
          alert('单击事件');
      });

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

      // longTap()    当一个元素被按住超过750ms触发。
      $('#box3').longTap(function () {
          alert('长按产生效果');
      });

      //滑动事件swipe
      $('#btn').swipeLeft(function () {
          alert('滑动效果');
      });
  });

 四、关于表单提交

　　1、serialize()

　　在Ajax post 请求中将用作提交的表单元素的值编译成 URL-encoded 字符串。---key(name)/value

　　不能使用的表单元素，buttons，未选中的radio buttons/checkboxs 将被跳过。

　　2、serializeArray()

　　将用作提交的表单元素的值编译成拥有name和value对象组成的数组

　　不能使用的表单元素，buttons，未选中的radio buttons/checkboxs 将被跳过。

　　3、submit()

　　为 “submit” 事件绑定一个处理函数，或者触发元素上的 “submit” 事件

　　当参数function没有给出时，触发当前表单 “submit” 事件，并且执行默认的提交表单行为，除非阻止默认行为。

$(function () {
        var result = $('form').serialize();
        console.log(result);
        var result2 = $('form').serializeArray();
        console.log(result2);

        $('form').submit(function (event) {
            event.preventDefault();
            console.log('不提交？')
        })

    })

 五、发送ajax请求

　　

  $(function () {
      //标识用户是否可以点击
      var isSend = false;  //可以点击
      var xmlHttp = null;
      $('#btn').on('touchstart', function () {
          //判断用户是否可以点击
          if (isSend) {   //用户点击失效
              return;
          }
          isSend = true;
          $(this).css('background', 'gray');
          setTimeout(function () {
            $('#btn').css('background', 'red');
            isSend = false;
          }, 2000);

          //判断用户是否发送过请求
          if (!xmlHttp) {  //标识用户没有发送过请求
              xmlHttp = sendXml();
          } else {   //用户发送过请求
              xmlHttp.abort();   //取消上一次发送的请求
              console.log('abort');
              xmlHttp = sendXml();
              
          }
      });

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