jQuery插件开发的两种方法及$.fn.extend的详解

jQuery插件是能够方便地扩展jQuery的方法和功能的一种方式。这里我们将会介绍jQuery插件的两种方法以及$.fn.extend的详解。

方法一：扩展jQuery对象

可以通过扩展jQuery对象来创建一个插件。我们可以将新的方法或属性添加到jQuery.prototype中，这样我们创建的新的插件就可以被jQuery对象所调用。

下面是一个示例代码：

// 创建一个jQuery插件
$.fn.greenify = function () {
  this.css("color", "green");
  return this;
};

// 使用插件
$("p").greenify();

上面代码中，$.fn 表示jQuery.prototype，我们将新的方法 greenify() 添加到了jQuery对象中。 执行 $("p").greenify(); 时，所有p元素的颜色将会被改为绿色。

方法二：通过单独的函数创建插件

在jQuery插件中，jQuery对象并不总是必须的。我们可以通过创建一个单独的函数来创建一个插件。这个插件可以是任何你想要的功能，不一定要调用jQuery对象。

下面是一个示例代码：

// 创建一个不依赖于jQuery对象的插件
function sayHello() {
  alert("Hello, world!");
}

// 使用插件
sayHello();

上面代码中，我们只是创建了一个简单的JavaScript函数， 它没有接收参数，也没有返回值。 当调用 sayHello(); 时，浏览器将弹出一个“Hello, world！” 对话框。这个例子中，我们没有用到jQuery对象。

$.fn.extend的详解

$.fn.extend() 方法在开发插件中也是一个非常重要的方法，它可以将多个对象合并成一个新的对象。 通常还会结合使用 $.fn 方法，这样我们就可以快速的扩展jQuery对象的功能。

下面是一个示例代码：

// 使用$.fn.extend() 扩展jQuery对象
$.fn.extend({
  check: function () {
    return this.each(function () {
      this.checked = true;
    });
  },
  uncheck: function () {
    return this.each(function () {
      this.checked = false;
    });
  }
});

// 使用新的插件
$("input[type='checkbox']").check(); // 将所有的checkbox都选中

上面代码中，我们用 $.fn.extend() 方法来扩展jQuery对象，将 check() 和 uncheck() 方法添加到jQuery对象中。 这里的 $.fn 就是 jQuery.prototype， check() 和 uncheck() 方法将添加到 jQuery对象的方法列表中。 然后我们就可以在代码中像使用其他jQuery方法一样使用这两个新方法了。

通过上述的两种方法，我们可以创建丰富多彩的jQuery插件， 轻松扩展jQuery的功能。