jQuery自定义插件开发

喜欢使用jQuery的朋友，或许在经过一段时间的使用以后，可能会感觉这个插件少一点了自己想要的某些功能。其实jQuery支持插件开发模式，简单容易！

如以下代码:

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

使用的时候可以直接

// 调用定义的方法名
$('#id').plugin_name();

我们这里主要以颜色赋值的实例来谈谈插件的具体模式开发！我们首先需要两个方法，一个是color前景颜色设置，一个是bgcolor背景颜色设置。

(function($) {
  // 前景颜色设置方法
  $.fn.color = function(color_value){ 
    // 如果没有传进色值默认使用白色
    var color = color_value || '#000';
    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;text-align:center;padding:30px;">
  jQuery自定义插件开发
</div>

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

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

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

改成

// 设置前景，并且修改背景
$('#info').color('red').bgcolor('blue');

运行报错:

TypeError: $('#info').color('red') is undefined

要return返回this对象

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

    // 添加这一句以便支持链式操作
    return this;
  };

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

    // 添加这一句以便支持链式操作
    return this;
  };
 
})(jQuery);

这样就OK了，jQuery还有很多规范以及公用的API，需要进一步了解的童鞋建议去下载手册细读！不少童鞋使用jQuery开发插件多半是因为它的选择器非常强大！借助它的选择器然后去拓展实际开发中需要的一些功能，非常的方便！