14/08/2018, 09:45
:focus Selector trong jquery
Focus Selector sẽ chọn phần tử đang được focus. Cũng giống như những selector giả định khác(những selector bắt đầu bằng ":") bạn nên đặt trước nó một tên thẻ hoặc một selector khác, nếu không nó sẽ được hiểu là bộ chọn toàn bộ("*"), nói các khác $( ":focus" ) tương đương với $( "*:focus" ...
Focus Selector sẽ chọn phần tử đang được focus.
Cũng giống như những selector giả định khác(những selector bắt đầu bằng ":") bạn nên đặt trước nó một tên thẻ hoặc một selector khác, nếu không nó sẽ được hiểu là bộ chọn toàn bộ("*"), nói các khác $( ":focus" ) tương đương với $( "*:focus" ), do đó nếu bạn muốn tìm phần tử hiện đang được focus, $( document.activeElement ) sẽ trả về phần tử đó mà không phải tìm kiếm toàn bộ các phần tử DOM.
Cú pháp
Cú pháp
jQuery( ":focus" )
Ví dụ
Tìm kiếm thẻ đang được focus và đổi màu nền cho chúng:
Code
RUN
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Học lập trình miễn phí tại code24h.com</title>
<script src="https://code24h.com/cnd/js/jquery/jquery-3.2.1.min.js"></script>
<style>
.focused {
background: #abcdef;
}
</style>
</head>
<body>
<h1>Học lập trình miễn phí tại code24h.com</h1>
<div id="content">
<input tabIndex="1">
<input tabIndex="2">
<select tabIndex="3">
<option>select menu</option>
</select>
<div tabIndex="4">
a div
</div>
</div>
<button onclick="myFunction()">Click vào đây sau đó focus vào các thẻ để xem kết quả</button>
<script>
function myFunction(){
$( "#content" ).delegate( "*", "focus blur", function() {
var elem = $( this );
setTimeout(function() {
elem.toggleClass( "focused", elem.is( ":focus" ) );
}, 0 );
});
}
</script>
</body>
</html>Kết quả:
Tham khảo: jquery.com
Các loại api khác
- jQuery Selector
- jQuery Events
Nguồn: code24h.com
