移動端JS開發庫zepto.js基礎知識點

中文官方文檔: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;
      }
  });
相關文章
相關標籤/搜索