jquery获得和失去焦点事件

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。获得焦点（focus）和失去焦点（blur）事件是常见的 DOM 事件，用于处理用户与页面元素的交互。

类型

获得焦点事件：当元素获得焦点时触发，例如用户点击输入框或通过 Tab 键导航到某个元素。
失去焦点事件：当元素失去焦点时触发，例如用户点击页面上的其他元素。

应用场景

表单验证：在用户输入时实时验证表单数据。
自动完成：在用户输入时显示建议列表。
动态样式变化：根据用户是否聚焦某个元素来改变其样式。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Focus and Blur Events</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .focused {
            border: 2px solid blue;
        }
        .blurred {
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <input type="text" id="myInput">
    <script>
        $(document).ready(function() {
            $('#myInput').on('focus', function() {
                $(this).addClass('focused').removeClass('blurred');
            }).on('blur', function() {
                $(this).addClass('blurred').removeClass('focused');
            });
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题：为什么 jQuery 事件绑定不生效？

原因：

jQuery 库未正确加载：确保 jQuery 库已正确引入。
事件绑定代码在 DOM 加载完成前执行：确保事件绑定代码在 $(document).ready() 中执行。

解决方法：

$(document).ready(function() {
    $('#myInput').on('focus', function() {
        console.log('Input focused');
    }).on('blur', function() {
        console.log('Input blurred');
    });
});

问题：事件绑定后，元素的类名没有变化？

原因：

类名拼写错误：确保类名拼写正确。
CSS 样式未正确加载：确保 CSS 文件已正确引入。

解决方法：

$(document).ready(function() {
    $('#myInput').on('focus', function() {
        $(this).addClass('focused').removeClass('blurred');
    }).on('blur', function() {
        $(this).addClass('blurred').removeClass('focused');
    });
});

通过以上方法，可以有效解决 jQuery 获得和失去焦点事件绑定及样式变化的问题。