jquery如何获取和失去焦点事件

一、前言

jQuery的优势之一是对DOM（Document Object Model）一个简单易用的抽象，使得开发者可以更方便地操纵页面元素，如数据、样式和事件等。本文主要介绍jQuery的焦点获取和失去事件以及用途。

二、获取焦点事件

当元素获得焦点时，会触发focus事件。在jQuery中，可以使用focus()或者on()方法来绑定事件监听器。下面是使用focus()来绑定事件的示例：

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

在上面的代码中，当用户点击页面中的input元素时，会将该元素的背景色改变为灰色。

三、失去焦点事件

当元素失去焦点时，会触发blur事件。在jQuery中，也可以使用blur()或者on()方法来绑定事件监听器。下面是使用blur()来绑定事件的示例：

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

在上面的代码中，当用户点击页面中的input元素外部时，会将该元素的背景色改变为白色。

四、绑定多个事件

有时候，需要在同一个元素上绑定多个事件监听器。jQuery提供了多种方法来实现这一点。下面是一些示例：

$(document).ready(function(){
    $("input").on({
        focus: function(){
            $(this).css("background-color", "#cccccc");
        },
        blur: function(){
            $(this).css("background-color", "#ffffff");
        }
    });
});

在上面的代码中，使用了on()方法来绑定focus和blur事件的监听器，所以当用户点击页面中的input元素时，会将该元素的背景色改变为灰色，当用户点击元素外部时，会将该元素的背景色改变为白色。