jQuery UI API 类别 – 选择器（Selectors）

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 中的实际应用，请告诉我！