JQuery插件開發入門

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

本文並不全面，主要針對自定義插件的分類和語法進行總結，希望以后可以作為工具查看。

注：

jQuery插件的完整開發文檔可參考

http://www.cnblogs.com/tonywang711/archive/2012/03/29/2419985.html

 

類級別的插件：

1、添加一個函數

jQuery.foo = function() {      
    alert('類級別一個函數');     
};  

調用格式如下：

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

 

2、添加多個函數

jQuery.foo = function() {      
    alert('類級別多個函數第一個');     
};     
jQuery.bar = function(param) {      
    alert('類級別多個函數第二個');     
};      

調用格式如下：

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、使用命名空間

jQuery.myPlugin = {             
    foo:function() {             
        alert('類級別使用命名空間');             
    },             
    bar:function(param) {             
        alert('類級別使用命名空間'+param);       
    }            
}; 

調用格式如下：

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

 

對象級別的插件：

1、添加一個函數

$.fn.foo = function() {        
     alert('對象級別一個函數');  
}; 

 

2、添加多個函數

$.fn.foo = function() {        
2      alert('對象級別多個函數');  
3 }; 
$.fn.bar = function() {        
2      alert('對象級別多個函數');  
3 }; 

 

3、使用extend

$.fn.extend({        
    foo:function(){        
          alert('對象級別使用extend');     
    }   
    bar:function(){        
          alert('對象級別使用extend');     
    }      
})  

 

4、使用命名空間

$.fn.foo = {       
　  fun1:function(){
　　　　alert('對象級別使用命名空間');
　　}
　　fun2:function(){
　　　　alert('對象級別使用命名空間');
　　} 
}; 

 

類級別和對象級別的區別：

區別其實就是fn。

官方說法：

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

jQuery.fn = jQuery.prototype

我的理解：

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

 

原文鏈接：http://www.cnblogs.com/FlyFive/archive/2013/06/19/2961470.html