中文官方文檔: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; } });