Jquery選擇器 $實現(xiàn)原理
更新時間:2009年12月02日 00:14:33 作者:
在此之前對于Microsoft Ajax的Sys和Jquery的$符號一直很好奇, 不明白為什么輸入一個'$()'就可以實現(xiàn)選擇器?
但由于工作的原因,很久不曾做過網(wǎng)站項目了,也沒有時間去好好研究Jquery的源碼,這個疑問也一直沒有得到解決了, 今天,空閑之余,打開Jquery的源碼看看,才明天它實現(xiàn)的原理,原來在加入jquery的js這個文件時,實際上是執(zhí)行了一個函數(shù),在這個函數(shù)里己經(jīng)初始化了$和JQuery變量, 實現(xiàn)這個功能源碼如下(代碼已刪減和更改,并不影響說明實現(xiàn)原理):
(function() {
var
// Will speed up references to window, and allows munging its name.
window = this,
// Will speed up references to undefined, and allows munging its name.
undefined,
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
jQuery = window.jQuery = window.$ = function(selector, context) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init(selector, context);
},
// A simple way to check for HTML strings or ID strings
// (both of which we optimize for)
quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,
// Is it a simple selector
isSimple = /^.[^:#\[\.,]*$/;
jQuery.fn = jQuery.prototype = {
init: function(selector, context) {
// Make sure that a selection was provided
// Make sure that a selection was provided
selector = selector || document;
this[0] = selector;
this.length = 1;
this.context = selector;
return this;
},
show:function() {
alert("this.show");
},
// Start with an empty selector
selector: "",
// The current version of jQuery being used
jquery: "1.3.2"
};
jQuery.fn.init.prototype = jQuery.fn;
})();
function test(src){
alert($(src));
$(src).show();
從代碼里我們可以看到有這樣一個函數(shù)執(zhí)行了(funtion(){})();
var window = this;
_jQuery = window.jQuery;
_$ = window.$;
這幾句代碼應(yīng)該是聲明jQuery和$變量,至于為什么能這樣子用我還沒弄明白,等待高人解決??!
但我認(rèn)為這并沒關(guān)系,因為最重要的是下面這段代碼:
jQuery = window.jQuery = window.$ = function(selector, context) {
return new jQuery.fn.init(selector, context);
};
可以看出創(chuàng)建jQuery.fn.init這樣一個函數(shù)返回給$, 這樣是可以使用$實例了,但還不能訪問jQuery.fn里的方法,因此需要加上后面這句:
jQuery.fn.init.prototype = jQuery.fn;
實現(xiàn)了這些, Jquery中的其他功能就很好理解了, 無非是添prototype或extend中的方法了.
復(fù)制代碼 代碼如下:
(function() {
var
// Will speed up references to window, and allows munging its name.
window = this,
// Will speed up references to undefined, and allows munging its name.
undefined,
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
jQuery = window.jQuery = window.$ = function(selector, context) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init(selector, context);
},
// A simple way to check for HTML strings or ID strings
// (both of which we optimize for)
quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,
// Is it a simple selector
isSimple = /^.[^:#\[\.,]*$/;
jQuery.fn = jQuery.prototype = {
init: function(selector, context) {
// Make sure that a selection was provided
// Make sure that a selection was provided
selector = selector || document;
this[0] = selector;
this.length = 1;
this.context = selector;
return this;
},
show:function() {
alert("this.show");
},
// Start with an empty selector
selector: "",
// The current version of jQuery being used
jquery: "1.3.2"
};
jQuery.fn.init.prototype = jQuery.fn;
})();
function test(src){
alert($(src));
$(src).show();
從代碼里我們可以看到有這樣一個函數(shù)執(zhí)行了(funtion(){})();
var window = this;
_jQuery = window.jQuery;
_$ = window.$;
這幾句代碼應(yīng)該是聲明jQuery和$變量,至于為什么能這樣子用我還沒弄明白,等待高人解決??!
但我認(rèn)為這并沒關(guān)系,因為最重要的是下面這段代碼:
jQuery = window.jQuery = window.$ = function(selector, context) {
return new jQuery.fn.init(selector, context);
};
可以看出創(chuàng)建jQuery.fn.init這樣一個函數(shù)返回給$, 這樣是可以使用$實例了,但還不能訪問jQuery.fn里的方法,因此需要加上后面這句:
jQuery.fn.init.prototype = jQuery.fn;
實現(xiàn)了這些, Jquery中的其他功能就很好理解了, 無非是添prototype或extend中的方法了.
相關(guān)文章
詳解Jquery EasyUI tree 的異步加載(遍歷指定文件夾,根據(jù)文件夾內(nèi)的文件生成tree)
本篇文章主要介紹了Jquery EasyUI tree 的異步加載,可以實現(xiàn)遍歷指定文件夾,根據(jù)文件夾內(nèi)的文件生成tree,有興趣的可以了解一下。2017-02-02iframe異步加載實現(xiàn)點擊左邊菜單加載右邊內(nèi)容實例講解
iframe異步加載想必很多朋友對你都不會陌生,接下來將實現(xiàn)這樣一個功能左邊菜單不能刷新的情況下,異步加載右邊的內(nèi)容頁面,感興趣的你可以參考下本文或許對你有所幫助2013-03-03jQuery實現(xiàn)的手動拖動控制進度條效果示例【測試可用】
這篇文章主要介紹了jQuery實現(xiàn)的手動拖動控制進度條效果,涉及jQuery事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-04-04