jQuery UI

定义

jQuery UI 是一套以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。它把网页中常见但底层实现繁琐的鼠标交互、动画效果以及带状态的可视控件封装成可调用的组件，开发者通过一两行脚本即可把普通 HTML 元素转换为对话框、标签页或可拖拽对象^[2][5]。

从组成上看，该库通常被划分为核心部分、交互行为组件、微件(Widget)和动画效果组件四类，其中交互与微件都建立在同一套小部件工厂(Widget Factory)之上，因此各组件的方法调用方式与事件模型保持一致^[5][6]。

原理

该库的交互组件以 JavaScript 监听鼠标事件并直接操作文档对象模型来完成。以可缩放组件为例，其 resizable() 方法可接受 maxHeight、container、aspectRatio、ghost 等选项，用来限制缩放范围、保持宽高比例或在拖动时显示半透明预览；开始、进行中与结束三个时点分别触发 start、resize、stop 事件，回调中除浏览器事件外还会收到一个包含尺寸与位置信息的 ui 对象^[7]。可排序组件 sortable() 则提供 items、connectWith、dropOnEmpty 等选项，用于限定可排序项目、允许跨列表拖动以及控制空列表能否接收元素^[7]。

所有带状态的微件都由小部件工厂生成，该工厂统一处理初始化、状态保存、实例方法调用和选项变更等事务，使不同组件对外呈现相同的 API^[6]。视觉层面采用两层样式：一层是语义化的 CSS 框架类，用 ui-state-default、ui-state-hover、ui-state-active 等类名标记可点击、悬停与选中状态；另一层是各组件自身的结构样式，负责尺寸、内边距与定位^[8]。主题文件只包含颜色、背景图与图标等外观属性，因此更换主题不会影响组件功能^[8]。

flowchart LR

A[HTML 元素] --> B[调用插件方法初始化]

B --> C[Widget Factory 建立实例与状态]

C --> D[绑定鼠标与键盘事件]

D --> E[更新 DOM 与 CSS 框架类]

E --> F[触发自定义事件与回调]

G[ThemeRoller 主题 CSS] --> E

发展历程

2007 年 9 月 17 日，jQuery 项目在其官方博客上宣布推出 jQuery UI，定位为建立在 jQuery 之上的、带完整主题机制的交互与微件库，首个完整主题名为 Flora，另有 Light 与 Dark 两个部分完成的主题；当时该库要求至少使用 jQuery 1.2.1^[1]。维基百科的资料同样记载其首次发布于 2007 年 9 月^[9]。

此后版本沿 1.6、1.7、1.8 等序列迭代，1.8 系列首个正式版于 2010 年发布，其后陆续推出 1.8.1 至 1.8.24 等维护版本^[10]。1.10 系列始于 2013 年 1 月，1.11 系列始于 2014 年 6 月，1.12.0 于 2016 年 7 月发布，1.13.0 于 2021 年 10 月发布^[10]。

2024 年 8 月 5 日，1.14.0 正式版发布，该版本放弃了对全部 Internet Explorer 与旧版 Edge 的支持，只支持 Chrome、Firefox、Safari 和 Edge 的最新版本，同时删除了针对旧浏览器的兼容代码，并默认关闭 1.11 API 的向后兼容开关^[11]。2024 年 10 月 30 日发布 1.14.1，官方下载页另有 2026 年 1 月 28 日发布的 1.14.2^[12]。项目方说明，jQuery UI 自 2021 年起处于维护模式，1.14.0 发布当日 1.13.x 系列即停止支持^[11]。

应用

该库的典型用途是为已有页面补充交互能力，例如把元素变为可拖拽、可放置、可缩放、可框选或可拖动排序的对象，或直接生成手风琴、选项卡、对话框、日期选择器、进度条、滑块等界面元素^[5]。这些组件常出现在后台管理系统、企业内部工具以及需要快速搭建原型的项目中^[3]。

由于组件可被单独打包，一些 Web 框架只引入自身需要的那几部分。例如 Oracle Application Express 内嵌了 jQuery 1.8.14，但默认只加载核心、小部件工厂、鼠标、定位、拖拽、缩放、对话框、日期选择器与部分特效等组件，以控制页面加载体积，其余组件需开发者按需引入^[13]。类似的嵌入式使用方式使该库在大量既有系统中长期存在^[14]。

局限

从功能范围看，该库只提供交互与控件，并不解决页面栅格与响应式布局问题，导航栏、缩略图、图标体系等也非其覆盖范围，这些通常需要借助其他前端框架或自行实现^[15]。有技术文章也指出其控件数量相对 Dojo、YUI、Ext JS 等同期产品偏少，组件之间的 API 协调不足^[3]。

维护节奏与兼容策略同样构成限制。官方说明自 2021 年起项目进入维护状态，仅保证与新版本 jQuery 兼容并修复安全问题，不再计划重要新功能，1.12.1 之后的重要回归会修，年代久远的旧缺陷则可能长期保留^[11]。1.14 系列不再支持 IE，也不再支持 jQuery 1.7 至 1.11、2.0 至 2.1、3.0 至 3.5 等旧版本，依赖旧浏览器的项目升级时需评估^[11]。此外，各版本定期的补丁发布间隔可能拉长，官方曾提到 1.13.2 与 1.13.3 之间相隔 1 年 9 个月^[4]。

组件接收的选项若直接来自不可信数据而未编码，存在被注入脚本的风险，日期选择器与自动完成等控件过去曾出现此类问题，因此使用旧版本意味着缺少后续修复^[16]。在 Vue、React 等现代框架项目中，该库需要以外部依赖方式排除在打包之外再单独引入，与其他库定义同名插件方法时也可能冲突^[3][15]。

参见

• jQuery —— jQuery UI 依赖并扩展的基础 JavaScript 库

• 文档对象模型 —— 交互组件操作与变换的页面结构基础

• CSS —— 主题框架与组件样式的实现手段

• Bootstrap —— 同样提供前端界面组件、常与之并用的框架

• ThemeRoller —— 用于生成和下载 jQuery UI 主题的在线工具