博客

jQuery.fn.extend() 方法

  • Post category:jquery

jQuery.fn.extend()方法用于向jQuery对象添加新的方法。本文将详细介绍fn.extend()方法的语法和用法，并提供两个示例说明。

语法

以下是fn.extend()方法的基本语法：

$.fn.extend(object)

在这个语法中，object是要添加到jQuery对象中的新方法。fn.extend()方法将返回一个jQuery对象。

示例1：向jQuery对象添加新方法

以下是一个示例，演示如何使用fn.extend()方法向jQuery对象添加新方法：

<!DOCTYPE html>
<html>
<head>
  <title>fn()方法示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $.fn.extend({
      myMethod: function() {
        return this.each(function() {
          $(this).text("这是我的新方法。");
        });
      }
    });
    $(document).ready(function(){
      $("button").click(function(){
        $("p").myMethod();
      });
    });
  </script>
</head>
<body>
  <p>这是一个段落。</p>
  <button>点击这里</button>
</body>
</html>

在这个示例中，我们使用fn.extend()方法向jQuery对象添加了一个新方法myMethod()。该方法将把每个元素的文本内容设置为“这是我的新方法”。然后，我们使用click()方法监听按钮的点击事件，并在单击按钮时调用myMethod()方法。

示例2：向jQuery对象添加多个新方法

以下是另一个示例，演示如何使用fn.extend()方法向jQuery对象添加多个新方法：

<!DOCTYPE html>
<html>
<head>
  <title>fn.extend()方法示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $.fn.extend({
      myMethod1: function() {
        return this.each(function() {
          $(this).text("这是我的新方法1。");
        });
      },
      myMethod2: function() {
        return this.each(function() {
          $(this).text("这是我的新方法2。");
        });
      }
    });
    $(document).ready(function(){
      $("button").click(function(){
        $("p").myMethod1().myMethod2();
      });
    });
  </script>
</head>
<body>
  <p>这是一个段落。</p>
  <button>点击这里</button>
</body>
</html>

在这个示例中，使用fn.extend()方法向jQuery对象添加了两个新方法myMethod1()和myMethod2()。这两个方法都将把每个元素的文本内容设置为不同的字符串。然后，我们使用click()方法监听按钮的点击事件，并在单击按钮时调用myMethod1()和myMethod()方法。

综上所述，fn.extend()方法用于向jQuery对象添加新的方法。本文详细讲解了fn.extend()方法的语法和用法，并提供了两个示例说明。

Tags: