编写jQuery插件（三）——三个插件例子

封装jQuery对象方法的插件

表格隔行变色插件

CSS部分：

.even{
    background:#CCC;
}
.odd{
    background:#666;
}
.selected{
    background:#F90;
}

DOM结构：

<table id="table1">
<tbody>
<tr><th>选择</th><th>姓名</th><th>性别</th></tr>
<tr><td><input type="checkbox" checked="checked" /></td><td>小明</td><td>男</td></tr>
<tr><td><input type="checkbox" /></td><td>小花</td><td>女</td></tr>
<tr><td><input type="checkbox" /></td><td>小红</td><td>女</td></tr>
<tr><td><input type="checkbox" /></td><td>小华</td><td>男</td></tr>
</tbody>
</table>

插件部分：

;(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 isSelected=$(this).hasClass(options.selected);//返回布尔值，判断是否已被选中
                //如果被选中就移出selected类，否则加上selected类
                $(this)[isSelected?"removeClass":"addClass"](options.selected)//removeClass(myclass)或者addClass(myclass)
                //查找内部的checkbox，设置对应的属性
                .find(':checkbox').attr('checked',!isSelected);//v1.7.1正常，v1.11.1经测试在IE9及以上版本点击复选框外的地方，checkbox不能交替选择            });
            });
            //如果单选框默认情况下是选择的，则高亮
            $('tbody>tr:has(:checked)',this).addClass(options.selected);
            return this;    //返回this,使方法可链
        }
    });
})(jQuery);

插件使用：

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

封装jQuery全局函数的插件

去除左侧和右侧的空格

插件部分：

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

插件使用：

alert(jQuery.trim("  Hello  ")+jQuery.ltrim("   World")+jQuery.rtrim("!    "));

自定义选择器

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

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

DOM结构：

<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>

插件定义：

;(function($){
    $.extend(jQuery.expr[":"],{
        /*
　　　　　选择器仅仅是jQuery.expr[":"]对象的一部分，同时也是一个Object对象，因此可以直接利用jQuery.extend()对其扩展
        a指向当前遍历到的DOM元素
        i指的是当前遍历到的DOM元素的索引值，从0开始
        m，由jQuery正则解析引擎进一步解析后的产物（用match匹配出来），是一个数组
        以$("div:gt(1)")为例：
        m[0],指:gt(1)
        m[1]，指":",即冒号。当然并非只能使用“：”后面跟上选择器，用户可以自定义其他的选择引导符
        m[2]，指gt，确定选择器选择器函数
        m[3],指数字“1"
        m[4],如果是div:l(ss(dd))这样一个选择器，m[4]指向(dd)这部分，注意是带括号的(dd)，此时的m[3]的值是ss(dd)而非ss
        */
        between:function(a,i,m){
            var tmp=m[3].split(",");//将传递进来的m[3]以逗号为分隔符，切成一个数组
            return tmp[0]<i&&i<tmp[1];
        }
    });
})(jQuery);

插件应用：

$(function(){
    $("div:between(2,5)").css("background","white");//经测试jquery v1.11.1版本不支持
})