一个经典的对象级别插件的开发

先新建一个js，名为jquery.lifocuscolor.js，编写一下代码：

(function($) {
$.fn.extend({
"focusColor": function(li_col) {
var def_col = "#ccc"; //默认获取焦点的色值
var lst_col = "#fff"; //默认丢失焦点的色值

//如果设置的颜色不为空，使用设置的颜色，否则为默认色
li_col = (li_col == undefined) ? def_col : li_col;

$(this).find("li").each(function() { //遍历表项<li>中的全部元素
$(this).mouseover(function() { //获取鼠标焦点事件
$(this).css("background-color", li_col); //使用设置的颜色
}).mouseout(function() { //鼠标焦点移出事件
$(this).css("background-color", "#fff"); //恢复原来的颜色
})
})
return $(this); //返回jQuery对象，保持链式操作
}
});
})(jQuery);

界面中引入jquery.lifocuscolor.js然后调用函数focusColor，就可以实现聚焦变换颜色了

<script type="text/javascript" src="Plugin/jquery.lifocuscolor.js"></script>

<script type="text/javascript">
$(function() {
$("#u1").focusColor("red");//调用自定义的插件
})
</script>