第七章（插件的使用和写法）（7.6 编写 jQuery 插件）

7.6.1 插件的种类

编写插件的目的是给已经有的一系列方法或函数做一个封装，以便在其他地方重复使用，方便后期维护和提高开发效率。

jQuery 的插件主要分为3种类型。

1 封装对象方法的插件

这种插件是将对象方法封装起来，用于对通过选择器获取的 jQuery 对象进行操作，是最常见的一种插件。

据不完全统计，95%以上的 jQuery 插件都是封装对象方法的插件，此类插件可以发挥出 jQuery 选择器的强大优势。有相当一部分的 jQuery 的方法，都是在 jQuery 脚本库内部通过这种形式，“插”在内核上，例如 parent() 方法，appendTo() 方法和 addClass() 方法等不少DOM操作方法。

不少用户对 jQuer 没有提供 color() 方法而表示遗憾，不得不使用 css("color")来代替，下面会编写一个 color() 方法的 jQuery 插件。

2 封装全局函数的插件

可以将独立的函数加到 jQuery 命名空间之下，例如第一章提到解决冲突用的 jQuery.noConflict() 方法、常用的 jQuery.ajax() 方法以及去除首位空格的 jQuery.trim() 方法等，都是 jQuery 内部作为全局函数的插件附加到内核上去的。

3 选择器插件

个别情况下，会需要用到选择器插件，虽然 jQuery 的选择器十分强大，但还是会需要扩充一些自己喜欢的选择器，例如用： color(red) 来选择所有红色字的元素之类的想法。

7.6.2 插件的基本要点

♦ jQuery 插件的文件名推荐命名为 jquery.[插件名].js，以免和其他 .js 库插件混淆，例如: jquery.color.js

♦ 所有的对象方法都应当附加到 jQuery.fn 对象上，而所有的全局函数都应当附加到 jQuery 对象本身上

♦ 在插件内部，this 指向的是当前通过选择器获取的 jQuery 对象，而不是一般的方法那样，例如 click() 方法，内部的this 指向的是 DOM 元素

♦ 可以通过 this.each 来遍历所有元素

♦ 所有的方法或函数插件，都应当以分号结尾，否则压缩的时候可能出现问题。为了更稳妥些，甚至可以在插件头部先加上一个分号，以免他人的不规范代码给插件带来影响

♦ 插件应该返回一个 jQuery 对象，以保证插件的可链式操作，除非插件需要返回的是一些需要获取的量，例如字符串或者数组等

♦ 避免在插件内部使用 $ 作为 jQuery 对象的别名，而应使用完整的 jQuery 来表示，这样可以避免冲突。当然，也可以利用闭包技巧来回避这个问题，使插件内部继续使用 $ 作为 jQuery 的别名。

7.6.3 插件中的闭包

闭包：允许使用内部函数（即函数定义和函数表达式位于另一个函数的函数体内），而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数，当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包

闭包含义：即内部函数会在外部函数返回后被执行，而当这个内部函数执行时，它仍然必须访问其外部函数的局部变量、参数以及其他内部函数。这些局部变量、参数和函数声明（最初时）的值是外部函数返回时的值，但也会受到内部函数的影响。

利用闭包特性，既可以避免内部临时变量影响全局空间，又可以在插件内部继续使用 $ 作为 jQuery 的别名，常见的 jQuery 插件都是以下形式：

(function(){
   /*这里置放代码*/
})();

首先定义一个匿名函数 function(){  /*置放代码*/  }，然后用括号括起来，变成( function(){  /*置放代码*/  }) 这种形式，最后通过 () 这个运算符来执行，可以传递参数进去，以供内部函数使用。

// 注意为了更好的兼容性，开始前有个分号
; (function($){                     //此处将 $ 作为匿名函数的形参
         /*这里置放代码，可以使用 $ 作为 jQuery 的缩写别名*/
})(jQuery);                       // 这里就将 jQuery 作为实参传递给匿名函数了

上述代码是一种常见的 jQuery 插件结构。

