# 自定义插件

URL: https://caijiao.org/jquery/07-utils/03-writing-plugins
Source: docs/jquery/07-utils/03-writing-plugins.md
Description: 本文讲解如何编写 jQuery 自定义插件，包括插件结构、封装方法及调用示例，帮助开发者轻松扩展 jQuery 功能，实现代码复用。

[jQuery](/jquery/) 允许开发者基于其核心功能，自定义插件以封装特定功能，提高代码复用和项目维护性。

## 插件基本结构

自定义插件通常通过扩展 `$.fn` 对象实现：

```js
(function ($) {
  $.fn.myPlugin = function (options) {
    // 默认参数
    var settings = $.extend(
      {
        color: "red",
        fontSize: "14px",
      },
      options
    );

    // 遍历匹配的元素
    return this.each(function () {
      $(this).css({
        color: settings.color,
        fontSize: settings.fontSize,
      });
    });
  };
})(jQuery);
```

## 调用插件示例

```js
$(function () {
  $("p").myPlugin({
    color: "blue",
    fontSize: "18px",
  });
});
```

该插件会将所有 `<p>` 元素的文字颜色改为蓝色，字体大小改为 18px。

## 插件优点

- 封装重复功能
- 支持链式调用
- 提供默认参数和用户自定义参数
- 提高代码模块化和复用性

## 示例代码

[在线代码演示](/jquery/demos/25.html)