jquery插件开发常见的有两只方式，一个是添加到jquery的静态方法（$.plugin()），另外一个是添加到jquery的实例方法（$().plugin()）;

1、jquery类级别方法

;

if (typeof jQuery === 'undefined') {

throw new Error('requires jQuery');

}

(function($){

var Demo;

Demo.defaults = {

title:'测试插件',

...

}

Demo = function(options){

this.options = $.extend(Demo.defaults, options);

this.init(this);

this._show(this);

this._bindEvent(this);

}

Demo.prototype = {

init: function(){

$('body').append('<div class="modal hide"><input type="text" id="J_inputUserName"/></div>')

},

_show: function(){

$('.modal').show()

},

_bindEvent: function(){

$("#J_inputUserName").click(function(){

..to dos

});

}

}

$.extend({Demo:function(options){

if(!options)options = {};

return new Demo(this, options);

}});

})(jQuery)

2、jquery对象实例方法(面向对象的插件开发)

;

if (typeof jQuery === 'undefined') {

throw new Error('requires jQuery');

}

(function($){

var Demo;

Demo.defaults = {

title:'测试插件',

...

}

Demo = function(ele, options){

this.options = $.extend(Demo.defaults, options);

this.element = ele;//如：$('page').Demo()

this.init(this);

this._show(this);

this._bindEvent(this);

}

Demo.prototype = {

init: function(){

$('body').append('<div class="modal hide"><input type="text" id="J_inputUserName"/></div>')

},

_show: function(){

$('.modal').show()

},

_bindEvent: function(){

$("#J_inputUserName").click(function(){

..to dos

});

}

}

$.fn.Demo = function(options){

//在这里面,this指的是用jQuery选中的元素

return this.each(function(){

//链式调用

return new Demo(this, options)

})

}

})(jQuery)