Zepto和Jquery的區別,以及在做移動端開發時,我們為什麼選擇使用zepto
【今晚實在不想寫別的,所以決定把近兩天的收穫整理整理,那我們就簡單的來談談Zepto.js和Jquery的區別,以及在做移動端開發時,我們為什麼選擇使用zepto.js】
一、先來看看我們熟悉的jQuery的定義:
jQuery它是一個JavaScript函式庫,執行快,效率高,其中最鮮明的特點是寫得少,做得多;還為我們提供了豐富的外掛。
jQuery庫包含以下功能:HTML 元素選取;HTML 元素操作;CSS 操作;HTML 事件函式;JavaScript 特效和動畫;HTML DOM 遍歷和修改;AJAX;Utilities
為什麼使用 jQuery ?
目前網路上有大量開源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架,而且提供了大量的擴充套件。
很多大公司都在使用 jQuery, 例如:
- Microsoft
- IBM
- Netflix
jQuery是否適用於所有瀏覽器? jQuery 團體知道JS在不同瀏覽器中存在著大量的相容性問題,目前jQuery兼容於所有主流瀏覽器, 包括Internet Explorer jQuery 版本 2 以上不支援 IE6,7,8 瀏覽器。 如果需要支援 IE6/7/8,那麼請選擇1.x版本 |
二、現在再來看看zepto的定義:
Zepto是一個輕量級的針對現代高階瀏覽器的JavaScript庫, 它與jquery有著類似的api。
如果你會用jquery,那麼你也會用zepto。
Zepto的設計目的是提供 jQuery 的類似的API,但並不是100%覆蓋 jQuery 。Zepto設計的目的是有一個5-10k的通用庫、下載並快速執行、有一個熟悉通用的API,所以你能把你主要的精力放到應用開發上。
Zepto 是一款開源軟體,
三、zepto和jquery的異同點
1、Zepto特點:Zepto是為現代智慧手機瀏覽器推出的Javascript 框架, 有著和jQuery相似的語法, 但是和jQuery相比下來, 他有很多的優點, 在大小方面 , 壓縮後的 zepto.min.js 大小隻有21K, 使用伺服器端 gzip 壓縮後大小隻有5~10K, 可以說非常的小, 功能很齊全, 並且多出來了一些觸控式螢幕的事件,它對PC的瀏覽器就不是那麼理想,尤其是在IE上直接過濾不相容, 所以這個輕量級的js用它來開發手機端和iOS,Android網頁都是是不錯的選擇,極大的減輕了整個app的負載量。
2、jquery特點:jquery主要是用於PC端的頁面開發中,jquery是目前最流行的javascript框架,以其相容全部主流瀏覽器,外掛豐富,程式碼簡潔,最關鍵的是更新快,其中最好的dom選擇器被廣泛的使用。而手機wap方面的話,jquery也推出jquery-mobile,也很好用。
3、相同點:Zepto最初是為移動端開發的庫,是jQuery的輕量級替代品,因為它的API和jQuery相似,而檔案更小。Zepto最大的優勢是它的檔案大小,只有8k多,是目前功能完備的庫中最小的一個,儘管不大,Zepto所提供的工具足以滿足開發程式的需要。大多數在jQuery中·常用的API和方法Zepto都有,Zepto中還有一些jQuery中沒有的。另外,因為Zepto的API大部分都能和jQuery相容,所以用起來極其容易,如果熟悉jQuery,就能很容易掌握Zepto。你可用同樣的方式重用jQuery中的很多方法,也可以方面地把方法串在一起得到更簡潔的程式碼,甚至不用看它的文件。
4、不同點:1,針對移動端程式,Zepto有一些基本的觸控事件可以用來做觸控式螢幕互動(tap事件、swipe事件),Zepto是不支援IE瀏覽器的,這不是Zepto的開發者Thomas Fucks在跨瀏覽器問題上犯了迷糊,而是經過了認真考慮後為了降低檔案尺寸而做出的決定,就像jQuery的團隊在2.0版中不再支援舊版的IE(6 7 8)一樣。因為Zepto使用jQuery句法,所以它在文件中建議把jQuery作為IE上的後備庫。那樣程式仍能在IE中,而其他瀏覽器則能享受到Zepto在檔案大小上的優勢,然而它們兩個的API不是完全相容的,所以使用這種方法時一定要小心,並要做充分的測試。2、Dom操作的區別:新增id時jQuery不會生效而Zepto會生效
(function($) { 2 $(function() { 3 var $insert = $('<p>jQuery 插入</p>', { 4 id: 'insert-by-jquery' 5 }); 6 $insert.appendTo($('body')); 7 }); 8 })(window.jQuery); 9 // <p>jQuery 插入<p> 10 11 Zepto(function($) { 12 var $insert = $('<p>Zepto 插入</p>', { 13 id: 'insert-by-zepto' 14 }); 15 $insert.appendTo($('body')); 16 }); 17 // <p id="insert-by-zepto">Zepto 插入</p>
3,事件觸發的區別:使用 jQuery 時 load 事件的處理函式不會執行;使用 Zepto 時 load 事件的處理函式會執行
(function($) { 2 $(function() { 3 $script = $('<script />', { 4 src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js', 5 id: 'ui-jquery' 6 }); 7 8 $script.appendTo($('body')); 9 10 $script.on('load', function() { 11 console.log('jQ script loaded'); 12 }); 13 }); 14 })(window.jQuery); 15 16 Zepto(function($) { 17 $script = $('<script />', { 18 src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js', 19 id: 'ui-zepto' 20 }); 21 22 $script.appendTo($('body')); 23 24 $script.on('load', function() { 25 console.log('zepto script loaded'); 26 }); 27 });
4,事件委託的區別:
1 var $doc = $(document); 2 $doc.on('click', '.a', function () { 3 alert('a事件'); 4 $(this).removeClass('a').addClass('b'); 5 }); 6 $doc.on('click', '.b', function () { 7 alert('b事件'); 8 });
在Zepto中,當a被點選後,依次彈出了內容為”a事件“和”b事件“,說明雖然事件委託在.a上可是卻也觸發了.b上的委託。但是在 jQuery 中只會觸發.a上面的委託彈出”a事件“。Zepto中,document上所有的click委託事件都依次放入到一個佇列中,點選的時候先看當前元素是不是.a,符合則執行,然後檢視是不是.b,符合則執行。而在jQuery中,document上委託了2個click事件,點選後通過選擇符進行匹配,執行相應元素的委託事件。
5,width()和height()的區別:Zepto由盒模型(box-sizing)決定,用.width()返回賦值的width,用.css('width')返回加border等的結果;jQuery會忽略盒模型,始終返回內容區域的寬/高(不包含padding、border)。
6,offset()的區別:Zepto返回{top,left,width,height};jQuery返回{width,height}。
7,Zepto無法獲取隱藏元素寬高,jQuery 可以。
8,Zepto中沒有為原型定義extend方法而jQuery有。
9,Zepto 的each 方法只能遍歷 陣列,不能遍歷JSON物件。
10,Zepto在操作dom的selected和checked屬性時儘量使用prop方法,在讀取屬性值的情況下優先於attr。Zepto獲取select元素的選中option不能用類似jQuery的方法$('option[selected]'),因為selected屬性不是css的標準屬性。應該使用$('option').not(function(){ return !this.selected })。
10,Zepto不支援的選擇器:
簡單的理解就是:需要注意的是:
Zepto專用於手機端
jQuery專用於pc端 (但jq又開發出了jquery-mobile,專門用於手機)
需要注意的是Zepto的一些可選功能是專門針對移動端瀏覽器的;因為它的最初目標在移動端提供一個精簡的類似jquery的js庫。
在瀏覽器上(Safari、Chrome和Firefox)上開發頁面應用或者構建基於html的web-view本地應用,你如PhoneGap,使用Zepto是一個不錯的選擇。
總之,Zepto希望在所有的現代瀏覽器中作為一種基礎環境來使用。Zepto不支援舊版本的Internet Explorer瀏覽器(<10)。
jQuery是否適用於所有瀏覽器? jQuery 團體知道JS在不同瀏覽器中存在著大量的相容性問題,目前jQuery兼容於所有主流瀏覽器, 包括Internet Explorer 6! |
相關推薦
Zepto和Jquery的區別,以及在做移動端開發時,我們為什麼選擇使用zepto
【今晚實在不想寫別的,所以決定把近兩天的收穫整理整理,那我們就簡單的來談談Zepto.js和Jquery的區別,以及在做移動端開發時,我們為什麼選擇使用zepto.js】 一、先來看看我們熟悉的jQuery的定義: jQuery它是一個JavaScript函式庫,執行快
移動端開發時,讓字型小於12px的方法
今天我們來說下在移動端開發時如何讓字型小於12px。 之前寫過一篇部落格,介紹如何讓chrome的字型小於12px,戳這裡檢視。在改變chrome字型的時候,在各路大神那裡看到過這個方法: html{
Zepto和Jquery區別
-- error exce cal lba 滑動 set 忽略 瀏覽器 ---恢復內容開始--- 《zepto移動端事件》 1、$("#xx").tap(function(){ //tap在屏幕點擊時觸發 alert("sssss"); }) 2、$("d
關於移動端開發時iOS上滑屏卡頓的問題,以及電話類數字的樣式失控問題
img 頁面 通話 tips rem span cti 解法 並不是 寫在前面的話: tips:寫移動的時候,那些頭部需要固定顯示在顯示屏頂部的,通常在PC端我會用fixed來寫。但是,在移動端,這並不是一個好方法,因為彈出輸入小鍵盤的時候,會造成fixed 的元素偏移
乾貨分享:vue2.0做移動端開發用到的相關外掛和經驗總結(2)
最近一直在做移動端微信公眾號專案的開發,也是我首次用vue來開發移動端專案,前期積累的移動端開發經驗較少。經過這個專案的鍛鍊,加深了對vue相關知識點的理解和運用,同時,在專案中所涉及到的微信api(微信分享,微信支付),百度地圖api(如何例項化地圖,給地圖新增自定義覆蓋物,給地圖新增自定義標註,對地圖進行
乾貨分享:vue2.0做移動端開發用到的相關外掛和經驗總結
最近一直在做移動端微信公眾號專案的開發,也是我首次用vue來開發移動端專案,前期積累的移動端開發經驗較少。經過這個專案的鍛鍊,加深了對vue相關知識點的理解和運用,同時,在專案中所涉及到的微信api(微信分享,微信支付),百度地圖api(如何例項化地圖,給地圖新增自
vue做移動端適配,藉助px2rem 外掛方便的將px單位轉為了rem
1、安裝 npm install px2rem-loader lib-flexible –save 2、在專案入口檔案main.js中引入lib-flexible import ‘lib-flexible/flexible.js’
vue2.0做移動端開發用到的相關外掛和經驗總結(2)
最近一直在做移動端微信公眾號專案的開發,也是我首次用vue來開發移動端專案,前期積累的移動端開發經驗較少。經過這個專案的鍛鍊,加深了對vue相關知識點的理解和運用,同時,在專案中所涉及到的微信api(微信分享,微信支付),百度地圖api(如何例項化地圖,給地圖新增自定義覆蓋物
WEB移動端開發中,區域網內手機瀏覽器訪問電腦頁面,實時檢視程式碼除錯結果
痛點:在進行移動端頁面開發時,經常需要用手機檢視開發的頁面效果。雖然瀏覽器自帶模擬器,但是各個手機相容問題除錯以及操作效果除錯還是需要上真機。 解決途徑: 1、將程式碼扔到伺服器,通過連線伺服器訪問頁面除錯 2、採用內網穿透,將自己的電腦當成伺服器主機,手機訪問電腦伺服器。之前我用過NA
在移動端開發中,容易遇到的問題集合。
1、禁止IOS,Android長按下載圖片 .css { -webkit-touch-callout : none; } 2、禁止IOS,Android使用者選中文字 .cs
正在做移動端開發的同志們注意了!!!
正在開發app的同志們注意了說到APP開發,大家會想到以IOS、Android的純原生開發;而在這個app橫飛的年代,對於整個產品研發團隊或個人來講,高速的迭代,爆炸式的功能追加已經成為網際網路行業的時代標籤,常常以小時甚至分鐘為單位的進度度量成為了常態。早在2010年的時候,喬布斯就預言HT
zepto和jquery的區別,zepto的不同使用7條小結
zepto和jquery的區別1. Zepto 對象 不能自定義事件 例如執行: $({}).bind(‘cust‘, function(){}); 結果: TypeError: Object has no method ‘addEventListener‘ 解決辦法是創建一個脫離文檔流的節點作為事件對
Zepto和jQuery之間區別以及特點分析
首先介紹一下Zepto: 它是一個輕量化的,API類似jQuery的javascript類庫。 它是一個面向移動端的類庫,雖然能在桌面客戶端執行,不過僅支援高階遊覽器(IE10+)。 它支援移動端“touch”有關的一些事件。
zepto和jquery的區別
htm eth lan cal css 隱藏元素 loaded method lis 1. Zepto 對象 不能自定義事件 例如執行: $({}).bind(‘cust‘, function(){}); 結果: TypeError: Object has no met
移動端開發框架哪個好?jQuery/Vue/AngularJS有哪些區別和優缺點?
JS框架,我認為大體上可以分為兩種。一種是類似jQuery/ d3那樣的,通過修改html的DOM結構來渲染UI的庫。還有一種則是類似於AngularJS/ReactJS 那樣的,採用MVC分層的,通過Model來渲染View UI框架。效能比較jQuery基本都是瀏覽器原生
簡單的動態規劃,數字三角形,以及做題思路。
數值 space 鏈接 分析 ios style iostream 循環 turn 鏈接 一句話題目:給出一個n層的三角形,每個位置有一個數字,到達後可獲得,求到達最低層能達到的最大數字和。 題目分析: 首先我們考慮能不能用搜索做,因為對於一個坐標,我們只有向下
input只輸入數字和js校驗是否輸入框只有數字以及游標放輸入框時,輸入框裡內容消失
input只輸入數字和js校驗是否輸入框只有數字以及游標放輸入框時,輸入框裡內容消失 input框只能輸入數字: 1 onkeyup="value=value.replace(/[^\d]/g,'')" js校驗是否是純數字 1 if(isNaN(bankAccountNo)){ 2
使用vue實現簡單鍵盤,支持移動端和pc端
gif dem 光標 amp ase onf agen slice borde 常看到各種app應用中使用自定義的鍵盤,本例子中使用vue2實現個簡單的鍵盤,支持在移動端和PC端使用,歡迎點贊 實現效果: Keyboard.vue <template&am
&和&&的區別? 以及 ==和equals方法究竟有什麼區別?
1.&和&&的區別 相同點:&和&&都可以用作邏輯與的運算子,表示邏輯與(and)。 不同點: (1)&&具有短路的功能,而&不具備短路功能。 (2)當&運算子兩邊的表示式的結果都為tru
TCP和UDP區別小結以及步驟
TCP與UDP區別總結: 1、TCP面向連線(如打電話要先撥號建立連線);UDP是無連線的,即傳送資料之前不需要建立連線 2、TCP提供可靠的服務。也就是說,通過TCP連線傳送的資料,無差錯,不丟失,不重複,且按序到達;UDP盡最大努力交付,即不保證可靠交付 3、TC