jQuery自定义插件开发初尝试

2017-08-09

不少童鞋使用jQuery开发插件多半是因为它的选择器非常强大！借助它的选择器然后去拓展实际开发中需要的一些功能，非常的方便！

插件开发基础结构

// 插件代码开始
(function($) {
   // 插件名称命名
   $.fn.fun_name = function(){
       // 代码处理块
   };

})(jQuery);
// 插件代码结束

//使用的时候可以直接
$('#id').fun_name();

简单实例

我们首先需要两个方法，一个是color前景颜色设置，一个是bgcolor背景颜色设置。

(function($) {
    // 前景颜色设置方法
    $.fn.color = function(color_value){
        // 如果没有传进色值默认使用白色
        var color = color_value || '#FFF';
        this.css('color',color);
    };

    // 背景颜色设置方法
    $.fn.bgcolor = function(color_value){
        // 如果没有传进色值默认使用白色
        var color = color_value || '#FFF';
        this.css('background',color);
    };

})(jQuery);

// 前景设置红色
$('#info').color('red');
// 背景设置蓝色
$('#info').bgcolor('blue');

//html代码
<div id="info" style="width:200px; height:100px;">jQuery自定义插件开发！</div>

这样就完成一个简单的自定义插件开发了。细心的童鞋可能注意到我执行代码不是链式操作，把

// 前景设置红色
$('#info').color('red');
// 背景设置蓝色
$('#info').bgcolor('blue');

改成

1 2	// 设置红色 $('#info').color('red').bgcolor('blue');

发现浏览器会报错

如果需要在自定义方法里需要链式操作需要return返回this对象。

(function($) {
    // 前景颜色设置方法
    $.fn.color = function(color_value){
        // 如果没有传进色值默认使用白色
        var color = color_value || '#FFF';
        this.css('color',color);

        // return this 支持链式操作
        return this;
    };

    // 背景颜色设置方法
    $.fn.bgcolor = function(color_value){
        // 如果没有传进色值默认使用白色
        var color = color_value || '#FFF';
        this.css('background',color);

        // return this 支持链式操作
        return this;
    };

})(jQuery);


// 设置红色
$('#info').color('red').bgcolor('blue');

这样就OK了，其实jQuery还有很多规范以及公用的api，需要进一步了解的童鞋建议去下载手册细读！