首页 > 代码库 > 编写jQuery插件（三）——三个插件例子

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

2024-08-02 06:51:45   221人阅读

封装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版本不支持})

 

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


联系
我们