Lựa chọn ID Selector là một trong các loại Selectors cơ bản được cung cấp sẵn trong thư viện jQuery được thiết kế để chọn một phần tử duy nhất dựa trên giá trị của thuộc tính id.
Thuộc tính id trong HTML là một định danh duy nhất (identifier) dành cho một phần tử (element). Điều đó có nghĩa là mỗi phần tử trong HTML chỉ có một id duy nhất trong tài liệu HTML. id thường được sử dụng để xác định và truy cập một phần tử cụ thể trong tài liệu HTML.
1. Cú pháp
1.1. Cú pháp ID Selector
$("#id")
Hoặc
jQuery( “#id” )
Tham số:
id: Giá trị của thuộc tínhidmà bạn muốn chọn.
Kết quả trả về:
- Một đối tượng jQuery chứa một tập hợp gồm một hoặc không có phần tử DOM.
Phiên bản hỗ trợ:
- Được thêm vào phiên bản 1.0 của jQuery.
1.2. Cách hoạt động của ID Selector
Hiệu suất hiệu quả: Khi bạn sử dụng id selector trong jQuery (ví dụ: $(“#someId”)), jQuery sẽ sử dụng hàm JavaScript document.getElementById() để truy xuất phần tử có id tương ứng.
Hàm document.getElementById() là một hàm rất hiệu quả và nhanh chóng trong việc tìm kiếm phần tử theo id, được hỗ trợ sẵn trong các trình duyệt.
Kiểm tra bổ sung với kết hợp các selector: Nếu bạn kết hợp id selector với một selector khác, chẳng hạn h2#pageTitle, jQuery sẽ thực hiện một kiểm tra bổ sung trước khi xác định phần tử có khớp. Điều này đảm bảo rằng phần tử phù hợp với cả id và các selector khác được chọn đúng.
Trả về một đối tượng jQuery chứa một bộ sưu tập: Khi bạn sử dụng jQuery() (hoặc $()) với một id selector làm đối số (ví dụ: $(“#someId”)), nó trả về một đối tượng jQuery. Đối tượng jQuery này có thể chứa một hoặc không có phần tử DOM.
Sự độc nhất của giá trị ID: Mỗi giá trị id nên là duy nhất trong một tài liệu. Quan trọng để đảm bảo rằng không có hai phần tử nào trong cùng một tài liệu có cùng một ID. Nếu có nhiều phần tử có cùng một ID, việc sử dụng truy vấn với ID đó sẽ chỉ chọn phần tử phù hợp đầu tiên trong DOM.
Không hợp lệ khi có ID trùng lặp: Có nhiều phần tử có cùng một ID trong một tài liệu được coi là không hợp lệ trong HTML. Đây là một thực hành tốt để sử dụng các ID duy nhất để duy trì tính hợp lệ và tính toàn vẹn của cấu trúc HTML.
Kí tự đặc biệt trong các ID: Nếu ID chứa kí tự như dấu chấm hoặc dấu hai chấm, bạn cần phải thoát những kí tự này bằng cách sử dụng dấu gạch chéo ngược. Điều này quan trọng để đảm bảo rằng ID được hiểu đúng cách và được sử dụng như một bộ chọn.
2. Một số ví dụ
2.1. ID Selector với nhiều phần tử cùng ID
Dưới đây là một ví dụ minh họa về sự độc nhất của giá trị ID trong HTML và ảnh hưởng khi có nhiều phần tử có cùng một ID.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>ID Uniqueness Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="uniqueId">This is a unique ID element "uniqueId".</div>
<div id="uniqueId">This is another element with the same ID. "uniqueId"</div>
<script>
$(document).ready(function() {
var element = $("#uniqueId");
alert(element.text()); // Sẽ log nội dung của phần tử đầu tiên với ID "uniqueId"
});
</script>
</body>
</html>
Trong ví dụ này, chúng ta đã nhúng thư viện jQuery và sử dụng nó để chọn phần tử có cùng ID “uniqueId”. Một khi tài liệu được tải, nội dung của phần tử đầu tiên với ID “uniqueId” sẽ được log ra màn hình console. Lưu ý rằng jQuery chỉ chọn phần tử đầu tiên nếu có nhiều phần tử có cùng ID.
2.2. ID Selector với ký tự đặc biệt Special Characters
Dưới đây là một ví dụ minh họa việc sử dụng ID Selector trong trường hợp ID của phần tử chứa kí tự đặc biệt. Vấn đề mà bạn đề cập đến xảy ra khi bạn muốn chọn một phần tử theo ID trong jQuery, nhưng ID đó chứa các kí tự được sử dụng trong cú pháp CSS.
Trong cú pháp CSS, có một số kí tự đặc biệt hoặc có ý nghĩa riêng, ví dụ như dấu chấm (.), dấu hai chấm (:), dấu cách ( ), và một số kí tự khác.
Tuy nhiên, khi bạn sử dụng jQuery để chọn một phần tử theo ID, jQuery sử dụng cú pháp CSS để xác định phần tử đó, nghĩa là nó sẽ diễn giải ID theo cú pháp CSS. Điều này có thể dẫn đến việc ID chứa các kí tự đặc biệt bị hiểu sai hoặc gây lỗi trong việc chọn phần tử.
Để giải quyết vấn đề này, bạn cần phải “escape” các kí tự đặc biệt này. Điều này được thực hiện bằng cách đặt hai dấu gạch chéo ngược (\\) trước kí tự đặc biệt đó. Bằng cách làm này, bạn báo cho jQuery biết rằng hãy xem xét kí tự đó theo nghĩa đen, không phải theo cú pháp CSS.
<!DOCTYPE html>
<html>
<head>
<title>ID Selector with Special Characters</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="my.id">Element with ID containing a dot</div>
<div id="my:element">Element with ID containing a colon</div>
<script>
$(document).ready(function() {
var element1 = $("#my\\.id"); // Chọn phần tử có ID "my.id"
var element2 = $("#my\\:element"); // Chọn phần tử có ID "my:element"
// Thay đổi màu nền của các phần tử được chọn
element1.css("background-color", "yellow");
element2.css("background-color", "lightblue");
});
</script>
</body>
</html>
Trong ví dụ này, chúng ta tạo hai phần tử có ID chứa kí tự đặc biệt (dấu chấm và dấu hai chấm). Sau đó, chúng ta sử dụng ID Selector của jQuery để chọn và thay đổi màu nền của các phần tử có ID đó. Lưu ý cách sử dụng dấu gạch chéo ngược (\\) để thoát các kí tự đặc biệt trong ID.
2.3. Sử dụng ID Selector để tạo game bắt chuột
Dưới đây là một ví dụ về sử dụng ID Selector để tạo game bắt chuột. Trong trò chơi này, người chơi cố gắng bắt con chuột bằng cách di chuyển chuột, và mỗi lần bắt được con chuột, số điểm sẽ tăng lên.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Bắt Con Chuột - Advanced jQuery Game</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
margin: 0;
}
#gameContainer {
width: 300px;
height: 300px;
border: 1px solid black;
position: relative;
margin-bottom: 20px;
}
#mouse {
width: 20px;
height: 20px;
background-color: gray;
border-radius: 50%;
position: absolute;
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var score = 0;
var gameInterval;
var gameDuration = 60; // seconds
var gameTimeLeft = gameDuration;
var gameRunning = false;
function startGame() {
gameTimeLeft = gameDuration;
score = 0;
$('#score').text('Score: ' + score);
clearInterval(gameInterval);
gameInterval = setInterval(function() {
gameTimeLeft--;
if (gameTimeLeft <= 0) {
clearInterval(gameInterval);
alert('Game Over! Your score is: ' + score);
gameRunning = false;
$('#startButton').prop('disabled', false);
$('#gameContainer').off('click');
$('#mouse').hide();
}
$('#timeLeft').text('Time Left: ' + gameTimeLeft + 's');
if (gameRunning) {
$('#mouse').css('left', Math.random() * 280 + 'px');
$('#mouse').css('top', Math.random() * 280 + 'px');
$('#mouse').show();
}
}, Math.random() * 1000 + 1000); // Random time between 1-2 seconds
}
$(document).ready(function() {
$('#startButton').click(function() {
gameRunning = true;
$('#startButton').prop('disabled', true);
$('#gameContainer').on('click', '#mouse', function() {
if ($('#mouse').is(':visible')) {
score++;
$('#score').text('Score: ' + score);
$('#mouse').hide();
}
});
startGame();
});
});
</script>
</head>
<body>
<button id="startButton">Start Game</button>
<div id="gameContainer">
<div id="mouse"></div>
</div>
<div id="score">Score: 0</div>
<div id="timeLeft">Time Left: 60s</div>
</body>
</html>
Trong trò chơi này, mỗi lần người chơi bắt được con chuột, điểm sẽ tăng lên và con chuột sẽ di chuyển đến vị trí mới ngẫu nhiên trong khung chơi. Người chơi cố gắng bắt càng nhanh càng tốt để đạt được điểm cao.
