如何用jQuery查找哪个DOM元素有焦点

当一个DOM元素被点击或被选中时，我们称它拥有焦点。有时候我们需要检查哪个DOM元素获得了焦点，以便依据这个信息做进一步处理。下面是如何使用jQuery查找哪个DOM元素获得焦点的方法：

方法一：使用jQuery的:focus伪类

:focus伪类是指选中了获得焦点的元素。如果只想找到当前页面中的所有获得焦点的元素，可以使用下面这个简单的代码：

$(":focus") 

这会返回所有当前获得焦点的DOM元素，如果想对它们进行进一步处理，可以像对待任何jQuery对象一样使用它们。

示例：

<input type="text" id="input1" value="foo" />
<input type="text" id="input2" value="bar" />

<script>
// 针对当前页面中所有获得焦点的元素设置蓝色背景
$(":focus").css("background-color", "blue");
</script>

这段代码会为当前页面中所有当前获得焦点的input元素设置蓝色背景。

方法二：结合focus事件和document.activeElement属性

jQuery 也提供了 focus 事件。当一个元素获得焦点时，它会触发该事件。换句话说，每当用户点击或在键盘上选择一个元素时，都可以利用这个事件获知哪个元素获得了焦点。

通过 document.activeElement 属性，我们可以获取当前文档中获得焦点的元素。例如以下代码：

$(document).on('focus', function() {
    console.log('focus on: ', document.activeElement);
});

该代码块为document注册了focus事件，并在每次document获得焦点时，通过控制台输出当前获得焦点的元素。

示例：

<input type="text" id="input1" value="foo" />
<input type="text" id="input2" value="bar" />

<script>
// 为document注册focus事件，并在控制台输出当前获得焦点的元素
$(document).on('focus', function() {
    console.log('focus on: ', document.activeElement);
});
</script>

每当用户在输入框中输入文本、点击输入框或使用 Tab 键移动焦点时，我们都会通过控制台输出当前获得焦点的元素。

综上所述，使用以上两种方法可以轻松检测页面中的DOM元素是否获得焦点，并根据需要对它们进行处理。