JQuery插件开发入门

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

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

注：

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

/article/5316100.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