jQuery 插件

# 全局插件模板

/**

 * 封装全局函数的插件模板

 */

;

(function($) {

    $.extend({

        "project": function(value) {

            // 这里写插件代码

            return 'OK';

        }

    });

})(jQuery);

// 插件应用

$(function() {

    alert(jQuery.project());

});

# 封装对象方法的插件模板

/**

 * jQuery 颜色插件

 * 采用封装对象方法的方式

 */

// 1. 基本框架

// 前面写 ; 是因为防止其他插件的结尾没有写分号，打包的时候出错

;

(function($) {

    // 插件代码

})(jQuery);

// 2. 采用扩展 jQuery.fn.extend() 的方法

;

(function($) {

    $.fn.extend({

        "color": function(value) {

            // 这里写插件代码

            // 设置元素的color，如果value==null，则返回元素本身的color值

            return this.css('color', value);

        }

    });

})(jQuery);

// 3. 插件应用

$(function(){

    alert($('div').color());

    alert($('div').color('red'));

})

# 自定义选择器插件

/**

 * 自定义选择器插件

 */

;

(function($) {

    $.extend($.expr[':'], {

        "between": function(a, i, m) {

            var tmp = m[3].split(',');

            return tmp[0]-0 < i && i < tmp[1] - 0;

        }

    });

})(jQuery);

// 插件应用

$(function() {

    $('div:between(2, 5)').css('background', 'white');

});