:focus

选中当前已获得焦点的元素。（不支持事件冒泡）

与其它伪类选择器(以 ":" 开头的选择器)一样，使用 :focus 时，建议在它前面加一个标签名或是其它一些选择器。否则的话，就意味着要使用全局选择器("*")。换句话说，$(':focus') 等价于 $('*:focus')。如果你要查找当前获得焦点的元素，可以使用 $( document.activeElement ) ，而不必在整个 DOM 树中进行查找。

示例:

无论哪个元素获得了焦点，为这个元素添加一个样式。

<!DOCTYPE html>
<html>
<head>
<style>
.focused {
    background: #abcdef;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>


<div id="content">
    <input tabIndex="1">
    <input tabIndex="2">
    <select tabIndex="3">
        <option>select menu</option>
    </select>
    <div tabIndex="4">
        a div
    </div>
</div>


<script>


$( "#content" ).delegate( "*", "focus blur", function( event ) {
    var elem = $( this );
    setTimeout(function() {
       elem.toggleClass( "focused", elem.is( ":focus" ) );
    }, 0);
});


</script>
</body>
</html>

演示: