jQuery UI API 类别 - 选择器（Selectors）
Selectors是 jQuery UI API 中的一个独立类别，它扩展了 jQuery 的选择器功能，主要用于无障碍访问（Accessibility）场景，帮助开发者精确选中那些可以获得焦点或通过 Tab 键导航的元素。这些选择器属于 jQuery UI 的UI Core部分，内部实现考虑了跨浏览器兼容性和复杂规则（如 tabindex、disabled、visibility 等）。
官方文档地址：https://api.jqueryui.com/category/selectors/（适用于最新版本 1.14.1）
Selectors 类别包含的选择器
jQuery UI 提供了以下 4 个自定义选择器（以冒号:开头）：
| 选择器 | 描述 | 关键规则与区别 | 示例代码 |
|---|---|---|---|
| :focusable | 选中所有可以获得焦点的元素（包括程序化焦点，如 tabindex=“-1”）。 | - 原生可焦点元素：input、select、textarea、button、object（未 disabled）。 - a/area：有 href 或 tabindex。 - 其他元素：有 tabindex（包括负值）。 - 元素必须可见。 | $(":focusable").css("outline", "2px solid red"); |
| :tabbable | 选中所有可以通过 Tab 键导航的元素（严格子集，不包括 tabindex=“-1”）。 | - 与 :focusable 类似，但 tabindex 必须 ≥0，且未 disabled。 - 注意：tabindex=“-1” 的元素是 :focusable 但不是 :tabbable。 | $(":tabbable").addClass("tabbable-highlight"); |
| :data(key) | 选中所有通过.data(key, value)存储了指定键数据的元素。 | - key：数据键名。 - 等价于有 jQuery data 的元素。 | $(":data(myKey)").css("background", "yellow"); |
| :data()（无参数） | 选中所有存储了任意 jQuery data 的元素。 | - 用于快速查找有 data 的元素。 | $(":data()").length; // 返回数量 |
为什么需要这些选择器？
- 无障碍支持：标准 CSS 或 jQuery 选择器（如
:focus）无法准确处理所有可焦点元素（尤其是 tabindex 和跨浏览器差异）。 - 键盘导航：Dialog、Menu、Tabs 等小部件内部大量使用
:tabbable来管理焦点陷阱（focus trapping）。 - 数据管理：
:data()选择器方便操作 jQuery 存储的内部数据（如 Widget 实例）。
示例：高亮所有可 Tab 元素
$(function(){// 高亮所有可以通过 Tab 键访问的元素$(":tabbable").css({"outline":"2px dotted green","outline-offset":"2px"});// 高亮所有可焦点元素（包括 tabindex="-1"）$(":focusable").css("box-shadow","0 0 5px blue");});注意事项
- 这些选择器依赖 jQuery UI的核心文件（jquery-ui.js），不引入 jQuery UI 时不可用。
- 元素必须可见（display ≠ none，visibility ≠ hidden，且 opacity > 0）。
- 项目已进入维护模式（最新 1.14.1），这些选择器稳定可靠，常用于键盘交互和 ARIA 无障碍开发。
如果您想了解某个选择器（如 :tabbable）的详细实现规则、完整代码示例，或在 Dialog 中的实际应用，请告诉我！
