jquery插件的写法

浏览数：45 / 时间：2015年06月09日

一.JQuery的插件主要分为3种：

1.封装对象方法的插件。

如JQuery的parent()方法，appendTo()方法，addClass()方法等。

2.封装全局函数的插件。

如JQuery.ajax()，JQuery.trim()方法

3.选择器插件。

二.JQuery的插件机制：

i.JQuery提供了两个用于扩展JQuery功能的方法，jQuery.fn.extend()方法和jQuery.extend()方法。前者用于扩展前面的提到的第一种插件，后者用于扩展后两种插件。这两个方法都接收一个类型为Object的参数。

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

iii.在插件内部，this指向JQuery对象。

iv.插件应结尾加分号，避免压缩带来错误。在开头也最好加分号，避免他人的不规范代码给插件带来影响。

v.插件应该返回一个JQuery对象，以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量。

三.插件示例：

1.封装JQuery对象方法的插件。

下面是一个简单的color插件，主要实现获取和配置元素颜色的功能。

首先创建jquery.color.js文件。

搭好框架：

;(function($){

})(jQuery);

由于是对JQuery对象方法的扩展，采用jQuery.fn.extend()来写：

;(function($){

        jQuery.fn.extend({
        
        });
        
})(jQuery);

完成color的功能：

;(function($){

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

测试插件：test_color.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.color.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="b" style="color:blue">blue</div>
<div style="color:green">green</div> 
<script type="text/javascript">
$(function(){
  console.log($("#b").color() + "返回字符串，证明此插件可用。");
  console.log($("div").color("red"));
});
</script>              
</body>
</html>

测试效果：

说明：

做一个稍微复杂一点的封装对象的插件，表格隔行变色的插件。

jquery.alterbgcolor.js

;(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);
                $(this)[hasSelected?"removeClass":"addClass"](options.selected).find(‘:checkbox‘).prop(‘checked‘,!hasSelected);
            });
            $(‘tbody>tr:has(:checked)‘,this).addClass(options.selected);
            return this;
        }
    });
})(jQuery);

使用示例：

test-altercolor.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.alterbgcolor.js"></script>
<style type="text/css">
.odd{
    background-color: gray;
}
.even{
    background-color: white;
}
.selected{
    background-color:yellow;
}
</style>
</head>
<body>
    <table id = "table2">
        <tr>
            <th></th>
            <th>name</th>
            <th>score</th>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Smith</td> 
            <td>50</td>
          </tr>
          <tr>
            <td><input type="checkbox" /></td>
            <td>Jackson</td> 
            <td>94</td>
          </tr>
          <tr>
            <td><input type="checkbox" /></td>
            <td>Smith</td> 
            <td>50</td>
          </tr>
          <tr>
            <td><input type="checkbox" /></td>
            <td>Jackson</td> 
            <td>94</td>
          </tr>
    </table>
<script type="text/javascript">
$("#table2").alterBgColor().find("th").css("color","red");
</script>              
</body>
</html>

2.封装全局函数的插件。

这类插件是在jQuery的命名空间内部添加一个函数。例如新增两个函数用于去除左侧和右侧的空格。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
;(function($){
    $.extend({
        ltrim:function(text){
            return(text || "").replace(/^\s+/g, "");
        },
        rtrim:function(text){
            return(text || "").replace(/\s+$/g, "");
        }
    });
})(jQuery);

var str = "    test    ";
console.log(str + "|");
console.log(jQuery.trim(str) + "|");
console.log(jQuery.ltrim(str) + "|");
console.log(jQuery.rtrim(str) + "|");
</script>              
</body>
</html>

3.自定义选择器。

　　jQuery提供了一套方法让用户可以通过制作选择器插件来使用自定义选择器。

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

　　例如：$("div:gt(1)")

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

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

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

　　其中，选择器函数一共接受3个参数，代码如下:

　　function(a,i,m){}

　　第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选择器。

<script>
//插件编写
;(function($){
    $.extend(jQuery.expr[":"],{
        between:function(a, i, m){
            var temp = m[3].split(",");
            return i > tmp[0]-0 &&　i < tmp[1]-0;
        }
    })
})(jQuery);
//插件应用
$(function(){
    $("div:between(2,5)").css("background","white");
});
</script>
<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>
<div style="background:red">6</div>