jQuery插件编写步骤详解

本文实例讲述了jQuery插件编写步骤。分享给大家供大家参考，具体如下：

如今做web开发，jquery 几乎是必不可少的，就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jquery好处这里就不再赘述了，用过的都知道。今天我们来讨论下jquery的插件机制，jquery有着成千上万的第 三方插件，有时我们写好了一个独立的功能，也想将其与jquery结合起来，可以用jquery链式调用，这就要扩展jquery，写成插件形式了，如下 面就是一个简单扩展Jquery对象的demo：

//sample:扩展jquery对象的方法，bold()用于加粗字体。(function ($) {  $.fn.extend({    "bold": function () {      ///<summary>      /// 加粗字体      ///</summary>      return this.css({ fontWeight: "bold" });    }  });})(jQuery);

调用方式：

这是一个非常简单的扩展。接下来我们一步步来解析上面的代码。

一、jquery的插件机制

为了方便用户创建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。

1. jQuery.extend() 方法有一个重载。

jQuery.extend(object) ,一个参数的用于扩展jQuery类本身，也就是用来在jQuery类/命名空间上增加新函数，或者叫静态方法，例如jQuery内置的 ajax方法都是用jQuery.ajax()这样调用的，有点像 "类名.方法名" 静态方法的调用方式。下面我们也来写个jQuery.extend(object)的例子：

//扩展jQuery对象本身jQuery.extend({  "minValue": function (a, b) {    ///<summary>    /// 比较两个值，返回最小值    ///</summary>    return a < b ? a : b;  },  "maxValue": function (a, b) {    ///<summary>    /// 比较两个值，返回最大值    ///</summary>    return a > b ? a : b;  }});//调用var i = 100; j = 101;var min_v = $.minValue(i, j); // min_v 等于 100var max_v = $.maxValue(i, j); // max_v 等于 101

重载版本：

jQuery.extend([deep], target, object1, [objectN])

用一个或多个其他对象来扩展一个对象，返回被扩展的对象。
如果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。
如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。
未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。

参数：

   deep:       可选。如果设为true，则递归合并。
   target:     待修改对象。
   object1:   待合并到第一个对象的对象。
   objectN:   可选。待合并到第一个对象的对象。

示例1：

合并 settings 和 options，修改并返回 settings。