jQuery插件示例笔记

插件的种类

1. 封装对象方法的插件

将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作。

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

2. 封装全局函数的插件

可以将独立的函数加到jQuery命名空间之下。

3. 选择器插件

扩充自己的选择器

插件示例

设置颜色插件

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

            //css()方法内部已经有了判断value是否为undefined的机制，所以可以采用下面的写法
            return this.css("color", value);
        },
        "border": function (value) { },
        "background": function (value) {
            return this.css('background', value);
        }
    });
})(jQuery);

设置表格插件，奇偶行，选中状态

(function ($) {
    $.fn.extend({
        "alterBgColor": function (options) {
            options = $.extend({
                odd: "odd",     //偶数行样式
                even: "even",   //奇数行样式
                selected:"selected"     //选中行样式
            },options);
            
            return this.each(function () {
                $("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);
            });
        }
    });
})(jQuery);

去除头部空格，尾部空格插件

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

选择器插件，选择范围。

jQuery1.3版本能用，1.8及以后版本不能使用

(function ($) {

    $.fn.extend(jQuery.expr[':'], {
        between2: function (a, i, m,arr) {
            var tmp = m[3].split(',');
            var ret = tmp[0] - 0 < i && i < tmp[1] - 0;
            return ret;
        },
        ge: function (a, i, m) {
            return i >= m[3] - 0;
        },
        le: function (a, i, m) {
            return i <= m[3] - 0;
        }
    });
})(jQuery);