代码 ：  

    ; (function($){
        // 这里编写插件的代码，可以继续是哦那个 $ 作为 jQuery 的别名
        // 定义一个局部变量 foo, 仅函数内部可以访问，外部无法访问

        var foo;
        var bar = function(){
            /*
                在匿名函数内部的函数都可以访问foo，即便是匿名函数的外部调用 bar()的时候，也可以在 bar() 的内部访问到 foo，但在匿名函数的外部直接访问 foo是做不到的
            */
        }

        /*
                下面的语句让匿名函数内部的函数 bar() 逃逸到全局可访问的范围内，这样就可以在匿名函数的外部通过调用 jQuery.BAR() 来访问内部定义的函数 bar()，并且内部函数 bar() 也能访问匿名函数内的变量 foo
        */
        $.BAR = bar;
    })(jQuery);

7.6.4 jQuery 插件的机制 

jQuery 提供了两个用于扩展 jQuery 功能的方法，即 jQuery.fn.extend() 方法和 jQuery.extend() 方法，前者用于扩展之前提到的3种类型插件中的第一种，后者用于扩展后两种插件。这两个方法都接受一个参数，类型为 Object，Object 对象的“名/值对”分别代表“函数或方法名/函数主体”

jQuery.extend() 方法除了可以用于扩展 jQuery 对象外，还有一个很强大的功能，就是用于扩展已有的 Object 对象。

jQuery 代码如下： 

jQuery.extend(target,obj1,..........[objN]);

用一个或多个其他对象来扩展一个对象，然后返回被扩展的对象。

例如合并 settings 对象和 options 对象，修改并返回 settings 对象

var settings = {validate: false, limit:5, name:"foo"};
var options  = {validate:true, name:"bar"};
var newOptions = jQuery.extend(settings, options);

// 结果为：
newOptions = {validate:true , limit: 5, name:"bar"};

jQuery.extend() 方法经常被用于设置插件方法的一系列默认参数，如下所示：

function foo(options){
    options = jQuery.extend({
        name: "bar",
        length: 5,
        dataType: "xml"   /*默认参数*/    
    }, options );         /*options 为传递的参数*/
};

如果用户调用 fooff() 方法的时候，在传递的参数 options 对象中设置了相应的值，那么就使用设置的值，否则使用默认值。代码如下：

foo({ name:"a",length:"4",dataType:"json" });
foo({ name:"a",length:"4" });
foo({ name:"a" });
foo();

通过使用 jQuery.extend() 方法，可以很方便的用传入的参数来覆盖默认值，此时，对方法的调用依旧保持一致，只不过要传入的是一个映射而不是一个参数列表。

特点： 这种机制比传统的每个参数都去检测的方式不仅灵活而且更简洁，此外，使用命名参数意味着再添加新选项也不会影响过去编写的代码，使代码更加直观明了。

7.6.5 编写 jQuery 插件

1 封装 jQuery 对象方法的插件

♣ 编写设置和获取颜色的插件

首先编写一个 color() 插件，该插件用于实现以下两个功能：

① 设置匹配元素的颜色

② 获取匹配的元素（元素集合中的第 1 个）的颜色

首先将该插件按规范命名为 jquery.color.js

然后在 Javascript 文件里搭好框架，如下：

; (function($){
     // 这里写插件代码
})(jQuery);

由于是对 jQuery 对象的方法扩展，因此采用扩展第 1 类插件的方法 jQuery.fn.extend() 来编写

; (function($){
   $.fn.extend({
       "color":function(value){
          // 这里写插件代码
        }
    });
})(jQuery);

这里给这个方法提供一个参数 value ，如果调用方法的时候传递了 valud 这个参数，那么就是用这个值来设置字体颜色，否则就是获取匹配元素的字体颜色的值。

首先实现第一个功能，设置字体颜色。

只需要简单地调用 jQuery 提供的 css() 方法，直接写成 this.css("color", value ) 即可。

注意：插件内部的 this 指向的是 jQuery 对象，而非普通的 DOM 对象，接下来要注意，插件如果不需要返回字符串之类的特定值，应当使其具有可链接性。为此，直接，直接返回这个 this 对象，由于 .css() 方法也会返回调用它的对象，即此处的 this  ， 因此可以将代码写成：

