根据《jQuery高级编程》的描述，jQuery插件开发方式主要有三种：
- 通过$.extend()来扩展jQuery
- 通过$.fn 向jQuery添加新的方法
- 通过$.widget()应用jQuery UI的部件工厂方式创建
通常我们使用第二种方法来进行简单插件开发，说简单是相对于第三种方式。第三种方式是用来开发更高级jQuery部件的，该模式开发出来的部件带有很多jQuery内建的特性，比如插件的状态信息自动保存，各种关于插件的常用方法等。
$.extend({
sum:function(obj){
console.log((obj?obj:'没有带参数')+'--$$')
}
})
$.sum()//没有带参数
$.sum("带了参数")//带了参数
运行结果：
支持链式调用
我们都知道jQuery一个时常优雅的特性是支持链式调用，选择好DOM元素后可以不断地调用其他方法。
要让插件不打破这种链式调用，只需return一下即可。
一个好的做法是将一个新的空对象做为$.extend的第一个参数，defaults和用户传递的参数对象紧随其后，这样做的好处是所有值被合并到这个空对象上，保护了插件里面的默认值。
<script>
;(function($,window,document,undefined){
$.fn.myPlugin=function(options){
var defaults={
'color':'red',
'bg':'#000'
};
var settings=$.extend({},defaults,options);//将一个空对象做为第一个参数
return this.css({
'color':settings.color,
'background':settings.bg
})
}
})(jQuery,window,document)
</script>
<script>
$(function(){
$("div").myPlugin({
'bg':"#eee"
})
})
</script>
//选项卡
<style>
.ul1 li{display:inline-block; width:50px; cursor:pointer; text-align: center;}
.ul1 .active{color: #0097DA;}
.ul2 li{display:none}
.ul2 .active{display:block;color: #0097DA;}
</style>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<body>
<div class="box">
<ul class="ul1">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul class="ul2">
<li class="active">11</li>
<li>22</li>
<li>33</li>
<li>44</li>
</ul>
</div>
<script>
;(function($,window,document,undefined){
$.fn.my=function(options){
var defaults={
ul1:"",
ul2:"",
active:""
}
var settings=$.extend({},defaults,options);
$(settings.ul1).click(function(){
$(this).addClass(settings.active).siblings().removeClass(settings.active)
$(settings.ul2).eq($(this).index()).addClass(settings.active).siblings().removeClass(settings.active)
})
}
})(jQuery,window,document)
$(".box").my({
ul1:'.ul1 li',
ul2:".ul2 li",
active:"active"
})
</script>
面向对象
<script>
;(function($,window,document,undefined){
$.fn.myPlugin=function(options){
function tabs(ul1,ul2,action){
$this=this;//保存起来
$this.ul1=ul1;
$this.ul2=ul2;
$this.action=action;
}
tabs.prototype={
init:function(){
$($this.ul1).click(function(){
$(this).addClass($this.action).siblings().removeClass($this.action);
$($this.ul2).eq($(this).index()).addClass($this.action).siblings().removeClass($this.action)
})
}
}
var defaults={
ul1:"",
ul2:"",
action:""
}
var seet=$.extend({},defaults,options);
var p=new tabs(seet.ul1,seet.ul2,seet.action);
console.log(p)
p.init()
}
})(jQuery,window,document)
$(function(){
$(".box").myPlugin({
ul1:".ul1 li",
ul2:".ul2 li",
action:"action"
})
})
</script>