今天和大家分享一个jQuery插件的开发过程。这个插件的主要功能是实现表格中奇偶行的颜色交替，鼠标移动当前行高亮显示！
其实很简单，我们可以先把功能给实现了，然后再套用一个开发jQuery插件的模板，稍作修改，将我们的功能封装到一个js文件中，那样jQuery插件就开发完了。
现在我们就按照上面说的来：
第一步：创建一个HTML页面，并添加一个表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>开发一个简单的jQuery插件</title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//使用循环语句动态创建10行内容
for (var i = 0; i < 10; i++) {
$('<tr><td>' + i + '</td><td>学号</td><td>姓名</td><td>性别</td></tr>').appendTo($('#tb'));
} //end for
}); //the end
</script>
</head>
<body>
<table id="tb" style="width:50%;" />
</body>
</html>
效果如图：
第二步：修改脚本，把功能实现
<script type="text/javascript">
$(function () {
//使用循环语句为表格动态添加10行内容
for (var i = 0; i < 10; i++) {
$('<tr><td>' + i + '</td><td>学号</td><td>姓名</td><td>性别</td></tr>').appendTo($('#tb'));
} //end for
//设置默认值
var defaults = {
oddRowColor: "LightGray",
evenRowColor: "LightSkyBlue",
currentRowColor: "Yellow"
}; //end var defaults
//实现功能：奇偶行颜色交替
$('#tb').find('tr:odd').css('backgroundColor', defaults.oddRowColor);
$('#tb').find('tr:even').css('backgroundColor', defaults.evenRowColor);
//当前行原始样式（可在在鼠标移入时取得）
var originalStyle = "white";
//实现功能：鼠标移动当前行高亮显示
$('#tb').find('tr').mouseover(function () {
//鼠标移入时将当前行原始样式取出，鼠标移出时还原
originalStyle = $(this).css('backgroundColor');
$(this).css('backgroundColor', defaults.currentRowColor);
}).mouseout(function () {
$(this).css('backgroundColor', originalStyle);
}); //end mouseEvent
}); //the end
</script>
效果如图：
第三步：套用jQuery插件开发模板
我们先在Script文件夹中添加一个js脚本文件，取名为jquery.customplugin.js，然后放入模板。
(function ($) {
$.fn.method= function (opts) {
var defaults = {};
var options = $.extend(defaults, opts);
return this.each(function () {
}); //end this.each
}; //end $.fn.table
})(jQuery); //the end
模板中首先定义一个立即调用函数表达式：(function($){})(jQuery); 它不需要手动调用会自动执行！
模板中：$（形参）和 jQuery（实参）
我们使用jQuery的时候经常使用到$符号，它其实是jQuery对象的别名，完全可以被jQuery对象替换。在开发jQuery插件的时候，我们要假设jQuery库已经加载到页面中。我们习惯使用美元符号，所以形参取名为$。
现在我们要给我们的插件添加一个方法，名字就叫 method，那么我们可以使用 $.fn.method 添加一个jQuery对象方法。如果添加的是全局函数，使用 $.method 即可。为了让用户能够自定义背景色，我们可以为函数 method 添加一个参数 opts，再使用 extend 方法，将传入的参数值覆盖默认值 defaults，并返回给变量 options。
使用return关键字是为了将 jQuery 对象返回，这样在调用该放放后还能够正常使用 jQuery 的连缀功能了。
模板中的 this.each，这里的this可以理解为调用该方法的对象比方说 $('#tb').method()，这里的 this 指的就是 $('#tb') 这个 jQuery 对象。而 each 方法能够在匹配多个元素的情况下实现隐私迭代。
有了这个模板，我们只要将之前实现功能的代码拷贝过来，稍作修改即可。
//立即调用函数表达式（顾名思义就是不需要手动调用函数，可以自动执行！）
(function ($) {
//添加jQuery对象方法，不是全局函数，因为我们这个方法是针对表格的。
$.fn.method = function (opts) {
//设置默认值
var defaults = {
oddRowColor: "LightGray",
evenRowColor: "LightSkyBlue",
currentRowColor: "Yellow"
}; //end var defaults
//使用参数值覆盖默认值（使用函数extend可以用opts映射参数覆盖defaults中的选项，并保持选项映射中未指定的默认项不变）
var options = $.extend(defaults, opts);
//隐式迭代并返回对象
return this.each(function () {
//为了更好的理解
var $table = $(this);
//实现功能：奇偶行颜色交替
$table.find('tr:odd').css('backgroundColor', options.oddRowColor);
$table.find('tr:even').css('backgroundColor', options.evenRowColor);
//当前行原始样式（可在在鼠标移入时取得）
var originalStyle = "white";
//实现功能：鼠标移动当前行高亮显示
$table.find('tr').mouseover(function () {
//鼠标移入时将当前行原始样式取出，鼠标移出时还原
originalStyle = $(this).css('backgroundColor');
$(this).css('backgroundColor', options.currentRowColor);
}).mouseout(function () {
$(this).css('backgroundColor', originalStyle);
}); //end mouseEvent
}); //end this.each
}; //end $.fn.table
})(jQuery); //the end
第四步：修改HTML页面，引用jquery.customplugin.js文件，在调用其方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>开发一个简单的jQuery插件</title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<!--引入自定义插件 jquery.customplugin.js，需要放在jQuery库后面<script>脚本前面-->
<script src="Scripts/jquery.customplugin.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//使用循环语句动态创建10行内容
for (var i = 0; i < 10; i++) {
$('<tr><td>' + i + '</td><td>学号</td><td>姓名</td><td>性别</td></tr>').appendTo($('#tb'));
} //end for
//调用自定义插件中的方法实现功能，并修改默认样式
$('#tb').method({currentRowColor:'Red'});
}); //the end
</script>
</head>
<body>
<table id="tb" style="width:50%;" />
</body>
</html>
效果如图：
到这里，一个简单的jQuery插件就开发出来了！
参考资料：http://www.cnblogs.com/JustinYoung/archive/2010/03/30/jquery-chajian.html
浙公网安备 33010602011771号