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