理論概念
什麼是zepto.js
乙個移動端框架，是jquery的輕量級替代品，api與語句與jquery相似，但檔案要小得多（壓縮最小8kb)
特點：1.用於移動端 2.輕量級 3.與jquery相似，易於學習 4.響應，執行快，5，以$作為核心函式與核心物件
與jquery相同的api
$(function () );
$('.box2').on('touchstart',function () );
$('.box3').on('touchstart',function () )
})
1.prop與attr
jquery中attr與prop的不同
prop多用於標籤的固有屬性，布林值屬性，比如selected
attr多用於自定義屬性，利用attr去獲取布林值屬性且該布林值屬性在標籤中沒有定義的時候會返回undefined
$('option').each(function (index, item) );$('option').each(function (index, item) );
$('#btn').click(function () , 2000);
});
a.在jquery操作dom的時候新增配置物件不會起作用（配置屬性選擇器之類的）
$(function () );
});
$(function () );
});
$.each(collection, function(index, item))
a.在jquery中each的使用
可以遍歷陣列 index-item的形式
可以遍歷物件 key-vaule的形式
不可以用於遍歷字串以及json字串
var arr = [1,'a',3,'b',5];
var obj = ;
//遍歷陣列，
$.each(arr, function(index,item) );
$.each(obj, function(key,value) );
//不可以遍歷字串。
var str = 'adfdfdf';
$.each(str,function(index))
})
可以遍歷陣列,以index，tiem的形式，
可以遍歷物件，以key-value的形式，
也可以遍歷字串。
var arr = [1,'a',3,'b',5];
var obj = ;
$.each(arr, function(index,item) );
$.each(obj, function(key,value) );
var str = 'abcdef';
//可以遍歷字串，同對陣列的遍歷方法一樣以index-item的形式。
$.each(str, function(index,item) );
在jquery中的使用
獲取匹配元素在當前視口的相對偏移。
返回的物件包含兩個整型屬性：top 和 left。此方法只對可見元素有效。
jquery
與jquery不同的是 ：返回乙個物件含有： top, left, width和height(獲取的寬高是盒模型可見區域的寬高)
$(function())在jquery中獲取寬高的方法
(1)width(),height()—content內容區的寬高，沒有單位px;
(2).css(『width』)----可以獲取content內容區的寬高，padding，border的值，有單位px;
(3)innerheight(),innerwidth()—outerheight(),outerwidth()來獲取
//jquery中width(),height(),.css()返回的始終是content區域的寬高
console.log($('#box').width());
console.log($('#box').height());
console.log($('#box').css('width'));
//可以通過css（）獲取padding，border的值
console.log($('#box').css('padding'));
console.log($('#box').css('border-width'));//此方法存在爭議
//也可以利用innerheight(),outerheight(),innerwidth(),outerwidth()等來獲取padding和border的值
console.log($('#box').innerheight());
console.log($('#box').outerheight()+'outerheight');
(1)zepto用width(),height()是根據盒模型決定的，並且不包含單位px
(2)包含padding的值,border的值
//zepto中沒有innerheight(),innerwidth()---outerheight(),outerwidth()
console.log($('#box').width());
console.log($('#box').height());
//用.css('width')獲取的是content的寬高。
console.log($('#box').css('width'));
//* 單獨獲取padding，border的值
console.log($('#box').css('padding'));
console.log($('#box').css('border-width')+'border');
在jquery中可以獲取隱藏元素的寬高
hello
事件委託的概念
將子元素的事件委託到父元素上，原理是冒泡機制，並最終在子元素上執行
作用：減少dom操作，新新增的子元素也可以響應事件
在jquery中的事件委託
a的事件委託
b的事件委託
#a事件委託
click me!
按鈕1按鈕2按鈕3
button
1.zepto有自己的一套事件機制，並且對不同的瀏覽器做了相容的內部封裝處理。
2.新版本的zepto用on off來處理事件，廢除了deletage bind die
$(function());
//事件委託
$('#box1').on('touchstart','p',function());
//解除繫結事件
//$('#box').off('touchstart');
//一次函式
$('#box2').one('touchstart',function());
})
1、serialize()
* 在ajax post請求中將用作提交的表單元素的值編譯成 url-encoded 字串。—key(name)/value
2、serializearray()
* 將用作提交的表單元素的值編譯成擁有name和value物件組成的陣列。
* 不能使用的表單元素，buttons，未選中的radio buttons/checkboxs 將會被跳過。
3、submit()
* 為 「submit」 事件繫結乙個處理函式，或者觸發元素上的 「submit」 事件。
* 當引數function沒有給出時，觸發當前表單「submit」事件，並且執行預設的提交表單行為，除非阻止預設行為。
vue 移動端框架
採用vant vue vuex axios webpack iconfont 構建的移動端專案模板 1.目前vuex主要用於儲存登入的token,使用者資訊，訊息列表等等 2.axios主要用於介面請求前新增統一的token,和攔截伺服器返回的狀態碼，這裡攔截401錯誤，並重新跳入登頁重新獲取tok...
Vue PC端 移動端框架彙總
在學習vue的過程之中，我發現不管是 bat 大廠，還是創業公司，vue 都有著廣泛的應用，而且框架層出不窮，學習文件也越來越多，vue也越來越受歡迎。下面是我整理的 vue pc端和移動端的ui框架，建議收藏，方便以後學習的時候拿出來檢視。vue pc端框架 1.element 中文文件 2.iv...
zepto 移動端為動態元素繫結事件的解決方案
動態新增元素繫結事件，如果是pc端為動態新增元素繫結事件的解決方案為 1 element on 事件，callback 2 element live 事件，callback 3 document on 事件，元素 callback 但是以上方法在移動端，沒有效果，沒有效果，沒有效果 接下來移動端的事...