jQuery UI 安装使用教程-EW帮帮网

一、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 本地下载方式

访问官网：https://jqueryui.com/download/
自定义下载所需组件
引入下载的 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(){}) 包裹代码

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

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

在这里插入图片描述

jQuery UI 安装使用教程