概述 focus selector
返回值:jQuery
描述:选择当前获取焦点的元素。
如同其他伪类选择器(那些以":"开始)一样,使用:focus
时,建议在他们前面加一个标签名称或其他选择;否则,会使用默认的通用选择器("*"),性能是不言而喻的。换句话说,$(':focus')
等同为$('*:focus')
。如果你正在寻找当前的焦点元素,$( document.activeElement )
将检索,而不必查找整个DOM树。
示例
添加一个"focused"的类名给那些有focus方法的元素
.focused { background: #abcdef; }
<div id="content"> <input tabIndex="1"> <input tabIndex="2"> <select tabIndex="3"> <option>select menu</option> </select> <div tabIndex="4"> a div </div> </div>
$( "#content" ).delegate( "*", "focus blur", function( event ) {
var elem = $( this );
setTimeout(function() {
elem.toggleClass( "focused", elem.is( ":focus" ) );
}, 0);
});
给获取焦点的元素添加focused类
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>focus demo</title> <style> .focused { background: #abcdef; } </style> <script src="https://code.jquery.com/jquery-1.10.2.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() { var elem = $( this ); setTimeout(function() { elem.toggleClass( "focused", elem.is( ":focus" ) ); }, 0 ); }); </script> </body> </html>
运行一下