jQuery 焦点选择器

在 jQuery 中，焦点选择器 :focus 用于选取当前获取焦点（即被单击或按下 Tab 键的元素）的元素。

语法

$(":focus")

示例

HTML

<input type="text" id="input1"/>
<input type="text" id="input2"/>
<input type="text" id="input3"/>

jQuery

$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color", "#ccc");
  });
  $("input").blur(function(){
    $(this).css("background-color", "#fff");
  });
});

在上面的示例中，当 input 元素获取焦点时，其背景颜色变为灰色，当失去焦点时变为白色。这是一个常见的用法。

高级用法

除了直接选取焦点元素外，可以使用 :focus 与其他选择器结合，进行多种匹配。

例如，可以选取当前表单中获取焦点的第一个元素：

$("form :focus:first")

或者选取除当前获取焦点的元素外的所有输入框：

$("input:not(:focus)")

还可以使用 :focus 选择子来选取当前获取焦点元素的后代元素：

$("input:focus ~ p")

以上是 :focus 的一些高级用法，更多用法可以参考 jQuery 官方文档。

参考资料

• jQuery :focus Selector