; (function($){
   $.fn.extend({
       "color":function(value){
           return this.css("color",value);
        }
   });
})(jQuery);    

接下来实现第二个功能，如果没有给方法传递参数，那么就是获取集合对象中第1个对象的 color 的值，由于 css() 方法本身就具有返回第 1 个匹配元素的样式值的功能，因此此处无需通过 eq() 来获取第1 个元素，只要将这两个功能结合起来，判断一下 value 是否是 undefined 即可。

jQuery 代码如下：

; (function($){
    $.fn.extend({
        "color":function(value){
            if(value == undefined){
                return this.css("color");
            }else{
                return this.css("color", value);
            }
        }
    });
})(jQuery);

此时，color() 插件的功能已经全部实现了。通过该插件可以获取和设置元素的 color 值。

实际上，css() 方法内部已经有判断 value 是否为 undefined 的机制，所以才可以根据传递参数的不同而返回不同的值。因此，可以借助 css() 方法的这个特性来处理该问题。 删除 if() 部分，最终剩余的代码实际上与先前那一段是一样的，jQuery 代码如下：

; (function($){
    $.fn.extend({
        "color":function(value){
                return this.css("color");
        }
    });
})(jQuery);

示例测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .a{color: red;}
    </style>
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<body>
<div class="a">red</div>
<div style="color:blue">blue</div>
<div style="color:green">green</div>
<div style="color:yellow">yellow</div>

