jQuery UI API 类别 – 实用工具（Utilities）
Utilities 是 jQuery UI API 中的一个实用类别，它提供了一系列独立于小部件（Widgets）和交互（Interactions）的辅助工具方法。这些方法直接挂载在 $.ui 命名空间下，主要用于解决常见的前端开发问题（如定位、键盘处理、焦点管理等），也被 jQuery UI 内部大量使用。
官方文档地址：https://api.jqueryui.com/category/utilities/（适用于最新版本 1.14.1）
Utilities 包含的主要工具方法
| 方法名称 | 描述 | 常见用途与示例代码 |
|---|---|---|
| $.ui.keyCode | 包含所有标准键盘键码的常量对象（跨浏览器统一）。 | 处理键盘事件，避免直接使用数字键码。if (event.keyCode === $.ui.keyCode.ENTER) { ... } |
| .position() | 强大的元素定位工具，支持 my/at/of、collision（碰撞检测）、within 等选项。 | 实现 Tooltip、Dropdown、Dialog 相对目标元素的定位。$("#tooltip").position({ my: "center", at: "center", of: "#target" }); |
| .zIndex() | 获取或设置元素的 z-index，支持相对于兄弟元素或指定值。 | 管理模态对话框、菜单、下拉列表的层叠顺序。$("#dialog").zIndex(1000); |
| :focusable | jQuery 扩展选择器：选中所有可以获得焦点的元素（包括 tabindex=”-1″）。 | 无障碍开发、焦点陷阱。$(":focusable").first().focus(); |
| :tabbable | jQuery 扩展选择器：选中所有可以通过 Tab 键顺序导航的元素（tabindex ≥ 0）。 | 键盘导航管理。var next = $(":tabbable").eq(currentIndex + 1); |
| .uniqueId() | 为没有 id 的元素自动生成唯一 ID（格式 ui-id-n）。 | ARIA 属性需要（如 aria-controls）。$("<div>").uniqueId(); |
| .removeUniqueId() | 移除由 .uniqueId() 生成的 ID。 | 清理临时元素。elem.removeUniqueId(); |
| .scrollParent() | 返回最近的可滚动父元素（overflow 不为 visible）。 | 拖拽时确保元素在视口中可见。 |
| .contains() | 安全判断一个 DOM 元素是否包含另一个元素（比原生 contains 更可靠）。 | 事件委托、点击外部关闭等场景。 |
最常用工具详解
- $.ui.keyCode
- 提供约 40 个常用键常量，如：
BACKSPACE,TAB,ENTER,ESCAPE,SPACELEFT,UP,RIGHT,DOWNDELETE,HOME,END,PAGEUP,PAGEDOWN
- 示例：
javascript $(document).keydown(function(e) { if (e.keyCode === $.ui.keyCode.ESCAPE) { $("#dialog").dialog("close"); } });
- .position()
- 最强大、最常用的工具，支持丰富选项：
javascript $("#menu").position({ my: "left top", // 自身定位点 at: "left bottom", // 目标元素定位点 of: "#button", // 相对元素（可为事件对象） collision: "flipfit", // 超出视口时翻转或适应 within: $("body") // 限制在某个容器内 });
- :focusable 和 :tabbable
- 用于实现键盘焦点管理（Dialog、Menu 等内部大量使用）。
- 示例：实现焦点陷阱（模态对话框内循环 Tab）
javascript var $focusables = $(":focusable").filter(function() { return $.contains(dialogElement, this); });
总结
Utilities 类别中的工具虽然不多，但几乎每个都是“黄金级”实用方法：
- 被 jQuery UI 所有组件内部广泛使用。
- 开发者在自定义交互或无障碍功能时经常直接调用。
- 代码体积小、稳定可靠。
即使 jQuery UI 项目已进入维护模式（最新 1.14.1），这些实用工具依然是经典前端开发的宝贵财富。
如果您想深入某个工具（如 .position() 的所有选项详解，或在自定义下拉菜单中的实际应用），欢迎继续提问！
