# 使用第三方插件

URL: https://caijiao.org/jquery/07-utils/02-using-plugins
Source: docs/jquery/07-utils/02-using-plugins.md
Description: 本文介绍如何在 jQuery 项目中引入和使用第三方插件，包括插件加载方式、常见示例和注意事项，帮助开发者快速扩展功能。

[jQuery](/jquery/) 拥有庞大的插件生态，能够快速扩展功能，满足不同开发需求。正确引入和使用插件是关键。

## 引入插件方式

### 1. 通过 CDN 引入

在 HTML 中引入 jQuery 后，添加插件的 CDN 脚本：

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui/1.13.2/jquery-ui.min.js"></script>
```

### 2. 本地引入

下载插件文件，放入项目目录，再通过 `<script>` 标签引入。

## 使用示例：jQuery UI 的日期选择器

```html
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>

<script>
  $(function () {
    $("#datepicker").datepicker();
  });
</script>

<input type="text" id="datepicker" placeholder="请选择日期" />
```

## 注意事项

- 插件必须在 [jQuery](/jquery/) 之后加载。
- 不同插件可能依赖不同版本的 jQuery，需确认兼容性。
- 阅读插件文档，了解配置和方法。
- 避免多个版本 jQuery 冲突。

## 示例代码

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