第八周作业

如何编写jQuery自定义插件

　　最近了解到jQuery的两种自定义插件方法，一种是自定义对象级插件方法，另一种是自定义类级插件方法。

　　以下是我对jQuery自定义插件的了解与实践，实例代码是自己编写的，有什么不对的地方，请多多指点。

　　（一）自定义对象级插件有如下两种形式：
　　　　形式一：

(function($){        
	$.fn.extend({        
		pluginName:function(opt,callback){        
                      // Our plugin implementation code goes here.          
		}        
	})        
})(jQuery);             

　　　　形式二：

(function($) { 
    $.fn.pluginName = function() { 
        // Our plugin implementation code goes here. 
    }; 
})(jQuery);     

　　　　对象级形式一（设置焦点颜色）插件实例：

(function(){
    $.fn.extend({
        focusColor: function(li_col)    {
            var def_col = "#ccc";    //默认获取焦点的色值
            var lst_col = "#fff";    //默认丢失焦点的色值
            //如果设置的颜色不为空，使用设置的颜色，否则为默认色
            li_col = (li_color == undefined) ? del_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.extend({ 
    pluginName: function() { 
        // Our plugin implementation code goes here. 
    }, 
    pluginName: function(param) { 
        // Our plugin implementation code goes here. 
    } 
});    

　　　　类级别插件（两数相加/减）实例：

(function(){
    $.extend({
        addNum: function(p1,p2) {
            //如果传入的数字不为空，使用传入的数字，否则为0
            p1 = (p1 == undefined) ? 0 : p1;
            p2 = (p2 == undefined) ? 0 : p2;
            var intResult = parseInt(p1) + parseInt(p2);
            return intResult;
        },
        subNum: function(p1,p2) {
            //如果传入的数字不为空，使用传入的数字，否则为0
            p1 = (p1 == undefined) ? 0 : p1;
            p2 = (p2 == undefined) ? 0 : p2;
            if(p1>p2) {
                var intResult = parseInt(p1) - parseInt(p2);
            }
            return intResult;
        }
    });
})(jQuery);