jQuery 扩展方法

在 jQuery 中，您可以使用扩展（extension）方法来添加新的功能或更改现有功能。扩展方法是一种将新功能添加到 jQuery 的机制。

扩展方法可以添加新的实用程序函数，也可以更改现有的 jQuery 函数的行为。

添加扩展方法

添加扩展方法的常见做法是使用 $.fn.extend 函数。

// 添加新函数（函数名为 myFunction）
$.fn.extend({
  myFunction: function() {
    // 在这里添加新功能代码
  }
});

上面的代码创建了一个名为 myFunction 的新函数。这个函数将被添加到 jQuery 扩展函数集合中，因此它可以像其他 jQuery 函数一样在 jQuery 选择器上调用。

调用扩展方法

添加了扩展方法之后，您可以使用选择器调用它。

// 调用新函数（函数名为 myFunction）
$("selector").myFunction();

在上面的代码中，$("selector") 选择器选取一个或多个 HTML 元素，然后调用新的 myFunction 函数。

扩展现有方法

要扩展现有方法，您可以使用 $.fn.<method> 语法，其中 <method> 是您要扩展的现有方法名。

// 扩展现有函数（函数名为 val）
$.fn.val = function() {
  // 在这里添加新的函数代码
};

上面的代码扩展了 jQuery 的 val 函数。现在您可以使用新的 val 函数调用 $("selector").val()。

示例

下面是一个示例，演示了如何使用 jQuery 扩展方法来添加新的功能。

// 扩展 jQuery 函数集合
$.fn.extend({

  // 添加新函数
  highlight: function() {
    this.css("background-color", "yellow");
  },

  // 添加第二个新函数
  highlightAndEnlarge: function() {
    this.css("background-color", "orange").css("font-size", "24px");
  }
});

// 选择所有 <p> 元素并调用自定义功能
$("p").highlight();

// 选择所有 <div> 元素并调用第二个自定义功能
$("div").highlightAndEnlarge();

在上面的代码中，我们定义了两个自定义函数： highlight 和 highlightAndEnlarge。这些函数使用 css 方法将 CSS 样式应用于选择器的 HTML 元素。在两个示例中，我们分别选择了所有 <p> 和 <div> 元素并调用了自定义函数。

结论

在 jQuery 中，您可以使用扩展方法来添加新的功能或更改现有功能。要添加新函数，请使用 $.fn.extend 函数。要扩展现有函数，请使用 $.fn.<method> 语法，其中 <method> 是已有函数的名称。