如何创建一个jQuery插件

jQuery正在大约60.000.000个站点中使用, 由于它的简单性和性能, 它已成为每个网站都应使用的基本库。

以下简单结构将定义我们的jQuery插件, 我们将准备创建自定义函数。

(function($){
	$.fn.extend({
            // an object with our functions
        });
})(jQuery);

结构与普通库几乎相同, 但是我们将接收jQuery, 而不是接收window对象。请注意, 你显然需要在插件之前加载jQuery。

jQuery是面向对象的, 因此我们的函数将具有我们赋予对象键的名称, 例如：

{
  // This will paint the background color of a div with our given value.
  myCustomAlert:function(color){
      this.css({
         backgroundColor:color
      });
  }
}

// Then we will call it like this :

$('#myselector').myCustomAlert('red');

如果你的插件不需要选择器, 但仍然需要jQuery, 则可以使用函数为jQuery创建一个属性, 例如

var createAlert = {
   showAlert : function(){
      // The code that will show the alert
   },    hideAlert : function(){
      // the code that will hide the alert
   }
};

$.myCustomAlert = createAlert;
// or if you want jQuery instead $
jQuery.myCustomAlert = createAlert;

// Then execute your plugin like this

$.myCustomAlert.showAlert();

这就是你要创建自己的jQuery插件时需要知道的所有内容。现在让我们创建更复杂的东西！

以下插件将在上一次keyup事件之后每隔x毫秒执行一次功能, 当你想要创建自动完成功能或提高每次用户按下键时执行的功能的性能时, 此功能很有用。玩以下小提琴, 可以在javascript选项卡中查看源代码。

玩得开心, 创建自己的jQuery插件！