個人比較喜歡封裝，現在學習JQuery，總想封裝出自己喜歡的外掛，所以將JQuery外掛的開發稍加總結。

本文並不全面，主要針對自定義外掛的分類和語法進行總結，希望以後可以作為工具檢視。

注：

jQuery外掛的完整開發文件可參考

類級別的外掛：

1、新增一個函式

1 jQuery.foo = function() {      
2     alert('類級別一個函式');     
3 };  

呼叫格式如下：

1 jQuery.foo();或者$.foo();

2、新增多個函式

1 jQuery.foo = function() {      
 
2     alert('類級別多個函式第一個');     
3 };     
4 jQuery.bar = function(param) {      
5     alert('類級別多個函式第二個');     
6 };      

呼叫格式如下：

jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar'); 

3、使用extend

1 jQuery.extend({         
2     foo: function() {         
3         alert('類級別使用extend');         
 
4     },         
5     bar: function(param) {         
6         alert('類級別使用extend');         
7     }        
8 }); 

4、使用名稱空間

1 jQuery.myPlugin = {             
2     foo:function() {             
3         alert('類級別使用名稱空間');             
4     },             
5     bar:function
 
(param) {             
6         alert('類級別使用名稱空間'+param);       
7     }            
8 }; 

呼叫格式如下：

1 $.myPlugin.foo();            
2 $.myPlugin.bar('baz');    

物件級別的外掛：

1、新增一個函式

1 $.fn.foo = function() {        
2      alert('物件級別一個函式');  
3 }; 

2、新增多個函式

$.fn.foo = function() {        
2      alert('物件級別多個函式');  
3 }; 
$.fn.bar = function() {        
2      alert('物件級別多個函式');  
3 }; 

3、使用extend

1 $.fn.extend({        
2     foo:function(){        
3           alert('物件級別使用extend');     
4     }   
5     bar:function(){        
6           alert('物件級別使用extend');     
7     }      
8 })  

4、使用名稱空間

1 $.fn.foo = {       
2 　  fun1:function(){
3 　　　　alert('物件級別使用名稱空間');
4 　　}
5 　　fun2:function(){
6 　　　　alert('物件級別使用名稱空間');
7 　　} 
8 }; 

類級別和物件級別的區別：

區別其實就是fn。

官方說法：

1 jQuery.fn = jQuery.prototype = {  
2     init: function( selector, context ) {//....　  
3     //......  
4 };   

jQuery.fn = jQuery.prototype

我的理解：

類級別方法什麼的是針對$，也就是jQuery物件的，而物件級別的則可以針對$('div')等選擇符產生的物件。