談談jquery的實現

2021-07-31 04:56:42 字數 1866 閱讀 3360

最近寫了些移動端的專案，在pc端操作dom，jquery必不可少。但是在移動端引入jquery就顯得不合適，一是檔案太大，二是不支援一些觸控。zepto.js是移動端的jquery，體積很小，支援觸控。在用這些庫的時候，經常會想該如何實現這樣的寫法呢？看了很多jquery原始碼的分析，又看了很多例項，終於算是明白了。

原生js查詢dom元素一般會用到這些

var dom = document.getelementbyid('#dom')


dom.style.color="";//設定css


//移動端完全可以拋棄jquery，queryselectorall是乙個很強大的選擇器


var d=document.queryselectorall('.dom')
我們仔細的想一下，jquery的這種寫法，(s

elec

tor)

,到底是

什麼？由

原生的j

s操作d

om我們

肯定會想

到，(selector)返回的物件中一定是有dom元素？那麼如何實現？我們現在看下jquery的原始碼。

var jquery = function


(selector, context)
我們再往下看**：

jquery.prototype.init.prototype = jquery.prototype;
在一步步找jquery.prototype.init

jquery.prototype =
原來return new jquery.fn.init(selector, context, rootjquery);jquery.fn.init的prototype指向了jquery,這樣也就返回了jquery物件！！！

下面的init方法和jquery有點不一樣，但也是實現了。首先要考慮以下兩個問題

jquery(selector)要儲存dom元素，當元素是個id選擇器時很容易理解，當selector不是id選擇器時，或者就是乙個dom標籤

如何儲存jquery(selector)裡的dom物件

init: function


(selector) 


if (typeof selector == 'object') 


this.length = selector.length;


return


this;


} else


if (typeof selector == 'function') 


if (selector.charat(0) == '#' && !selector.match('\\s')) else 


this.selector = selector;


this.length = len;


return


this;


}}
從上面的**，我們可以看到this[i]=ele[i]

jquery.prototype = 


}
關鍵點就是用length標記$(selector)中有多少個selector！這樣才可以進行dom操作，總之一句話，還是要操作每個選擇的dom。

開啟控制台列印乙個console.log($(selector))就會發現length屬性

mtouch

增加手勢觸控

**參考

你不需要jquery

基於微積分的手勢庫

此**僅供學習使用，建議不要在生產中使用

談談jquery的實現

最近寫了些移動端的專案，在pc端操作dom，jquery必不可少。但是在移動端引入jquery就顯得不合適，一是檔案太大，二是不支援一些觸控。zepto.js是移動端的jquery，體積很小，支援觸控。在用這些庫的時候，經常會想該如何實現這樣的寫法呢？看了很多jquery原始碼的分析，又看了很多例項...

今天我們來談談jquery，

恢復內容開始 首先從jquery的兩種寫法開始 1.document ready function 首先我們的jquery是用來操作dom節點的，所以必須等到文件載入完畢才能對其進行操作 以下兩種操作可能導致錯誤 2.簡潔寫法，function 所以要等到文件就緒才執行jquery 說說事件 一.k...

談談SaaS的實現架構

2007年01月31日 01 07 00 經典的三層模式不需要我來描述，相信大家都很清楚了。不過這個模式在推廣後遇到了非常大的問題。主要是客戶不能滿意在瀏覽器上的客戶體驗。比起胖客戶端來講，瀏覽器上的體驗確實讓很多客戶失望。不過最近隨著ajax的興起，很多人看到了可能，在瀏覽器上實現有著豐富客戶體驗...