jQuery UI完整入门：一张清单看懂20大经典Web组件与库的定位-酒店常州论坛

jQuery UI完整入门：一张清单看懂20大经典Web组件与库的定位

【免费下载链接】jquery-uiThe official jQuery user interface library.项目地址: https://gitcode.com/gh_mirrors/jq/jquery-ui

jQuery UI 是官方维护的 jQuery UI 组件库，基于 jQuery 核心构建，提供日期选择器、拖放排序、对话框等 20 大经典 Web 组件。本文用一份"一页清单"式完整入门指南，帮你在 10 分钟内看懂 jQuery UI 相对 jQuery 的定位、20 个组件各自能做什么，快速找到项目中需要的组件。

一、定位先行：jQuery UI 解决什么问题？

很多新手分不清jQuery和jQuery UI的边界，一句话概括：

库	角色	类比
jQuery	DOM 操作、事件绑定、AJAX	地基与水电
jQuery UI	开箱即用的 UI 组件、交互与动画	装修好的家具

jQuery UI 官方将其定义为四大部分（见 README.md）：

🧩Widgets（组件）：19 个可实例化的 UI 组件
🖱️Interactions（交互）：拖拽、排序、缩放等鼠标交互行为
✨Effects（效果）：15 种内置动画
🎨Themes（主题）：统一的样式皮肤，换肤只需改 CSS

⚠️重要提示：jQuery UI 目前已进入maintenance-only（仅维护）模式，不再新增大功能，但现有功能稳定、成熟，用于传统 Web 项目维护与重构依然可靠。

📁 仓库结构速览

目录	说明
ui/widgets/	19 个组件源码 + 交互基类 mouse.js
ui/effects/	15 种动画效果（effect-fade.js、effect-explode.js 等）
ui/widget.js、ui/position.js	组件基类与元素定位引擎（所有组件的底座）
themes/base/core.css	基础主题样式（含 theme.css 配色层）
demos/	每个组件的官方演示页，学习最快路径
tests/unit/	组件单元测试

二、jQuery UI 20大经典Web组件清单

这是全文核心 👇 一张表看懂所有组件的定位与源码位置：

📦 展示类组件（8 个）

#	组件	一句话定位	源码
1	Accordion手风琴	嵌套的展开/折叠内容区	accordion.js
2	Dialog对话框	模态 / 浮动窗口（jQuery UI 的招牌组件）	dialog.js
3	Menu菜单	支持子菜单、键盘导航的导航菜单	menu.js
4	Progressbar进度条	进度展示，含不确定态	progressbar.js
5	Tabs选项卡	标签页，支持 AJAX 异步加载内容	tabs.js
6	Tooltip提示	鼠标悬浮提示气泡	tooltip.js
7	Selectable可框选	鼠标框选多个元素	selectable.js
8	Effects特效	15 种动画：Explode、Fade、Pulsate、Transfer 等	ui/effects/

📝 表单类组件（7 个）

#	组件	一句话定位	源码
9	Autocomplete自动补全	输入时智能联想，远程数据支持	autocomplete.js
10	Button按钮	增强按钮，支持图标与分组	button.js
11	Checkboxradio	美化复选/单选框，风格统一	checkboxradio.js
12	Datepicker日期选择器	最经典的组件，日历 + 区间 + 80+ 语言包	datepicker.js
13	Selectmenu	自定义样式的下拉选择框	selectmenu.js
14	Slider滑块	单值 / 区间滑块，支持垂直方向	slider.js
15	Spinner	带 +/− 按钮的数字输入框，支持步进与范围	spinner.js

🎛️ 交互与布局（3 个）+ 🖱️ 拖放类（4 个）

#	组件	一句话定位	源码
16	Controlgroup	把多个控件组合成工具栏	controlgroup.js
17	Draggable可拖拽	让任意元素"拎起来就走"	draggable.js
18	Droppable投放区	定义拖拽的"接收区域"	droppable.js
19	Resizable可缩放	拖拽手柄调整元素大小，可锁定比例	resizable.js
20	Sortable可排序	列表拖放重排，支持跨列表拖移	sortable.js

💡 交互类组件（17~20 号）共享同一个底层鼠标引擎 mouse.js，因此 draggable + droppable + sortable 可以无缝组合出"上传到指定区域"等复杂交互。

三、按场景挑组件：3秒对上号

📅要选日期？→datepicker，中文等 ui/i18n/ 下 70+ 语言包开箱即用
🔀要列表排序 / 看板拖移？→sortable，官方演示见 demos/sortable/
📤要拖到指定位置投放？→draggable+droppable组合，参考 demos/droppable/photo-manager.html
📋要弹窗确认 / 表单？→dialog，demos/dialog/default.html
🔍要搜索联想？→autocomplete
🎚️要区间筛选？→slider的 range 模式

不确定怎么用？直接打开 demos/index.html，每个组件都有可交互的官方示例。

四、三步快速上手：jQuery UI 最快配置方法

第 1 步 · 获取源码

git clone https://gitcode.com/gh_mirrors/jq/jquery-ui # 或 npm install jquery-ui

第 2 步 · 页面引入（注意顺序：先 jQuery，后 jQuery UI）

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

依赖要求见 package.json：jquery >=1.12.0 <5.0.0，仓库 external/jquery/ 目录内置了多个版本可直接使用。

第 3 步 · 一行代码初始化组件

$( "#from" ).datepicker(); // 日期选择器 $( "#list li" ).sortable(); // 列表拖放排序 $( "#dialog" ).dialog(); // 弹出对话框

每个组件都遵循统一的$().组件名(选项)写法——学会一个，等于学会全部 20 个。

五、新手常见疑问 FAQ

Q1：jQuery 和 jQuery UI 是同一个东西吗？不是。jQuery UI 是构建在 jQuery 之上的插件库，不能脱离 jQuery 使用。

Q2：为什么项目里每个组件都长得很像？因为它们共享组件基类 ui/widget.js、定位引擎 ui/position.js 和统一主题 themes/base/，API 风格、事件命名完全一致，学习成本极低。

Q3：jQuery UI 还能用吗？能。虽然处于维护模式（见 README.md 顶部说明），但组件成熟稳定，对维护既有项目、快速搭建传统 Web 界面依然是"装完即用"的最优解之一。

总结：jQuery UI 用 19 个组件 + 15 种特效，覆盖了表单、展示、导航、拖放四大场景。记住本文的 20 大组件清单，配合 demos/ 官方示例，你就能在任何 jQuery 项目中快速定位到正确的 Web 组件，把重复造轮子的时间省下来。

【免费下载链接】jquery-uiThe official jQuery user interface library.项目地址: https://gitcode.com/gh_mirrors/jq/jquery-ui

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析