主要是使用$.extend()和$.fn.extend()两个方法扩展对象的方法和属性
API文档上的示例：
index.html
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="radio">单选框 <input type="checkbox">多选框 <script src="jquery.min.js"></script> <script src="jq.fn.extend.js"></script> </body> </html>
jq.fn.extend.js：
jQuery.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); }, uncheck: function() { return this.each(function() { this.checked = false; }); } }); $("input[type=checkbox]").check(); $("input[type=radio]").uncheck();
index.html:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div></div> <ul> <li> <a href="http://weibo.com/">我的微博</a> </li> <li> <a href="http://www.baidu.com">百度</a> </li> <li> <a href="http://www.google.com">谷歌</a> </li> </ul> <span>我是span标签</span> <span>我是span标签</span> <span>我是span标签</span> <p>我是p标签</p> <p>我是p标签</p> <p>我是p标签</p> <p>我是p标签</p> <p>我是p标签</p> <script src="jquery.min.js"></script> <script src="jq.fn.extend.js"></script> <script> $(function () { $.sayWord(); $.sayWord('erbao'); setInterval(function () { $('div').text('当前的时间是：' + $.log()); }, 1000); $('a').changeColor().css('font-weight', 'bold'); $('span').myPlugin({ /*'color': 'lightpink',*/ 'fontSize': '20px' }); $('p').myPlugin(); }); </script> </body> </html>
jq.fn.extend.js：
/** * $.extend()这种方式开发无法运用jq强大的选择器，只能做简单的对象扩展 * @param {[type]} name) { console.log((name ? name : 'Alan') + ' say some word.'); } [description] * @param {Date} log: function () { var date,year,month,day,hour,minute,second; date [description] * @return {[type]} [description] */ $.extend({ sayWord: function (name) { console.log((name ? name : 'Alan') + ' say some word.'); }, log: function () { var date,year,month,day,hour,minute,second; date = new Date(); year = date.getFullYear(); month = parseInt(date.getMonth() + 1); day = date.getDate(); hour = date.getHours(); minute = date.getMinutes(); second = date.getSeconds(); return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second; } }); // 最常用的jq插件开发格式 $.fn.changeColor = function () { this.css({'color': 'red'}); // 返回，使其支持链式调用 return this.each(function () { // 对每个元素进行对应的操作 $(this).append(' ' + $(this).attr('href')); }); }; // 支持自定义传参 $.fn.myPlugin = function (options) { var defaults = { 'color': 'green', 'fontSize': '12px' }; // 写一个空对象，都合并到空对象，保护defaults里面的值 var settings = $.extend({}, defaults, options); return this.each(function () { $(this).css({ 'color': settings.color, 'fontSize': settings.fontSize }); }); };
$.extend(obj1, obj2) 合并和覆盖到第一个对象
一个好的做法是将一个新的空对象做为$.extend的第一个参数，defaults和用户传递的参数对象紧随其后，这样做的好处是所有值被合并到这个空对象上，保
护了插件里面的默认值。
$.extend({}, defaults, settings);
在处理插件参数的接收上，通常使用jQuery的extend方法，上面也提到过，但那是给extend方法传递单个对象的情况下，这个对象会合并到jQuery身上，所
以我们就可以在jQuery身上调用新合并对象里包含的方法了，像上面的例子。当给extend方法传递一个以上的参数时，它会将所有参数对象合并到第一个里
。同时，如果对象中有同名属性时，合并的时候后面的会覆盖前面的。
利用这一点，我们可以在插件里定义一个保存插件参数默认值的对象，同时将接收来的参数对象合并到默认对象上，最后就实现了用户指定了值的参数使用指
定的值，未指定的参数使用插件默认值。
为了演示方便，再指定一个参数fontSize，允许调用插件的时候设置字体大小。
面向对象模式开发插件（最好的方式，当代码量特别大的时候，易于维护）
;(function ($, win, doc, undefined) { // 创建一个构造函数 var Butterfly = function (element, options) { this.$element = element; this.defaults = { 'color': 'lightpink', 'fontSize': '20px', 'fontWeight': 'bold' }; this.options = $.extend({}, this.defaults, options); }; Butterfly.prototype = { _init: function () { return this.$element.css({ 'color': this.options.color, 'fontSize': this.options.fontSize, 'fontWeight': this.options.fontWeight }); } }; $.fn.myPlugin = function (options) { var butterfly = new Butterfly(this, options); butterfly._init(); }; })(jQuery, window, document);
// 调用方式
$(ele).myPlugin();
$(ele).myPlugin({
// ...传参
});