<script type="text/javascript">
 // 插件编写
 ;(function($){
     $.fn.extend({
         "color":function(value){
             if(value == undefined){
                 return this.css("color");
             }else{
                 return this.css("color",value);
             }
         }
     });
 })(jQuery);
 // 插件应用
 $(function(){
     // 查看第一个 div 的color 样式值
     alert($("div").color()+"
 返回字符串，证明此插件可用。");

     // 把所有的 div 字体颜色设为红色
     alert($("div").color("red")+"
 返回object 证明得到的是 jQuery对象")
 })
</script>
</body>
</html>

 获取第一个元素的color值

 

设置元素的 color  属性为红色

如果需要定义一组插件，可以使用如下写法：

 ;(function($){
     "color":function(value){
         // 插件代码
     },
     "border":function(value){
         // 插件代码
     },
     "background":function(value){
         // 插件代码
     }
 })(jQuery);

 扩 展  

随机更换字体颜色

 // 插件编写
 ;(function($){
     $.fn.extend({
         "color":function(value){
             if(value == undefined){
                 return this.css("color");
             }else{
                 return this.css("color",value);
             }
         }
     });
 })(jQuery);
 // 插件应用
 $(function(){
     $("div").click(function(){
         var color = $(this).text();
         $("div").color(color);
     })
 })

点击文字，随机更换颜色

♣ 表格隔行变色插件

jQuery 代码如下：

<script>
  $(function(){
        $("tbody>tr:odd").addClass("odd");
        $("tbody>tr:even").addClass("even");
        $('tbody>tr').click(function() {
            //判断当前是否选中
            var hasSelected=$(this).hasClass('selected');
            //如果选中，则移出selected类，否则就加上selected类
            $(this)[hasSelected?"removeClass":"addClass"]('selected')
                //查找内部的checkbox,设置对应的属性。
                .find(':checkbox').attr('checked',!hasSelected);
        });
        // 如果单选框默认情况下是选择的，则高色.
        $('tbody>tr:has(:checked)').addClass('selected');
  })
</script>

首先把插件取名为：alterBgColor,然后为该插件方法搭好框架，jQuery 代码如下：

 // 插件编写
 ;(function($){
     $.fn.extend({
         "alterBgColor":function(options){
             // 插件代码
         }
     });
 })(jQuery);

框架完成后，接下来需要为 options 定义默认值，默认构成这样 ({odd:“odd”,even:"even",selected:"selected"}) 一个Object 。这样就可以通过 $("#sometable").alterBgColor({odd:“odd”,even:"even",selected:"selected"}) 自定义奇偶行的样式类名以及选中后的样式类名。同时，直接使用 $("#sometable").alterBgColor() 就可以应用默认的样式类名。

jQuery 代码如下：

; (function($){
    $.fn.extend({
        "alterBgColor":function(options){
            options = $.extend({
                odd:"odd",  /*偶数行样式*/
                even:"even", /*奇数行样式*/
                selected:"selected"  /*选中行样式*/
            },options);
        }
    });
})(jQuery);

如果在后面的程序中需要使用 options 对象中的属性，可以使用如下方式来获得：

options.odd;   //获取options 对象中的 odd属性的值
options.even;  //获取options 对象中的 even属性的值
options.selected  //获取options 对象中的 selected属性的值

接下来就需要把这些值放到程序中，来代替先前程序中的固定值。

最后就是匹配元素的问题了，显然不能直接用 $("tbody>tr")选择表格行，这样会使页面中全部的 <tr>元素都隔行变色，应该使用选择器选中某个表格，然后执行 alterBgColor() 方法后，将对应的表格内<tr>元素进行隔行变色。因此，需要把所有通过 $("tbody>tr")选择的对象改写成 $("tbody>tr", this),表示在匹配的元素内（当前表格内）查找，并应用上一步中的默认值。

jQuery 代码如下：

    ;(function($) {
        $.fn.extend({
            "alterBgColor":function(options){
                //设置默认值
                options=$.extend({
                    odd:"odd",    /* 偶数行样式*/
                    even:"even", /* 奇数行样式*/
                    selected:"selected" /* 选中行样式*/ 
                },options);
                $("tbody>tr:odd",this).addClass(options.odd);
                $("tbody>tr:even",this).addClass(options.even);
                $('tbody>tr',this).click(function() {
                    //判断当前是否选中
                    var hasSelected=$(this).hasClass(options.selected);
                    //如果选中，则移出selected类，否则就加上selected类
                    $(this)[hasSelected?"removeClass":"addClass"](options.selected)
                        //查找内部的checkbox,设置对应的属性。
                        .find(':checkbox').attr('checked',!hasSelected);
                });
                // 如果单选框默认情况下是选择的，则高色.
                $('tbody>tr:has(:checked)',this).addClass(options.selected);
                return this;  //返回this，使方法可链。
            }
        });
    })(jQuery);

在代码最后，返回this ，让这个插件具有可链性。

测试插件

构建2个表格

<title></title>
    <style type="text/css">
    table        { border:0;border-collapse:collapse;}
    td    { font:normal 12px/17px Arial;padding:2px;width:100px;}
    th            { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px    solid #333;}
    .even        { background:#FFF38F;}  /* 偶数行样式*/
    .odd        { background:#FFFFEE;}  /* 奇数行样式*/
    .selected    { background:#FF6500;color:#fff;}
    </style>
</head>
<body>
<table id="table1">
    <thead><tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="choice" value=""/></td>
            <td>张山</td>
            <td>男</td>
            <td>浙江宁波</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" value="" /></td>
                <td>李四</td>
            <td>女</td>
            <td>浙江杭州</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" value="" checked="checked" /></td>
                    <td>王五</td>
            <td>男</td>
            <td>湖南长沙</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" value="" /></td>
            <td>找六</td>
            <td>男</td>
            <td>浙江温州</td>    
        </tr>
        <tr>
        <td><input type="checkbox" name="choice" value="" /></td>
                <td>Rain</td>
            <td>男</td>
            <td>浙江杭州</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" value="" checked="checked" /></td>
            <td>MAXMAN</td>
            <td>女</td>
            <td>浙江杭州</td>
        </tr>
    </tbody>
</table>


<br /><br />


<table id="table2">
    <thead><tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="choice" value=""/></td>
            <td>张山</td>
            <td>男</td>
            <td>浙江宁波</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" value="" /></td>
                <td>李四</td>
            <td>女</td>
            <td>浙江杭州</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" value="" checked="checked" /></td>
                    <td>王五</td>
            <td>男</td>
            <td>湖南长沙</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" value="" /></td>
            <td>找六</td>
            <td>男</td>
            <td>浙江温州</td>    
        </tr>
        <tr>
        <td><input type="checkbox" name="choice" value="" /></td>
                <td>Rain</td>
            <td>男</td>
            <td>浙江杭州</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" value="" checked="checked" /></td>
            <td>MAXMAN</td>
            <td>女</td>
            <td>浙江杭州</td>
        </tr>
    </tbody>
</table>
</body>

应用插件

// 插件应用
$(function(){
    $("#table2")
        .alterBgColor()   //应用插件
        .find("th").css("color","red");   // 可链式操作
})

 

注意：

jQuery 的选择符可能会匹配1个或多个元素，因此，在编写插件时必须考虑到这些情况，可以在插件内部调用 each() 方法来遍历匹配元素，然后执行相应的方法，this 会依次引用每个 DOM 元素

;(function($){
    $.fn.extend({
        "somePlugin":function(options){
            return this.each(function(){
                // 这里置放插件代码
            });
        }
    });
})(jQuery);

2 封装全局函数的插件

这类插件是在 jQuery 命名空间内部添加一个函数

示例：新增两个函数，用于去除左侧和右侧的空格，虽然 jQuery 已经提供了 jQuery.trim() 方法来去除两端空格，但在某些情况下，会只希望去除某一侧的空格

去除左侧、右侧的空格的函数分别写成如下 jQuery 代码：

function ltrim(text){     // 去除左侧空格
    return (text || "").replace(/^s+/g,"");
}
function rtrim(text){     // 去除右侧空格
    return (text || "").replace(/^s+/g,"");
}

♦  （text || " "）部分是用于防止传递进来的 text 这个字符串变量处于未定义之类的特殊状态，如果 text 是 undefined，则返回字符串 “ ”，否则返回字符串 text 。这个处理是为了保证接下来的字符串替换方法 replace() 方法不好出错。

♦ 运用了正则表达式替换首末的空格

函数写完之后，就可以放在 jQuery 命名空间下，代码简单，而且可以批量完成。

首先构建一个 object 对象，把函数名和函数都放进去，其中的名/值对分部为函数名和函数主题，代码如下：

{
    ltrim: function(text){
        return (text || "").replace(/^s+/g,"");
    },
    rtrim: function(text){
        return (text || "").replace(/^s+/g,"");
    }
}

然后，利用 jQuery.extend() 方法直接对 jQuery 对象进行扩展。

//插件编写
;(function($) {
    $.extend({
        ltrim :    function( text ) {
            return (text ||    "").replace( /^s+/g, "" )
        },
        rtrim :    function rtrim(    text ) {
            return (text ||    "").replace( /s+$/g, "" )
        }
    });
})(jQuery);

应用代码：

//插件应用
$(function(){
    $("#trimTest").val(
        jQuery.trim("       test      ") + "
" +
        jQuery.ltrim("       test      ") + "
" +
        jQuery.rtrim("       test      ")
    );
})

</script>
</head>
<body>
<textarea id="trimTest" rows="5" cols="20"></textarea>

效果如上图：第一行字符串左右两侧空格都被删除。第二行只有左侧删除，第三行只有右侧删除。

3 自定义选择器  

jQuery 提供了一套方法让用户可以通过制作选择器插件来使用自定义的选择器，从而使 jQuery 的选择器功能更加完善。

jQuery 的选择符解析器首先会使用一组正则表达式来解析选择器，然后针对解析出的每个选择符执行一个函数，称为选择器函数。最后根据这个选择器函数的返回值为 true 还是 false 来决定是否保留这个元素。这样就可以找到匹配的元素节点。

选择器示例： 

$("div:gt(1)");

该选择器首先会获取所有的 <div> 元素，然后隐式遍历这些 <div> 元素，并逐个将这些 <div> 元素作为参数，连同括号里的 “1” 等一些参数一起传递给 gt 对应的选择器函数进行判断。如果这个函数返回 true，则这个 <div> 元素保留，如果返回false ，则不保留这个 <div>元素。这样得到的结果就是一个符合要求的 <div> 元素集合。

：gt() 选择器在 jQuery 源文件中的代码如下：

gt: function(a,i,m){
   return i>m[3]-0;
}

// 其中，选择器的函数一共接受3个参数

第1个参数为 a，指向的是当前遍历到的 DOM 元素。

第2个参数为  i，指的是当前遍历到的 DOM 元素的索引值，从0开始。

第3个参数为 m，最为特别，它是由 jQuery 正则引擎进一步解析后的产物（用 match 匹配出来的），是一个数组。

 ♣   m[0],以上面的 $("div:gt(1)") 这个例子来讲，是 :gt(1) 这部分。它是 jQuery 选择器进一步将要匹配的内容

 ♣   m[1],这里是选择器的引导符，匹配例子中的 “：”,即冒号。并非只能使用“：”后面跟上选择器，用户还可以自定义其他的选择器引导符

 ♣   m[2],即例子中的 gt ，确定究竟是调用哪个选择器函数

 ♣   m[3],即例子中括号里的数字“1”，它非常有用，是编写选择器函数最重要的一个参数

 ♣   m[4],上面的例子中没有体现出来，这个比较罕见。例如 “div: l(ss(dd))” 这样一个选择器中，m[4]就指向了（dd）这部分，注意是带括号的（dd）而不只是 dd。同时要注意，此时的 m[3]的值是 ss(dd)而非ss。

jQuery 已经提供了 lt 、gt和eq 等选择器，却没有提供 le（小于等于）、ge（大于等于）和 between（两者之间）之类的选择器。

编写一个 between 选择器。 

例如使用 $("div:between(2,5)") 能实现获取索引值为3、4元素的功能。

首先，构建选择器函数

    function(a , i ,m){
        var tmp = m[3].split(","); // 将传递进来的 m[3] 以逗号为分隔符，转成一个数组
        return tmp[0]-0<i&&i<tmp[1]-0;  // i>2  &&  i<5
    }

函数解释如下：

第一行，将传递进来的 m[3] 以逗号为分隔符，转成一个数组。m[3]此时的值应该是 “2，5” ，是一个字符串，随后放入临时变量 tmp 中待用。

第二行，直接将得到的 2和5 与 i 进行比较，i 大于2 并且小于 5 的元素都将得到保留。注意，此处使用一个小技巧，通过 tmp[0]-0 将本来的 “2” 这个字符串转换成了数字 2，然后再与 i 进行比较。

接下来，扩展成 jQuery 选择器

        //插件编写
        ;(function($) {
            $.extend(jQuery.expr[":"], {
                between :    function( a , i ,m ) {
                    var tmp=m[3].split(","); //将传递进来的m[3]以逗号为分隔符，切成一个数组
                    return tmp[0]-0<i&&i<tmp[1]-0;
                }
            });
        })(jQuery);

这里再次利用 jQuery.extend() 方法来对 jQuery 对象的一部分进行扩展。选择器仅仅是 jQuery.expr[":"] 对象的一部分，同时也是一个 object对象，因此可以直接利用 jQuery.extend() 对其进行扩展。

最后把选择器放入页面获取元素：

    <script    type="text/javascript">
        //插件编写
        ;(function($) {
            $.extend(jQuery.expr[":"], {
                between :    function( a , i ,m ) {
                    var tmp=m[3].split(","); //将传递进来的m[3]以逗号为分隔符，切成一个数组
                    return tmp[0]-0<i&&i<tmp[1]-0;
                }
            });
        })(jQuery);

        //插件应用
        $(function(){
            alert("执行前");
            $("div:between(2,5)").css("background","white");
            alert("执行后");
        })
    </script>
</head>
<body>
<div style="background:red">0</div>
<div style="background:blue">1</div>
<div style="background:green">2</div>
<div style="background:yellow">3</div>
<div style="background:gray">4</div>
<div style="background:orange">5</div>

在图二中，索引为 3 / 4 的背景颜色以修改为 白色“white” 。