jQuery插件分类：

1.封装方法插件（常用）

是对象级别的插件，通过jQuery选择器获取对象，然后为对象添加方法。即可使用，例如：$("li").foucsColor();

编写简单，容易调用。

2.封闭函数插件

是类级别的插件，就是可以直接给jQuery添加静态方法。类似于$.ajax(),$.trim();

3.选择器插件（很少用）

插件开发要点：

1.插件名称必须遵循jQuery.[插件名称].js，例如：jQuery.newplugin.js

2.对象级别插件，使用jQuery.fn.extend()方法进行扩展

类级别插件，使用jQuery.extend()方法进行扩展

3.结尾都必须以;结尾

4.插件内部可以使用this来获取元素，this.each遍历全部元素

5.为了保证jquery原有的能使用方法链的形式调用多个方法，每个插件本身最后比较返回一个jquery对象，也就是this

插件开发示例：

1、对象级别插件开发示例：jquery.lifocuscolor.js

/*-----------------------------------/
功能：设置ul中li的鼠标经过和离开背景色
参数：【li_col】可选，鼠标所在行的颜色
返回：原调用的对象
示例：$("ul").focusColor();  或者$("ul").focusColor("red");
/-----------------------------------*/
;(function($){
    $.fn.extend({
        "focusColor":function(li_col){//focusColor表示插件名称，li_col表示调用该函数时参数
            //插件具体代码开始
            //1.设置默认属性
            var def_col = "#ccc";
            var lst_col = "#fff";
            li_col = (li_col == undefined)?def_col:li_col;
            //2.插件实现代码
            this.find("li").each(function(index, el) {
                $(this).mousemove(function() {//鼠标经过
                    $(this).css("background-color",li_col);
                }).mouseout(function() {//鼠标离开
                    $(this).css("background-color","#fff");
                });
                return $(this);//返回jQuery对象
            })
            //插件具体代码结束
        }
    })
})(jQuery);

测试jquery.lifocuscolor.js插件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="jquery.lifocuscolor.js"></script>
<script type="text/javascript">
$(function(){
    // $("#ul").focusColor();//使用默认样式
    $("#ul").focusColor("red");//鼠标经过红色
});
</script>
<title>测试lifocuscolor插件</title>
</head>
<body>
  <ul id="ul">
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>赵六</li>    
  </ul>
</body>
</html>

默认样式调用结果：

使用红色调用结果：

2、类级别插件开发示例：jquery.twoaddresult.js

/*-----------------------------------/
功能：计算两个数字相加或相减的结果
参数：数字p1，p2
返回：原调用的对象
示例：$.addNum(1,2);  $.subNum(4,2);
/-----------------------------------*/
;(function($){
    $.extend({
        "addNum":function(p1,p2){//两数相加
            p1 = (p1 == undefined)?0:p1;
            p2 = (p2 == undefined)?0:p2;
            var resultInt = parseInt(p1) + parseInt(p2);
            return resultInt;
        },
        "subNum":function(p1,p2){//两数相减
            var resultInt = 0;
            p1 = (p1 == undefined)?0:p1;
            p2 = (p2 == undefined)?0:p2;
            if (p1 > p2) {
                resultInt = parseInt(p1) - parseInt(p2);    
            };      
            return resultInt;
            return $(this);
        }
    }); 
})(jQuery);

测试twoaddresult插件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="jquery.twoaddresult.js"></script>
<script type="text/javascript">
$(function(){
    console.info($.addNum(-2,2));//0
    console.info($.subNum(4,2));//2    
});
</script>
<title>测试twoaddresult插件</title>
</head>
<body>     
</body>
</html>

来自为知笔记(Wiz)