JQuery插件开发入门

个人比较喜欢封装，现在学习JQuery，总想封装出自己喜欢的插件，所以将JQuery插件的开发稍加总结。

本文并不全面，主要针对自定义插件的分类和语法进行总结，希望以后可以作为工具查看。

注：

jQuery插件的完整开发文档可参考

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

 

类级别的插件：

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')等选择符产生的对象。

 

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