jQuery UI API 类别 – UI 核心（UI Core）

jQuery UI API 类别 – UI 核心（UI Core）

UI Core（User Interface Core）是 jQuery UI 的基础核心类别，它提供了所有其他组件（Widgets、Interactions、Effects）所依赖的最底层功能。UI Core 本身体积很小，但它是整个 jQuery UI 框架的“地基”。

官方文档地址：https://api.jqueryui.com/category/ui-core/（适用于最新版本 1.14.1）

UI Core 包含的主要组件

组件名称	描述	主要作用与示例
jQuery.widget()（Widget Factory）	部件工厂，用于创建和管理所有状态化小部件的框架。	所有官方小部件（如 Datepicker、Dialog、Tabs）都基于它构建；开发者自定义小部件也依赖它。
:focusable 和 :tabbable 选择器	扩展 jQuery 的自定义选择器，用于无障碍访问（Accessibility）。	精确选中可获得焦点或可通过 Tab 键导航的元素，常用于键盘焦点管理。
.position()	强大的元素定位工具，支持多种定位方式（相对、碰撞检测、偏移等）。	用于 Dialog、Tooltip、Autocomplete 等组件的定位。
.uniqueId() 和 .removeUniqueId()	为没有 ID 的元素自动生成/移除唯一 ID。	内部用于 ARIA 无障碍属性（如 aria-controls）。
.zIndex()	获取或设置元素的 z-index，支持相对于父元素或兄弟元素。	用于管理模态对话框、菜单等叠加顺序。
.keyCode	键盘事件键码常量对象（如 $.ui.keyCode.ENTER、$.ui.keyCode.ESCAPE）。	统一处理键盘交互，避免跨浏览器键码差异。
.scrollParent()	返回最近的可滚动父元素。	用于拖拽、滚动时保持可见性等场景。
.contains()	安全判断一个 DOM 元素是否包含另一个元素（兼容性更好）。	内部用于事件委托、焦点管理。
.escapeSelector()	转义 CSS 选择器中的特殊字符。	用于动态生成选择器。

关键组件详解

1. Widget Factory（$.widget）

• 最核心部分，所有小部件的统一 API、状态管理、继承、事件系统都来自这里。
• 详见之前章节“部件库（Widget Factory）”。

1. .position() 方法

   $("#tooltip").position({
       my: "left+10 center",   // 自身定位点
       at: "right center",     // 目标元素定位点
       of: "#target",          // 相对哪个元素
       collision: "flip"       // 超出视口时翻转
   });

• 支持丰富的选项：my、at、of、collision、using、within 等。

1. :focusable 和 :tabbable 选择器

• 用于键盘导航和焦点陷阱（focus trapping），在 Dialog、Menu 等组件中大量使用。

   var next = $(":tabbable").first();  // 获取第一个可 Tab 元素

4. $.ui.keyCode

   if (event.keyCode === $.ui.keyCode.ESCAPE) {
       $("#dialog").dialog("close");
   }

UI Core 的重要性

• 体积小：单独引入 UI Core 时文件很小（几 KB）。
• 依赖关系：Widgets、Interactions、Effects 都必须依赖 UI Core。
• 在使用 Download Builder 自定义下载时，Core 是必选项（不能取消）。

注意：jQuery UI 已进入维护模式（最新 1.14.1），UI Core 部分非常稳定，常被其他库借鉴（如 jQuery Mobile）。

如果您想深入某个核心组件（如 .position() 的所有选项详解，或 Widget Factory 的内部实现），欢迎继续提问！