对象级别插件开发

（1）功能描述
　　在列表<ul>元素中，鼠标在表项<li>元素移动时，可以自定义其获取焦点（focus）时的背景颜色，即设置表项<li>元素选中时的背景色。
（2）搭建框架
　　新建一个js文件，命名为jquery.lifocuscolor.js，并在文件中使用$.fn.extend()方法完成框架的大件。其实现的代码如下：

/*------------------------------------------------------------/
功能：设置列表中表项获取鼠标焦点时的背景色
参数：li_col【可选】 鼠标所在表项行的背景色
返回：原调用对象
示例：$("ul").focusColor("red");
/------------------------------------------------------------*/
;(function($){
    $.fn.extend({
        "yourPluginName":function(pram_value){
            //各种默认属性或参数的设置

            this.each(function(){
            //插件实现的代码
            })
        }
    })
})(jQuery);

（3）代码编写
　　根据功能描述，在搭建的框架中，首先，设置插件的默认属性值，由于允许用户设置自己的颜色值，因此，创建一个颜色参数，并对该值进行初始化设置，同时，根据参数是否为空，赋予该参数补贴的颜色值；另外，设置一个变量，保存丢失焦点时的颜色值，其实现的代码如下所示：

/// <reference path="jquery-1.4.2-vsdoc.js"/>
/// <reference path="jquery-1.4.2.js"/>
/*------------------------------------------------------------/
功能：设置列表中表项获取鼠标焦点时的背景色
参数：li_col【可选】 鼠标所在表项行的背景色
返回：原调用对象
示例：$("ul").focusColor("red");
/------------------------------------------------------------*/
; (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);

（4）引用插件
　　跟其他插件一样，先引入js我呢见，然后在js代码中调用该插件中的各种方法。如下所示：

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