zepto入門

zepto:

安裝了node.js可以通過

npm install zepto; 或者grab the latest version on GitHub安裝

否則可以通過在zepto的官網上復制粘貼。

?

它是專門為移動端定制的框架：輕量級的javascript庫

zepto與jQuery類似的api：會jQuery就會zepto

?

zepto的特點：

針對移動端：

輕量級壓縮版只有8kb

響應執行速度快

語法，大多數語法和jQuery一樣，學習難度低，上手快

目前api完善的框架中體積最小的一個

?

官網：zeptojs.com

需要將touch.js下載下來；適配移動端

與jQuery相同的api

核心：$

1.做函數使用：

function(){}

選擇器字符串

dom code

html字符串

2.做對象使用：

$.isArray();

$.ajax();

等等

?

與jQuery不同的API

attr一般用于自定義屬性

prap一般用于boolean值屬性（當沒有選中就可以沒有這個屬性，如class何selected等）

attr在屬性沒有定義的情況下會得到undefined

prap在讀取屬性的優先級要高于attr

removeProp（）移除屬性；這個屬性在1.2以上才有

?

dom操作：

jQuery在插入配置對象的時候會發生失敗；

但zepto可以

?

在vue中遇到class會寫成className進行插入；

?

var $p=$("<p>hello</p>",{id:"insert",background:"red"})使用配置對象對前面的內容進行修飾。

?

jQuery：可以遍歷數組、對象但不能遍歷字符串

zepto：中可以遍歷字符串.比如需要轉換成字符串在逐個遍歷

?

zepto:可以通過offset()獲取沒有單位的值，可以用來計算。

?

jQuery獲取寬高：

width().height()內容區的寬高，不帶單位

.css("width")

?

innerHeight(),innerWidth();包括padding

outerHeight(),outWidth()包括邊框，傳true包含margin

?

zepto：

width(),height()相當于jQuery的innerHeight,和innerWidth,并且沒有單位

沒有inner~

獲取單獨的值

.css("width")

.css("height")

.css("border-width")://border是一個復合屬性，里面包含了

.css("padding")

?

jQuery:可以獲得隱藏元素的寬高

?

display為none的話

zepto:獲取不到隱藏元素的屬性值

?

事件委托：live已經廢除了

jQuery中的事件委托使用delegate

$().delegate("事件","選擇器",function())；

也可以

$().on("事件","選擇器",function())；

?

zepto中

delegate已經要廢除了

用on就行了；

?

這里有一個坑

?

在zepto中，它是將委托事件放到一個隊列之中，當觸發第一個元素之后，它會將后面符合條件的元素全部觸發掉。

點擊第二個元素會觸發后面的元素。

?

click相對于touch事件會有300毫秒的延遲；

?

與jQuery類似的事件：

on()綁定事件

off（）關閉綁定事件

bind()綁定事件處理函數，通常用在自定義事件上。

one()綁定一次性事件

trigger()觸發用bind()的事件通常用于自定義事件。

unbind()刪除所有綁定的bind事件

bind("函數名",function())

trigger(函數名)

?

zepto獨特的touch事件

tap()，利用在document綁定touch來模擬tap事件，并且tap事件會冒泡到document上

singleTap()點擊事件

doubleTap（）雙擊事件

longTap()當一個元素被按住超過750毫秒,這個事件可以修改

?

swipe（可以通過css的touch-action：none禁止默認的滑動）（滑動超過30px算滑動事件）

對滑動的方向進行滑動

swipeLeft

swipeRight

swipeTop

swipeDown

?

zeptoform表單：get沒必要；它在地址欄就顯示了。

serialize()在Ajax請求中post請求用來將提交的表單元素轉化成URL-encoded字符串key(name)/value

不能使用的表單元素和未選中的選項將會被跳過

serializeArray()將表單元素編譯成name/value對象的數組

不能使用的表單元素和未選中的選項將會被跳過

submit()為submit綁定一個單處理函數，默認情況是提交表單；除非阻止默認行為；

?

?

id的尋找的速度比class塊：原因是找到id之后不會向下尋找；

?

在開發的時候需要對類進行劃分，最好不要使用重復的名字（在命名中可以使用-等命名，需要具體，如果多人開發可以通過在前面添加自己最鮮明的符號）