Query 由于強(qiáng)大的生命力基本上是一個事實標(biāo)準(zhǔn)蟆技,所以大部分工具 lib 在 DOM 操作很洋、動畫等功能上或多或少都會是 jQuery-like 的类浪。Zepto 的 API 就是完全兼容 jQuery 的呻逆,功能上 Zepto 是 jQuery 的子集请唱,定位上 jQuery 桌面為主心肪,Zepto 則從一開始就定位移動設(shè)備锭亏,所以體積方面有一定優(yōu)勢。也就是說如果你只用了 jQuery 很少且都是核心的功能硬鞍,比如選擇器等慧瘤,那么可以在不改動任何業(yè)務(wù)代碼的情況下把 lib 切換到 Zepto——其實就是把 $ 對象換掉了。
核心要點:
Zepto更輕量級
Zepto是jQuery的精簡固该,針對移動端去除了大量jQuery的兼容代碼
部分API的實現(xiàn)方式不同
詳情
針對移動端程序锅减,Zepto有一些基本的觸摸事件可以用來做觸摸屏交互(tap事件、swipe事件)伐坏,Zepto是不支持IE瀏覽器的怔匣。
DOM操作的區(qū)別:添加id時jQuery不會生效而Zepto會生效
事件觸發(fā)的區(qū)別:使用jquery時load事件的處理函數(shù)不會執(zhí)行;使用zepto時load事件的處理函數(shù)會執(zhí)行
事件委托的區(qū)別:zepto中桦沉,選擇器上所有的委托事件都依次放入到一個隊列中每瞒,而在jquery中則委托成獨立的多個事件
width() 與 height()的區(qū)別:zepto由盒模型(box-sizing)決定,用.width()返回賦值的width纯露,用.css('width')返回border等的結(jié)果剿骨;jquery會忽略盒模型,始終返回內(nèi)容區(qū)域的寬/高(不包含padding埠褪、border).
offset()的區(qū)別:zepto返回{top,left,width,height}; jquery返回{width,height}浓利。zepto無法獲取隱藏元素寬高,jquery可以
zepto中沒有為原型定義extend方法而jquery有
zepto的each方法只能遍歷數(shù)組组橄,不能遍歷JSON對象荞膘。
更多
jQuery 和 Zepto.js 表面看起來差不多,其實一些細(xì)節(jié)上差異很大玉工,同時支持 jQuery 和 Zepto.js 是一件吃力不討好的事情羽资,這應(yīng)該也是Foundation 5 放棄支持 Zepto的一個原因。(下面列舉的差異 Demo)