• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • :focus

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

    jQuery(":focus")

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

    例子

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

    <!DOCTYPE html>
    <html>
    <head>
      <style>
    .focused {
        background: #abcdef;
    }
    </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.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>
    

    下篇::button