在jquery中,$('xxx').xxxx()這種寫法,其實是通過jQuery.fn.extend({xxx: function() {}})的方式進行方法綁定和擴展的,而$.xxx()這種方式的方法是通過jQuery.extend({xxx: function() {}})的方式進行方法綁定和擴展的;
console.log(jQuery()) 其實是個對象,console.log(jQuery('#test')),如果有此元素存在,看起來像數組,其實也是對象,這種叫“類數組”;可以搜索看下類數組相關知識;
好,下面蘇州網站制作開始說下這個問題,第一是extend的實現方法;第二是jquery為什么能同時支持$.xxx()與$().xxx()這兩種寫法;
第一,extend的實現方法;由于源碼較多,我在這兒就不直接展示出來了,有興趣可以去找到看看;其實簡單講,extend主要用于對象的合并,
但是從源碼可以看出,當參數只有一個對象的時候,就是直接將傳入對象合并到調用的對象上 (即jquery或jquery.fn);
所以,當調用jQuery.extend時,就會將傳入的對象里面的方法合并寫入到jQuery對象上面,就可以對其進行擴展; 同理,使用jQuery.fn.extend時,就可以對jQuery.fn進行擴展;
第二,$.xxx()與$().xxx()兩種的區別;第一種$.xxx()其實是調用的jQuery對象上面的方法,也就是通過jQuery.extend進行擴展的方法;有人會說,jQuery是一個函數,但是函數在js也是對象,也可以向其添加屬性和方法;而第二種$().xxx()則是調用的jQuery.fn對象上面的方法,也就是通過jQuery.fn.extend進行擴展的方法;
第一種通過jQuery.extend進行擴展的屬性和方法是直接寫入jQuery對象,所以也就可以直接通過$.xxx()的方式調用,這個很容易理解;
第二種,通過jQuery.fn.extend進行擴展的方法和屬性為何能夠通過$().xxx()進行調用呢;這個就要從jQuery的整個架構來說;當執行$()時,訪問了代碼:
Jquery=function(selector,conyext){
Return new jquery.fn.init(selector,context,rootjquery);
}
可以看出,其實是實例化了一個jQuery.fn.init的對象;在這我們就不再討論jQuery.fn.init里面具體干了什么,但可以通過源碼可以看出,其最終執行了“return this”,也就是返回了jQuery.fn.init的實例對象;那如何通過$()可以訪問到jQuery.fn上面的屬性和方法呢?就是通過這句代碼:
jquery.fn.init.prototype=jquery.fn;
它將jQuery.fn賦給了jQuery.fn.init.prototype,所以,jQuery.fn.init的實例對象也就可以直接訪問jQuery.fn上面的方法和屬性了;所以,當你通過$().xxx()時,其實訪問了jQuery.fn.xxx()方法;
其實,這個問題去看jquery源碼就能很清楚的知道了,要明白jquery的方法擴展方式,真正理解其主要架構方式。蘇州網站建設提醒小伙伴要多看基礎理論,熟悉基礎用法。