在Jquery中，$是JQuery的別名，所有使用$的地方也都可以使用JQuery來替換，如$('#msg')等同于JQuery('#msg') 的寫法。
1、如何給一個id為casper的標(biāo)簽添加一個名為“world”的class
考慮下面一個場景，假設(shè)我們頁面上有個id為casper的div標(biāo)簽，如下所示
<div id="casper" class="hello">casper是個大傻瓜，啦啦啦啦啦</div>
現(xiàn)在我們想要給它添加一個class，比如“world”，用jquery的話如何實現(xiàn)？很簡單，不賣關(guān)子
$('#casper').addClass('world');很好，接下來我們思考：如何不用jquery，我們?nèi)绾稳绾螌崿F(xiàn)實現(xiàn)上述功能？最簡單的方式：
var node = document.getElementById('casper');
node.className += ' world'; getElementById、getElementsByTagName神馬的，名字老長老長的，寫著有點不爽，于是把getElementById這個方法用美元（$）包裝下：
function $(id){
return document.getElementById(id);
}
$('casper').className += ' world';className品字符串神馬的，jquery的調(diào)用方式相比麻煩多了，那再改進(jìn)下：
function $(id){
var node = document.getElementById(id);
node.addClass = function(addName){
node.className += ' ' + addName;
};
return document.getElementById(id);
}
$('casper').addClass('world');看上去挺像那么一回事了，多優(yōu)雅的接口�。釡I盈眶中）～
真的是這樣嗎，再仔細(xì)瞧瞧？于是果斷發(fā)現(xiàn)不對勁的地方：對于$，每次調(diào)用，都會給返回的dom元素上添加一個addClass方法，這對空間來說是極大的浪費。當(dāng)然，可以將addClass方法抽取出來：
function addClass(className){
//實現(xiàn)略
}
function $(id){
var node = document.getElementById(id);
node.addClass = addClass;
return document.getElementById(id);
}
$('casper').addClass('world');原先的空間浪費問題可以在很大程度上得到解決，但明顯這解決方法還不夠好。如果有那么一種實現(xiàn)方式，讓所有的對象實例都共享一個方法。。。
2、jQuery中的實現(xiàn)思路
同樣不必賣關(guān)子，這里說的就是原型方法，我們再看下jquery的調(diào)用方式
$('#casper').addClass('world');$('#casper')并不是像我們上面那樣，簡單地將id為casper的元素返回。實際上，$('#casper')返回的是一個jQuery對象，該對象特征如下：
擁有一個length屬性，length等于你調(diào)用$選中的元素的數(shù)目，在$('#casper')中為1
擁有0～n-1的實例屬性，分別對應(yīng)調(diào)用$時選中的第1～第n個元素，如本例中$('#casper')[0]即為目標(biāo)dom元素
擁有一堆原型方法，如常見的addClass、removeClass、bind等
根據(jù)上面三點，很容易對我們之前寫的代碼進(jìn)行修改，如下：
function $(id){
this[0] = document.getElementById(id);
this.length = 1;
}
$.prototype.addClass = function(className){
this[0].className += ' ' + className;
};
var noode = new $('casper');
node.addClass('world');其實就幾行代碼的事情，但。。。還是覺得有些不對勁，new $('casper')，平常在用jquery的時候似乎不需要new一下的說，想想看，我們代碼中一坨new是多么可怕的事情～
好吧，其實是因為jQuery幫你完成了構(gòu)造函數(shù)調(diào)用的這部分工作，這一小小的細(xì)節(jié)改善對jQuery的流行起到了很大的幫助。按照這個思路，繼續(xù)修改之前的代碼：
function $(id){
if(!(this instanceof $) return new $(id); //加了這么個語句
this[0] = document.getElementById(id);
this.length = 1;
}
//其他一樣，節(jié)省空間不貼代碼在上面的代碼中，只有一點小小的修改，就是加了個判斷語句 if(!(this instanceof $)) ，作用在于判斷，當(dāng)$被調(diào)用時，究竟是采用以下兩種調(diào)用方式的哪一種，關(guān)于這種判斷方式，可參考之前寫的《【經(jīng)驗總結(jié)】構(gòu)造函數(shù)的強(qiáng)制調(diào)用》：
$('casper')，直接調(diào)用，于是this為window
new $('casper')，此時$為構(gòu)造方法，this instanceof $ == true
3、jQuery中的源碼實現(xiàn)以及問題所在（俺的疑惑）
羅嗦了這么多，我們看看關(guān)于這點，jQuery里是如何實現(xiàn)的，源碼大致如下，一些不相干的代碼略過：
(function( window, undefined ) {
//去掉無關(guān)變量聲明等，防止干擾分析
var jQuery = (function() {
// Define a local copy of jQuery
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},
//一堆無關(guān)細(xì)節(jié)暫時略過
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function( selector, context, rootjQuery ) {
//繼續(xù)略過
}
};
// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;
return jQuery;
})();
window.jQuery = window.$ = jQuery;
})( window );對于研究過jQuery源碼或曾經(jīng)打算研究jQuery源碼的同學(xué)來說，上面這段代碼肯定不會陌生，它有一個特點：看上去比較晦澀，特別是是結(jié)合了jQuery源碼里面比較詭異的代碼縮進(jìn)～
通過閉包返回的jQuery對象，閉包里面是有jQuery函數(shù)定義，jQuery函數(shù)里面return了new jQuery.fn.init 。。�？焖倏炊厦孢@段代碼的秘訣在于：一個支持代碼高亮和職能中括號匹配的編輯器，比如webstorm。。。
上面只是開個小玩笑，繞了這么久，無法是想做下面幾件事情：
無論有沒有new，只要調(diào)用$，都給你返回一個jQuery對象（實際上jQuery.fn.init才是實際的構(gòu)造函數(shù)）
將jQuery.fn.init.fn指向jQuery.prototype，這樣的話，當(dāng)我們通過$.fn.newPrototypeAttr 方式向jQuery添加原型屬性或方法，其實最終都成為了jQuery.fn.init地原型屬性或方法
將constructor屬性指向jQuery，不然$('#casper').constructor 獲得的會是jQuery.fn.init
個人覺得上面這段代碼有些費解，似乎完全可以采用相對不那么曲折的方式實現(xiàn)，如下所示，其實思路都是相同的：
然后，就是添加各種原型方法了，兼容性處理和優(yōu)雅的API，這塊才是精華，這里還沒講到。
(function(){
var jQuery = function(id){
return new _jquery(id);
};
var _jquery = function(id){
//此處各種選擇分支神馬的都忽略～
this[0] = document.getElementById(id);
this.length = 1;
};
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
addClass: function(className){
this[0].className += ' ' + className;
}
};
_jquery.prototype = jQuery.fn;
window.$ = window.jQuery = jQuery;
})();
下載 
下載 
下載 
下載 
下載 
下載 
下載 
喜歡 
頂
難過
囧
圍觀
無聊
