简单的插件demo
//sample:扩展jquery对象的方法，bold()用于加粗字体。
(function ($) {
$.fn.extend({
"bold": function () {
///<summary>
/// 加粗字体
///</summary>
return this.css({ fontWeight: "bold" });
}
});
})(jQuery);
调用
$(function(){
$.("p").bold();
});
为了方便用户创建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。
jQuery.extend()
一、类级别（$.extend）
类级别你可以理解为拓展jquery类，最明显的例子是$.ajax(...),相当于静态方法。
开发扩展其方法时使用$.extend方法，即jQuery.extend(object);
jQuery.extend(object) ,一个参数的用于扩展jQuery类本身，也就是用来在jQuery类/命名空间上增加新函数，或者叫静态方法，例如jQuery内置的 ajax方法都是用jQuery.ajax()这样调用的，有点像 “类名.方法名” 静态方法的调用方式。下面我们也来写个jQuery.extend(object)的例子：
//扩展jQuery对象本身
jQuery.extend({
"minValue": function (a, b) {
///<summary>
/// 比较两个值，返回最小值
///</summary>
return a < b ? a : b;
},
"maxValue": function (a, b) {
///<summary>
/// 比较两个值，返回最大值
///</summary>
return a > b ? a : b;
}
});
//调用
var i = 100; j = 101;
var min_v = $.minValue(i, j); // min_v 等于 100
var max_v = $.maxValue(i, j); // max_v 等于 101
二、 对象级别
对象级别则可以理解为基于对象的拓展，如$("#table").changeColor(...); 这里这个changeColor呢，就是基于对象的拓展了。
开发扩展其方法时使用$.fn.extend方法，即jQuery.fn.extend(object);
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
100px;
height:100px;
background:blue;
}
</style>
<script src="jquery-1.7.2.js"></script>
<script>
$(function(){
//定义一闭包个区域 防止插件污染
(function($){
//使用jq插件机制的扩展方法$.fn.extend()编写插件
$.fn.extend({
"bold":function(){
return this.css('fontWeight','bold');
},
"bkred":function(){
return this.css('background','red');
},
"size_a":function(options){
var options=$.extend(defanlts,options||{});//默认参数和传参进行合并
this.css({
'width':options.width,
'height':options.height
});
return this;//为了可以链式调用，需要把对象返回，否则报错
}
});
//设置默认值-默认参数
var defanlts = {
'width':'100px',
'height':'100px'
};
})($);
$(".p").bold().css('fontSize','50px').css('margin',0);
$(".p").bkred().on('click',function(){
alert('我是p元素')
});
$("#box").size_a({'width':300,'height':200}).on('click',function(){
$(this).css('background','red');
});
});
</script>
</head>
<body>
<div class="box" id="box">123</div>
<p class="p">我</p>
<p>我</p>
</body>
</html>
如有不解请参考http://jingyan.baidu.com/album/e75aca85550216142edac63b.html?picindex=1
http://www.cnblogs.com/joey0210/p/3408349.html#