jQuery UI 安装使用教程

一、jQuery UI 简介

jQuery UI 是基于 jQuery 的用户界面组件库，提供了丰富的交互效果（如拖拽、排序、折叠）、UI 小部件（如日期选择器、对话框、滑块）和主题功能，适用于增强网页交互体验。

---

二、jQuery UI 安装方式

2.1 使用 CDN 引入（推荐）

<!-- jQuery 主库 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script><!-- jQuery UI 样式 -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"><!-- jQuery UI 脚本 -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

2.2 本地下载方式

1. 访问官网：https://jqueryui.com/download/
2. 自定义下载所需组件
3. 引入下载的 JS 和 CSS 文件：

<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery.js"></script>
<script src="jquery-ui.min.js"></script>

2.3 使用 npm 安装（前端项目）

npm install jquery jquery-ui-dist

引入方式：

import $ from 'jquery';
import 'jquery-ui-dist/jquery-ui';
import 'jquery-ui-dist/jquery-ui.css';

---

三、常见组件与示例

3.1 日期选择器 Datepicker

<input type="text" id="datepicker">
<script>$(function() {$("#datepicker").datepicker();});
</script>

3.2 对话框 Dialog

<div id="dialog" title="提示">这是一个对话框</div>
<script>$(function() {$("#dialog").dialog();});
</script>

3.3 拖拽 Draggable

<div id="drag" style="width:100px;height:100px;background:#ccc;">拖我</div>
<script>$(function() {$("#drag").draggable();});
</script>

3.4 手风琴 Accordion

<div id="accordion"><h3>第一部分</h3><div><p>内容1</p></div><h3>第二部分</h3><div><p>内容2</p></div>
</div>
<script>$(function() {$("#accordion").accordion();});
</script>

---

四、主题和样式美化

jQuery UI 提供了多种预设主题，可使用 ThemeRoller 自定义：https://jqueryui.com/themeroller/

选择样式后下载并替换默认的 CSS 文件即可。

---

五、常见问题

Q1: 样式不生效？

• 确认是否引入了 jquery-ui.css
• 检查引入顺序：先引入 jQuery，再引入 jQuery UI

Q2: 控件无法响应？

• 检查 DOM 是否加载完毕，确保 $(function(){}) 包裹代码

---

六、学习资源推荐

• jQuery UI 官网
• 菜鸟教程 jQuery UI
• w3schools jQuery UI

---

本文由“小奇Java面试”原创发布，转载请注明出处。

可以搜索【小奇JAVA面试】第一时间阅读，回复【资料】获取福利，回复【项目】获取项目源码，回复【简历模板】获取简历模板，回复【学习路线图】获取学习路线图。