jQuery是一个封装的很好的类，比如我们用语句$("#btn1") 会生成一个 jQuery类的实例。
一、jQuery插件开发注意要点
1、使用闭包，避免全局依赖，避免第三方破坏。
2、避免在插件内部使用$作为JQuery对象的别名，而应使用完整的JQuery来表示，这样可以避免冲突。
3、插件应该返回一个JQuery对象，以便保证插件的可链式操作。
4、所有方法或函数插件，都应当以分号结尾，否则压缩的时候可能会出现问题。为了更加保险，可以在插件头部添加一个分号（；），以免他们的不规范代码给插件带来影响。
二、jQuery插件开发方法
1、jQuery.extend(object);
属于类级别，给jQuery类添加新方法，可以理解为添加静态方法，是基于类的扩展，最明显的例子是.ajax(...)。
//插件代码
$.extend({
add:function(a,b){return a+b;} ,
minus:function(a,b){return a-b;}
});
//页面调用
var i = $.add(3,2);
var j = $.minus(3,2); 如果要扩展已有的对象，比如：
var newSrc=$.extend(dest,src1,src2,src3...)
它的含义是将src1,src2,src3...合并到dest中，返回值为合并后的dest，由此可以看出该方法合并。
//插件代码
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
//结果
result={name:"Jerry",age:21,sex:"Boy"}
2、jQuery.fn.extend(object);
属于对象级别，给jQuery对象添加方法，是基于对象的拓展。
jQuery.fn = jQuery.prototype
//插件代码
$.fn.extend({
check:function(){
return this.each({
this.checked=true;
});
},
uncheck:function(){
return this.each({
this.checked=false;
});
}
});
//页面调用
$('input[type=checkbox]').check();
$('input[type=checkbox]').uncheck();
//扩展
$.xy = {
add:function(a,b){ return a+b; } ,
minus:function(a,b){ return a-b; },
voidMethod:function(){ alert("void"); }
};
var i = $.xy.add(3,2);
var m = $.xy.minus(3,2);
$.xy.voidMethod();
3、封装全局函数的插件（类级别）
jQuery.foo = function() {
alert('This is a test. This is only a test.');
};
jQuery.bar = function(param) {
alert('This function takes a parameter, which is "' + param + '".');
};
//页面调用
$.foo()
三、jQuery插件开发案例
案例A
1、运用在多个元素控件中， 如果要遍历，可以用this.each方法。
//插件代码
(function ($) {
$.fn.hoverElement = function () {
this.each(function () {
$(this).hover(
function () {
$(this).addClass("Add");
},
function () {
$(this).removeClass("Remove");
}
);
})
}
})(jQuery);
//html代码
<div class="hoverText">
First Button..
</div>
<div class="hoverText">
Second Button..
</div>
<div class="hoverText">
Third Button..
</div>
//js代码
<script type="text/javascript">
$(document).ready(function () {
$(".hoverText").hoverElement();
});
</script>
2、链式操作
//插件代码
(function ($) {
$.fn.hoverElement = function () {
return this.each(function () {
$(this).hover(
function () {
$(this).addClass("Add");
},
function () {
$(this).removeClass("Remove");
}
);
})
}
})(jQuery);
//html代码
<div class="hoverText">
First Button..
</div>
<div class="hoverText">
Second Button..
</div>
<div class="hoverText">
Third Button..
</div>
//js代码
<script type="text/javascript">
$(document).ready(function () {
$(".hoverText").hoverElement();
});
</script>
3、自定义插件
我们需要设置一些默认值，当它没有设置的时候，我们就用这些默认值。默认值和用户传进来的值是怎么联合在一起的呢？通过var obj = $.extend(defaultVal, options); 可以实现用户自定义的值覆盖默认值。
//插件代码
(function ($) {
$.fn.textHover = function (options) {//options 经常用这个表示有许多个参数。
var defaultVal = {
Text: 'Your mouse is over',
ForeColor: 'red',
BackColor: 'gray'
};
var obj = $.extend(defaultVal, options);
return this.each(function () {
var selObject = $(this);//获取当前对象
var oldText = selObject.text();//获取当前对象的text值
var oldBgColor = selObject.css("background-color");//获取当前对象的背景色
var oldColor = selObject.css("color");//获取当前对象的字体的颜色 selObject.hover(function () {//定义一个hover方法。
selObject.text(obj.Text);//进行赋值
selObject.css("background-color", obj.BackColor);//进行赋值
selObject.css("color", obj.ForeColor);//进行赋值
},
function () {
selObject.text(oldText);
selObject.css("background-color", oldBgColor);
selObject.css("color", oldColor);
}
);
});
}
})(jQuery);
//html代码
<div id="div1" class="textBar">
Mouse over here.....
</div>
<div id="div2" class="textBar">
Mouse over here.....
</div>
//js代码
$(document).ready(function () {
$('#div1').textHover({
Text: 'I am going to over..',
ForeColor: 'yellow',
BackColor: 'Red'
});
$('#div2').textHover({ Text: 'I am second div...' });
});
案例B
1、插件代码
/*
* tableUI 0.1
* Copyright (c) 2013 camillea http://www.cnblogs.com/camille666/
* Date: 2013-03-30
* 美化表格，让表格的奇偶行颜色不同，鼠标移到某行上，某行可以高亮显示。
*/
(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
//合并多个对象为一个，如果你在调用的时候写了新的参数，就用新的参数，如果没有写，就用默认的参数。
var options = $.extend(defaults, options);
this.each(function(){
var thisTable=$(this);
//添加奇偶行颜色
$(thisTable).find("tr:even").addClass(options.evenRowClass);
$(thisTable).find("tr:odd").addClass(options.oddRowClass);
//添加活动行颜色
$(thisTable).find("tr").bind("mouseover",function(){
$(this).addClass(options.activeRowClass);
});
$(thisTable).find("tr").bind("mouseout",function(){
$(this).removeClass(options.activeRowClass);
});
});
};
})(jQuery);
、html代码
把该插件保存为table.js，新建html。
<script src="js/jquery-1.11.1.js" type="text/javascript"></script>
<script src="js/table.js" type="text/javascript"></script>
、js代码
<script type="text/javascript">
$(document).ready(function () {
$("#btn1").click(function () {
$("#div1").tableUI ();
});
});
</script>