返回介绍

:focus Selector

发布于 2017-09-11 字数1481 浏览 1012 评论 0

所属分类:选择器 > 基础过滤 | 选择器 > 表单

focus selector

描述: 选择当前获取焦点的元素。

  • 添加的版本: 1.6jQuery( “:focus” )

如同其他伪类选择器(那些以”:”开始)一样,使用:focus时,建议在他们前面加一个标签名称或其他选择;否则,会使用默认的通用选择器(“*”),性能是不言而喻的。换句话说,$(':focus')等同为$('*:focus')。如果你正在寻找当前的焦点元素,$( document.activeElement )将检索,而不必查找整个DOM树。

例子:

给获取焦点的元素添加focused类

<!DOCTYPE html>
<html>
<head>
  <style>
.focused {
    background: #abcdef;
}
</style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/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>

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!