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