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

时间 2019-12-14

原文原文链接

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

对nodeJS有必定的了解以后再学习html

1、委托的事件先被依次放入数组队列里，而后由自身开始日后找直到找到最后，期间符合条件的元素委托的事件都会执行。
　　一、委托在同一个父元素,或者触发的元素的事件范围小于同类型事件(冒泡能冒到自身范围)
　　二、同一个事件
　　三、委托关联  操做的类要进行关联
　　四、绑定顺序---从当前的位置日后看
　　五、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>')

2、zepto没法获取隐藏元素的宽高node

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

3、zepto touch方法ajax

一、tap()  点击事件 利用在document上绑定touch事件来模拟tap事件的，而且tap事件会冒泡到document上
二、 singleTap()  点击事件
三、 doubleTap()  双击事件
四、 longTap()    当一个元素被按住超过750ms触发。
五、 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('滑动效果');
      });
  });

4、关于表单提交json

　　一、serialize()api

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

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

　　二、serializeArray()函数

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

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

　　三、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('不提交？')
        })

    })

5、发送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;
      }
  });