基本插件开发
最简单的插件开发就是对$.fn添加新的成员函数。
$.fn.插件名 = function() {
//插件代码
};
eg:
$.fn.greenify = function () {
this.css( "color", "green" );
};
$("a").greenify(); // Makes all links green.
注意：插件中的this是jQuery对象的实例。
链式调用(Chaining)
jquery的一大特点是链式调用。更改上面的插件方法:
$.fn.greenify = function () {
this.css( "color", "green" );
return this;
};
$( "a" ).greenify().addClass("greenified");
为防止$符号同其他的冲突，可以放到立即执行函数中写：
(function ( $ ) {
$.fn.greenify = function() {
this.css( "color", "green" );
return this;
};
}( jQuery ));
另外，** 尽量只使用一次$.fn**
使用.each
如果需要针对每一个DOM元素进行遍历、处理。则可以使用.each 方法：
$.fn.myNewPlugin = function () {
return this.each (function() {
//Do something to each element here
});
};
传递参数
(function ( $ ) {
$.fn.greenify = function( options ) {
// This is the easiest way to have default options.
var settings = $.extend({
// These are the defaults.
color: "#556b2f",
backgroundColor: "white"
}, options );
// Greenify the collection based on the settings variable.
return this.css({
color: settings.color,
backgroundColor: settings.backgroundColor
});
};
}( jQuery ));
$( "div" ).greenify({
color: "orange"
});
//一般定义默认的参数settings，然后使用$.extend({}, defaultOptions, options)来传参。
参数可修改
为了扩展插件，有时候需要直接修改默认参数，来方便插件的调用。
// Plugin definition.
$.fn.hilight = function( options ) {
// Extend our default options with those provided.
// Note that the first argument to extend is an empty
// object – this is to keep from overriding our "defaults" object.
var opts = $.extend( {}, $.fn.hilight.defaults, options );
// Our plugin implementation code goes here.
};
// Plugin defaults – added as a property on our plugin function.
$.fn.hilight.defaults = {
foreground: "red",
background: "yellow"
};
$.fn.hilight.defaults.foreground = "blue";
$( "#myDiv" ).hilight();
$( "#green" ).hilight({
foreground: "green"
});
方法可修改
另一种扩展插件的方式是将插件的方法暴漏出去。
来自：微信公众账号：myersguo
参考资料
https://learn.jquery.com/plugins/basic-plugin-creation/
http://javascript.ruanyifeng.com/jquery/plugin.html
