14/08/2018, 09:51
:target Selector trong jquery
Target Selector sẽ lựa chọn phần tử được chỉ ra bởi fragment trong URI của tài liệu. Nếu URI có bao gồm một fragment hoặc một hash, thì :target sẽ tìm kiếm phần tử dựa vào id được cung cấp bởi fragment hoặc hash đó. Ví dụ nếu URI có dạng https://code24h.com#target thì :target selector sẽ tìm ...
Target Selector sẽ lựa chọn phần tử được chỉ ra bởi fragment trong URI của tài liệu.
Nếu URI có bao gồm một fragment hoặc một hash, thì :target sẽ tìm kiếm phần tử dựa vào id được cung cấp bởi fragment hoặc hash đó. Ví dụ nếu URI có dạng https://code24h.com#target thì :target selector sẽ tìm kiếm phần tử có id="target".
Cú pháp
Cú pháp
jQuery( ":target" )
Ví dụ
Tìm kiếm các phần tử có id="targer" và đổi màu cho chúng. Các bạn copy đoạn code dưới đây vào file test.html sau đó mở file đó lên bằng trình duyệt và thêm #target vào cuối đường dẫn để chạy thử:
Code
<!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 type="text/css">
td{
background: black;
awidth: 50px;
height: 50px;
}
</style>
</head>
<body>
<h1>Học lập trình miễn phí tại code24h.com</h1>
<table border="1">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td id="target"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<hr>
<button onclick="myFunction()">Click vào đây để xem kết quả</button>
<script>
function myFunction(){
$( ":target" ).html( "đây là mục tiêu" ).css("background", "red");
}
</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
