jQuery :focus 选择器

:focus 选择器用于选择当前获得焦点的元素。术语“焦点”指的是当前正在接收键盘或其他输入设备输入的元素。我们可以将“焦点”应用于表单元素，例如 <input>、<textarea>、<button> 等。

语法

以下是 jQuery :focus 选择器的语法：

$(":focus")

参数

:focus 选择器选择当前获得焦点的元素。

示例 1

在以下示例中，我们使用 jQuery :focus 选择器来选择当前获得焦点的元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("input").focus(function(){
                $(this).css("background-color", "yellow");
            }).blur(function(){
                $(this).css("background-color", "");
            });
        });
    </script>
</head>
<body>
    <form>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" placeholder="Enter your name">
        <br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" placeholder="Enter your email">
    </form>
</body>
</html>

执行上述程序后，点击输入文本字段。当前获得焦点的元素将以黄色背景颜色突出显示。

示例 2

在此示例中，当文本区域获得焦点时，我们为其应用蓝色边框，并在失去焦点时移除边框：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("textarea").focus(function(){
                $(this).css("border", "2px solid blue");
            }).blur(function(){
                $(this).css("border", "");
            });
        });
    </script>
</head>
<body>
    <form>
        <label for="message">Message:</label>
        <textarea id="message" name="message" placeholder="Enter your message"></textarea>
    </form>
</body>
</html>

执行上述程序并点击文本区域以查看蓝色边框。

jquery_ref_selectors.htm

打印页面