jQuery 扩展方法

在使用 jQuery 时，扩展方法是一个非常有用的功能。通过扩展 jQuery，我们可以将我们的自定义功能添加到 jQuery 中，从而提高我们代码的可重用性和可维护性。

什么是扩展方法？

在 jQuery 中，扩展方法就是添加一个新的函数或属性到 jQuery 对象上。这个函数或属性可以在整个代码中使用，而不仅仅局限于某个特定的页面。

如何扩展 jQuery？

jQuery 扩展最基本的形式如下：

$.fn.extend({
  myFunction: function() {
    return this.each(function() {
      // 在这里编写函数
    });
  }
});

这段代码中，我们用 extend 方法添加了一个新函数 myFunction 到 jQuery 对象上。这个函数被添加到了 $.fn 属性中，这个属性指向的是 jQuery.prototype 对象，所以我们添加的方法也可以被 jQuery 实例对象调用。

扩展链式调用

如果我们希望添加的函数能够支持链式调用，我们只需要在函数体最后 return this 就可以了。例如：

$.fn.extend({
  myFunction: function() {
    // 在这里编写函数
    return this;
  }
});

扩展常量

除了添加函数，我们还可以添加一些常量，例如：

$.extend({
  PI: 3.1415926
});

这个例子中，我们添加了一个常量 PI 到 jQuery 对象上。

扩展示例

下面是一个例子，我们添加了一个函数，用于将匹配的元素上居中显示一个提示框：

$.fn.extend({
  showTooltip: function(message) {
    return this.each(function() {
      var tooltip = $('<div class="tooltip">' + message + '</div>');

      $(this).css('position', 'relative').append(tooltip);

      var top = ($(this).height() - tooltip.outerHeight()) / 2;
      var left = ($(this).width() - tooltip.outerWidth()) / 2;
      tooltip.css({
        'position': 'absolute',
        'top': top + 'px',
        'left': left + 'px'
      });
    });
  }
});

我们可以在页面中使用 $('selector').showTooltip('message') 调用这个函数，将提示框居中显示在指定元素上。

结论

通过扩展 jQuery，我们可以将我们的自定义功能添加到 jQuery 中。这些扩展方法可以使我们的代码更加模块化，提高代码复用率和可维护性。扩展 jQuery 并不难，只需要使用 $.fn.extend 或 $.extend 添加我们的自定义函数或常量就可以了。