jQuery Selector: Cách chọn phần tử HTML bằng ID, Class, Attribute và CSS

• Bùi Tấn Lực
• 105
• 04/09/2026

Trong jQuery, selector là cơ chế giúp xác định chính xác phần tử HTML mà đoạn mã JavaScript cần thao tác. Thay vì phải duyệt từng phần tử trong tài liệu, bạn có thể mô tả đối tượng cần tìm bằng ID, class, thuộc tính, tên thẻ hoặc kết hợp nhiều điều kiện CSS. Đây là nền tảng của rất nhiều thao tác quen thuộc như thay đổi nội dung, cập nhật giao diện, xử lý sự kiện, kiểm tra trạng thái biểu mẫu và thao tác với DOM.

Điểm quan trọng là selector không chỉ đơn giản là cách viết một chuỗi ký tự để tìm phần tử. Một selector tốt cần phản ánh đúng cấu trúc HTML, đủ cụ thể để tránh chọn nhầm đối tượng và đủ linh hoạt để không phải sửa JavaScript mỗi khi giao diện thay đổi nhỏ. Khi hiểu đúng nguyên tắc này, việc sử dụng jQuery sẽ rõ ràng và dễ kiểm soát hơn rất nhiều.

Selector trong jQuery hoạt động như thế nào?

Selector được truyền vào hàm $() để jQuery tìm các phần tử phù hợp trong DOM. Kết quả trả về là một đối tượng jQuery chứa những phần tử được chọn. Từ đối tượng này, bạn có thể tiếp tục gọi các phương thức để đọc dữ liệu, thay đổi nội dung, chỉnh thuộc tính hoặc gắn sự kiện.

Ví dụ, nếu HTML có một phần tử mang ID là menu, selector tương ứng sẽ bắt đầu bằng ký hiệu #. Nếu muốn tìm các phần tử có class item, selector sẽ sử dụng dấu chấm ..

<div id="menu">Menu chính</div>
<div class="item">Sản phẩm 1</div>
<div class="item">Sản phẩm 2</div>

<script>
$("#menu");
$(".item");
</script>

Trong ví dụ trên, $("#menu") tìm phần tử có ID là menu, còn $(".item") tìm tất cả phần tử có class item. Một selector có thể trả về một phần tử hoặc nhiều phần tử tùy vào điều kiện được mô tả.

Selector của jQuery dựa rất nhiều trên cú pháp selector của CSS. Vì vậy, nếu đã quen với CSS, bạn có lợi thế lớn khi học cách truy vấn phần tử bằng jQuery. Sự khác biệt nằm ở chỗ selector trong jQuery không chỉ dùng để áp dụng kiểu hiển thị mà còn trở thành đầu vào cho các thao tác JavaScript.

Chọn phần tử bằng ID khi cần xác định đối tượng cụ thể

ID phù hợp khi một phần tử có định danh duy nhất trong trang. Cú pháp cơ bản sử dụng dấu # phía trước giá trị ID.

<button id="btnSubmit">Gửi dữ liệu</button>

<script>
$("#btnSubmit");
</script>

Trong trường hợp này, selector #btnSubmit hướng trực tiếp tới nút có ID tương ứng. Đây thường là lựa chọn rõ ràng khi bạn biết chính xác phần tử cần thao tác.

ID đặc biệt hữu ích với những thành phần có vai trò riêng biệt như vùng thông báo, hộp tìm kiếm, nút xác nhận, khu vực nội dung hoặc một biểu mẫu cụ thể. Tuy nhiên, không nên tùy tiện gán ID cho hàng loạt phần tử nếu chúng thực chất thuộc cùng một nhóm.

Khi nào nên ưu tiên ID?

Nên dùng ID khi đối tượng có tính duy nhất và JavaScript thực sự cần nhắm tới chính đối tượng đó. Ví dụ, một hộp thông báo chỉ xuất hiện một lần trên trang có thể được định danh bằng ID.

<div id="message"></div>

<script>
$("#message").text("Dữ liệu đã được lưu.");
</script>

Ở đây, selector không cần thêm điều kiện khác vì ID đã đủ để xác định đối tượng. Cách viết này vừa dễ đọc vừa thể hiện rõ ý định của mã JavaScript.

Tuy nhiên, nếu một giao diện có nhiều phần tử giống nhau thì việc sử dụng ID lặp lại là sai về mặt cấu trúc HTML. Khi đó, class hoặc selector dựa trên quan hệ giữa các phần tử sẽ phù hợp hơn.

Chọn nhiều phần tử bằng Class

Class được sử dụng khi nhiều phần tử cùng thuộc một nhóm hoặc cùng có một đặc điểm cần thao tác. Trong selector, class được biểu diễn bằng dấu . đứng trước tên class.

<div class="product">Sản phẩm 1</div>
<div class="product">Sản phẩm 2</div>
<div class="product">Sản phẩm 3</div>

<script>
$(".product");
</script>

Selector .product sẽ lấy toàn bộ các phần tử mang class này. Đây là cách rất phù hợp khi cần xử lý đồng thời một nhóm đối tượng.

Chẳng hạn, bạn muốn thêm một sự kiện click cho tất cả nút có cùng class:

<button class="btn-action">Lưu</button>
<button class="btn-action">Xóa</button>
<button class="btn-action">Chia sẻ</button>

<script>
$(".btn-action").on("click", function() {
    console.log("Một nút đã được nhấn.");
});
</script>

Điểm đáng chú ý là jQuery có thể áp dụng thao tác lên toàn bộ tập phần tử được selector tìm thấy. Bạn không nhất thiết phải viết riêng một đoạn JavaScript cho từng nút.

Kết hợp nhiều class để tăng độ chính xác

Trong một số giao diện, chỉ sử dụng một class có thể chưa đủ chính xác. jQuery cho phép ghép nhiều class theo cú pháp selector CSS.

<button class="btn primary">Xác nhận</button>
<button class="btn secondary">Hủy</button>
<button class="btn primary">Tiếp tục</button>

<script>
$(".btn.primary");
</script>

Selector .btn.primary chỉ chọn phần tử đồng thời có cả hai class btn và primary. Đây là điểm khác với việc viết hai selector riêng biệt, bởi mục tiêu ở đây là tìm phần tử thỏa mãn đồng thời nhiều điều kiện.

Cách kết hợp class đặc biệt hữu ích khi một class mô tả vai trò chung, còn class thứ hai mô tả trạng thái hoặc biến thể của phần tử. Nó giúp selector cụ thể hơn mà không cần phụ thuộc vào ID.

Chọn phần tử theo tên thẻ HTML

jQuery cũng cho phép chọn trực tiếp theo tên thẻ HTML. Đây là dạng selector đơn giản nhất và phù hợp khi muốn tác động đến toàn bộ phần tử cùng loại trong một phạm vi.

<p>Đoạn văn thứ nhất</p>
<p>Đoạn văn thứ hai</p>
<p>Đoạn văn thứ ba</p>

<script>
$("p");
</script>

Selector p sẽ tìm các phần tử đoạn văn. Tương tự, có thể sử dụng tên của các thẻ khác như input, button, table hoặc img.

Tuy nhiên, selector theo tên thẻ thường có phạm vi khá rộng. Nếu trang có nhiều phần tử cùng loại nhưng chỉ một nhóm cần xử lý, nên kết hợp tên thẻ với class, ID hoặc quan hệ giữa các phần tử để hạn chế việc chọn nhầm.

<div class="content">
    <p>Nội dung cần xử lý</p>
    <p>Thông tin bổ sung</p>
</div>

<div class="sidebar">
    <p>Nội dung bên cạnh</p>
</div>

<script>
$(".content p");
</script>

Trong ví dụ này, $(".content p") chỉ tìm các thẻ p nằm bên trong phần tử có class content. Đây là một bước quan trọng để selector có phạm vi rõ ràng hơn thay vì tác động tới tất cả đoạn văn trên trang.

Chọn phần tử bằng Attribute

Attribute selector hữu ích khi phần tử cần tìm không có ID hoặc class phù hợp, nhưng lại có một thuộc tính đặc trưng. Cú pháp cơ bản đặt tên thuộc tính trong cặp dấu ngoặc vuông.

<input type="text" name="username">
<input type="email" name="email">
<input type="password" name="password">

<script>
$("input[name='username']");
</script>

Selector trên tìm thẻ input có thuộc tính name bằng username. Cách này đặc biệt hữu ích với biểu mẫu, nơi các thuộc tính như name, type, value, data-* hoặc trạng thái của phần tử thường mang nhiều ý nghĩa.

Các dạng kiểm tra Attribute thường dùng

Selector attribute không chỉ kiểm tra giá trị chính xác. Có thể sử dụng nhiều dạng điều kiện khác nhau để mô tả phạm vi tìm kiếm linh hoạt hơn.

input[name="email"]
input[type="text"]
input[name]
a[href]
a[href^="https"]
a[href$=".pdf"]
a[href*="download"]

Trong đó, selector có dấu = yêu cầu giá trị thuộc tính khớp chính xác. Dấu ^= kiểm tra giá trị bắt đầu bằng chuỗi chỉ định, $= kiểm tra phần kết thúc, còn *= tìm trường hợp giá trị có chứa chuỗi đó.

Ví dụ, nếu muốn xác định các liên kết HTTPS:

<a href="https://example.com">Trang chủ</a>
<a href="http://example.com">Trang cũ</a>

<script>
$("a[href^='https']");
</script>

Selector này không phụ thuộc vào một URL cụ thể mà chỉ quan tâm đến phần đầu của giá trị href. Điều đó giúp truy vấn có tính linh hoạt cao hơn trong những trường hợp dữ liệu thay đổi.

Attribute selector cũng có thể kết hợp với class hoặc tên thẻ. Khi đó, điều kiện được thu hẹp dần cho đến khi chỉ còn đúng nhóm phần tử cần thao tác.

<input class="form-control" type="email" name="email">
<input class="form-control" type="text" name="username">

<script>
$("input.form-control[type='email']");
</script>

Cách viết này cho phép jQuery chỉ chọn input vừa có class form-control, vừa có kiểu email. Khi giao diện lớn và có nhiều phần tử tương tự nhau, việc kết hợp điều kiện đúng cách sẽ giúp giảm đáng kể khả năng selector tác động sai đối tượng.

Kết hợp selector CSS để xác định đúng phạm vi phần tử

Điểm mạnh của jQuery selector nằm ở khả năng kết hợp nhiều điều kiện giống CSS. Thay vì chỉ tìm một phần tử theo ID hoặc class, bạn có thể mô tả cả vị trí của phần tử trong cấu trúc DOM. Điều này đặc biệt hữu ích khi một trang có nhiều khu vực sử dụng các class giống nhau.

Ví dụ, cùng một class item có thể xuất hiện ở phần nội dung chính và thanh bên. Nếu chỉ dùng .item, jQuery sẽ lấy tất cả phần tử phù hợp. Khi chỉ muốn lấy các phần tử nằm trong khu vực nội dung, có thể giới hạn selector bằng cách kết hợp class cha và class con.

<div class="content">
    <div class="item">Sản phẩm A</div>
    <div class="item">Sản phẩm B</div>
</div>

<aside class="sidebar">
    <div class="item">Thông tin khác</div>
</aside>

<script>
$(".content .item");
</script>

Selector .content .item chỉ quan tâm đến những phần tử có class item nằm bên trong khu vực content. Đây là cách tạo phạm vi truy vấn rõ ràng mà không cần thay đổi HTML chỉ để phục vụ JavaScript.

Phân biệt phần tử con trực tiếp và phần tử nằm bên trong

Khoảng trắng giữa hai selector thể hiện quan hệ hậu duệ, nghĩa là phần tử thứ hai nằm ở bên trong phần tử thứ nhất ở bất kỳ cấp nào. Trong khi đó, dấu > chỉ chọn phần tử con trực tiếp.

<div class="box">
    <p>Đoạn văn trực tiếp</p>

    <div class="inner">
        <p>Đoạn văn bên trong</p>
    </div>
</div>

<script>
$(".box p");
$(".box > p");
</script>

.box p có thể chọn cả hai thẻ p vì chúng đều nằm bên trong .box. Ngược lại, .box > p chỉ chọn thẻ p là con trực tiếp của .box.

Sự khác biệt này rất quan trọng khi xây dựng selector cho giao diện nhiều tầng. Nếu sử dụng khoảng trắng trong khi thực tế chỉ muốn thao tác với cấp con trực tiếp, mã JavaScript có thể vô tình tác động tới những phần tử nằm sâu hơn.

Chọn phần tử cùng cấp bằng các quan hệ CSS

Ngoài quan hệ cha - con, jQuery còn hỗ trợ các selector dựa trên phần tử đứng trước hoặc sau trong cùng một cấu trúc. Dấu + dùng để chọn phần tử ngay sau một phần tử khác, còn dấu ~ dùng để chọn những phần tử cùng cấp xuất hiện phía sau.

<label>Tên tài khoản</label>
<input type="text">
<input type="email">

<script>
$("label + input");
$("label ~ input");
</script>

Trong ví dụ này, label + input chỉ chọn input đứng ngay sau label. Trong khi đó, label ~ input có thể chọn các input cùng cấp xuất hiện sau label.

Những selector dạng quan hệ nên được sử dụng khi cấu trúc HTML thực sự mang ý nghĩa. Nếu thứ tự phần tử có thể thay đổi thường xuyên, việc phụ thuộc quá chặt vào vị trí có thể khiến mã JavaScript khó bảo trì.

Nhóm nhiều selector khi cùng xử lý một tập phần tử

Khi nhiều nhóm phần tử cần thực hiện cùng một thao tác, jQuery cho phép ghép selector bằng dấu phẩy. Mỗi selector trong nhóm được xem như một điều kiện độc lập và kết quả được tập hợp lại thành một đối tượng jQuery.

<button class="btn-save">Lưu</button>
<button class="btn-delete">Xóa</button>
<a class="btn-link" href="#">Xem thêm</a>

<script>
$(".btn-save, .btn-delete, .btn-link");
</script>

Cách này phù hợp khi các phần tử không có chung một class nhưng vẫn cần được xử lý theo cùng một quy tắc. Chẳng hạn, một thao tác có thể áp dụng cho nhiều loại nút hoặc nhiều thành phần có vai trò tương tự.

Tuy nhiên, nếu một nhóm phần tử thường xuyên được xử lý cùng nhau, việc tạo một class dùng chung có thể làm HTML và JavaScript dễ quản lý hơn. Selector ghép bằng dấu phẩy nên được dùng khi các đối tượng thực sự khác nhau về cấu trúc nhưng có chung nhu cầu xử lý.

Sử dụng selector theo trạng thái của phần tử

CSS và jQuery cung cấp nhiều pseudo-selector để xác định trạng thái hoặc đặc điểm của phần tử. Chúng đặc biệt hữu ích với biểu mẫu, danh sách và những giao diện có trạng thái thay đổi theo thao tác của người dùng.

<input type="text" disabled>
<input type="text">
<input type="checkbox" checked>
<input type="checkbox">

<script>
$("input:disabled");
$("input:enabled");
$("input:checked");
</script>

Selector :disabled tìm các phần tử đang bị vô hiệu hóa, :enabled tìm các phần tử có thể tương tác và :checked xác định những checkbox hoặc radio đang được chọn.

Điều này giúp mã xử lý trạng thái trở nên trực tiếp hơn. Thay vì lấy toàn bộ input rồi kiểm tra từng phần tử bằng nhiều điều kiện JavaScript, selector có thể thu hẹp ngay tập đối tượng cần xử lý.

Selector cho phần tử đầu và cuối trong tập kết quả

Với danh sách nhiều phần tử giống nhau, đôi khi cần xác định phần tử đầu tiên hoặc cuối cùng. jQuery cung cấp các selector như :first và :last cho những trường hợp này.

<ul class="menu">
    <li>Trang chủ</li>
    <li>Sản phẩm</li>
    <li>Liên hệ</li>
</ul>

<script>
$(".menu li:first");
$(".menu li:last");
</script>

Selector đầu tiên lấy phần tử li đầu tiên trong tập được truy vấn, còn selector thứ hai lấy phần tử cuối cùng. Đây là cách nhanh để xử lý những trường hợp đơn giản mà không cần thêm class riêng vào HTML.

Tuy nhiên, cần phân biệt selector theo tập kết quả với pseudo-class CSS như :first-child. Hai cách này không phải lúc nào cũng mang cùng một ý nghĩa. Khi mục tiêu là xác định phần tử dựa trên vị trí thực tế trong DOM, :first-child thường thể hiện rõ hơn điều kiện cấu trúc.

<ul class="menu">
    <li>Trang chủ</li>
    <li>Sản phẩm</li>
    <li>Liên hệ</li>
</ul>

<script>
$(".menu li:first-child");
$(".menu li:last-child");
</script>

:first-child chỉ chọn phần tử nếu nó là con đầu tiên của phần tử cha. Tương tự, :last-child yêu cầu phần tử phải là con cuối cùng. Vì vậy, hai dạng selector này nên được lựa chọn dựa trên ý nghĩa thực tế của giao diện thay vì chỉ dựa vào việc chúng trả về kết quả giống nhau trong một HTML đơn giản.

Lọc phần tử bằng điều kiện nội dung và vị trí

Trong những giao diện có cấu trúc lặp lại, selector đôi khi cần lọc thêm dựa trên nội dung hoặc vị trí. jQuery cung cấp một số bộ lọc giúp xử lý các trường hợp này thuận tiện hơn.

Ví dụ, :contains() có thể tìm phần tử chứa một chuỗi văn bản nhất định.

<ul class="list">
    <li>Học HTML</li>
    <li>Học CSS</li>
    <li>Học jQuery</li>
</ul>

<script>
$(".list li:contains('jQuery')");
</script>

Selector trên hướng tới phần tử li có chứa chuỗi jQuery. Cách này có thể hữu ích trong một số tình huống tìm kiếm đơn giản, nhưng không nên biến nội dung hiển thị thành định danh chính cho logic quan trọng. Nội dung có thể thay đổi do biên tập, dịch ngôn ngữ hoặc cập nhật giao diện.

Lọc theo số thứ tự với selector phù hợp

Khi cần lấy một phần tử theo vị trí trong danh sách, có thể sử dụng các bộ lọc như :eq(), :lt() và :gt().

<ul class="items">
    <li>Mục 1</li>
    <li>Mục 2</li>
    <li>Mục 3</li>
    <li>Mục 4</li>
</ul>

<script>
$(".items li:eq(1)");
$(".items li:lt(2)");
$(".items li:gt(1)");
</script>

Với cách đánh chỉ số của jQuery, eq(1) tương ứng với phần tử thứ hai trong tập kết quả vì chỉ số bắt đầu từ 0. :lt(2) lấy những phần tử có chỉ số nhỏ hơn 2, còn :gt(1) lấy những phần tử có chỉ số lớn hơn 1.

Những selector dựa trên vị trí rất tiện khi xử lý danh sách có cấu trúc ổn định. Nhưng nếu phần tử được thêm, xóa hoặc sắp xếp lại thường xuyên, việc dựa vào số thứ tự có thể khiến logic thay đổi ngoài dự kiến. Trong trường hợp đó, định danh bằng class, attribute hoặc trạng thái thường bền vững hơn.

Cách chọn selector phù hợp để mã jQuery dễ bảo trì

Viết được selector chưa đồng nghĩa với việc selector đó tốt. Trong dự án thực tế, selector nên vừa chính xác vừa ít phụ thuộc vào những chi tiết giao diện không ổn định.

• Ưu tiên ID khi phần tử thực sự duy nhất và có định danh rõ ràng.
• Ưu tiên class khi cần xử lý một nhóm phần tử hoặc một vai trò giao diện.
• Dùng attribute khi thuộc tính mang thông tin định danh đáng tin cậy.
• Dùng quan hệ CSS khi vị trí của phần tử trong DOM có ý nghĩa rõ ràng.
• Hạn chế selector quá dài nếu có thể đạt cùng mục tiêu bằng một selector ngắn và ổn định hơn.
• Không phụ thuộc vào nội dung hiển thị nếu nội dung có khả năng thay đổi.
• Không phụ thuộc quá nhiều vào vị trí nếu danh sách có thể được thêm, xóa hoặc sắp xếp lại.

Một selector tốt không nhất thiết phải ngắn nhất. Tiêu chí quan trọng hơn là nó phải thể hiện đúng đối tượng mà JavaScript cần thao tác và vẫn hoạt động khi giao diện có những thay đổi hợp lý.

Ví dụ, nếu một nút có class riêng để đại diện cho hành động lưu dữ liệu, việc chọn bằng class sẽ thường dễ hiểu hơn một selector dài dựa trên hàng loạt thẻ cha.

<div class="form">
    <div class="actions">
        <button class="save-button">Lưu</button>
    </div>
</div>

<script>
$(".save-button");
</script>

Selector .save-button đã diễn đạt trực tiếp mục tiêu. Nếu viết selector phụ thuộc vào toàn bộ chuỗi cấu trúc .form .actions button, mã có thể trở nên dễ vỡ hơn khi giao diện được tổ chức lại nhưng chức năng của nút vẫn không thay đổi.

Kết hợp selector với thao tác DOM trong jQuery

Selector chỉ thực sự phát huy giá trị khi kết hợp với các phương thức thao tác DOM. Một selector xác định đối tượng, còn phương thức phía sau quyết định jQuery sẽ làm gì với đối tượng đó. Vì vậy, nên xem selector và thao tác DOM là hai phần liên kết với nhau thay vì học tách rời.

Ví dụ, có thể tìm một phần tử theo class rồi thay đổi nội dung bằng text():

<div class="status">Đang xử lý...</div>

<script>
$(".status").text("Hoàn tất.");
</script>

Tương tự, selector có thể được dùng với html(), attr(), val(), addClass(), removeClass() và nhiều phương thức khác.

<input class="username" type="text" value="Nguyen Van A">
<div class="message">Thông báo</div>

<script>
$(".username").val("Nguyen Van B");
$(".message").addClass("active");
</script>

Điểm cần chú ý là selector càng chính xác thì phạm vi tác động của thao tác càng dễ kiểm soát. Nếu selector chọn nhiều phần tử trong khi bạn chỉ muốn thay đổi một đối tượng, kết quả có thể không giống dự định.

Selector trong xử lý sự kiện và nội dung động

Một trường hợp thường gặp là gắn sự kiện cho những phần tử có sẵn trên trang. Selector được sử dụng để xác định nhóm đối tượng cần phản hồi khi người dùng tương tác.

<button class="btn-delete">Xóa</button>
<button class="btn-delete">Xóa</button>

<script>
$(".btn-delete").on("click", function() {
    console.log("Đã nhấn nút xóa.");
});
</script>

Cách này phù hợp khi các nút đã tồn tại tại thời điểm đoạn JavaScript được thực thi. Nhưng với giao diện sử dụng AJAX hoặc JavaScript để thêm phần tử sau đó, những phần tử mới có thể không nhận được sự kiện nếu chỉ gắn trực tiếp theo cách trên.

Khi phần tử được tạo động, có thể sử dụng event delegation thông qua một phần tử cha ổn định.

<div id="list">
    <button class="btn-delete">Xóa</button>
</div>

<script>
$("#list").on("click", ".btn-delete", function() {
    console.log("Đã nhấn nút.");
});
</script>

Ở đây, sự kiện được lắng nghe trên #list, trong khi selector .btn-delete xác định đối tượng thực sự cần phản hồi. Nếu sau này một nút mới được thêm vào bên trong #list, cơ chế này vẫn có thể xử lý nó mà không cần đăng ký lại sự kiện riêng.

Selector nâng cao với nhiều điều kiện

Trong giao diện phức tạp, một selector có thể kết hợp tên thẻ, class và attribute để xác định chính xác nhóm phần tử. Tuy nhiên, nên thêm điều kiện vì lý do thực tế chứ không phải chỉ để selector trông có vẻ chi tiết hơn.

<input class="form-control" type="text" name="username">
<input class="form-control" type="email" name="email">
<input class="form-control" type="password" name="password">

<script>
$("input.form-control[name='email']");
</script>

Selector trên xác định một input dựa trên ba đặc điểm: nó là thẻ input, có class form-control và có thuộc tính name bằng email. Đây là cách hữu ích khi một class được sử dụng chung cho nhiều trường nhưng JavaScript chỉ cần thao tác với một trường cụ thể.

Selector cũng có thể kiểm tra sự tồn tại của attribute mà không cần quan tâm đến giá trị.

<input type="text" required>
<input type="text">
<input type="email" required>

<script>
$("input[required]");
</script>

Selector input[required] sẽ lấy những input có attribute required. Cách này đặc biệt phù hợp khi HTML đã sử dụng attribute như một phần của quy tắc giao diện hoặc biểu mẫu.

Kiểm tra selector trước khi thực hiện thao tác

Một lỗi phổ biến khi viết jQuery là giả định selector luôn tìm thấy phần tử. Trên thực tế, selector có thể trả về tập rỗng nếu ID, class, attribute hoặc cấu trúc HTML không đúng như dự kiến.

Có thể kiểm tra số lượng phần tử được chọn thông qua thuộc tính length.

<div class="message">Thông báo</div>

<script>
if ($(".message").length > 0) {
    $(".message").text("Đã tìm thấy phần tử.");
}
</script>

Việc kiểm tra này đặc biệt hữu ích với các đoạn JavaScript được sử dụng trên nhiều trang khác nhau. Một class có thể tồn tại ở trang này nhưng không tồn tại ở trang khác. Thay vì giả định cấu trúc luôn giống nhau, mã có thể xác nhận đối tượng trước khi thực hiện logic tiếp theo.

Tuy nhiên, không phải trường hợp nào cũng cần kiểm tra length. Nếu đoạn mã chỉ chạy trong một trang mà HTML bắt buộc phải có phần tử đó, việc kiểm tra dư thừa có thể khiến code dài hơn mà không đem lại lợi ích đáng kể. Điều quan trọng là hiểu rõ phạm vi sử dụng của JavaScript.

Những lỗi thường gặp khi viết jQuery Selector

Quên ký hiệu khi chọn ID và Class

ID phải có dấu #, còn class phải có dấu .. Nếu bỏ ký hiệu này, jQuery sẽ hiểu chuỗi đó theo một loại selector khác.

<div id="content">Nội dung</div>
<div class="item">Mục</div>

<script>
$("#content");
$(".item");
</script>

Đây là lỗi đơn giản nhưng khá dễ gặp khi chuyển đổi qua lại giữa tên class, tên ID và cú pháp selector.

Selector quá rộng

Dùng selector như div hoặc input trong một trang lớn có thể lấy số lượng phần tử nhiều hơn dự kiến. Nếu thao tác tiếp theo làm thay đổi nội dung, class hoặc attribute, hậu quả có thể lan sang nhiều khu vực khác.

Thay vì chọn toàn bộ input, nên giới hạn phạm vi khi mục tiêu chỉ nằm trong một biểu mẫu cụ thể.

<form id="register">
    <input type="text" name="username">
    <input type="email" name="email">
</form>

<form id="search">
    <input type="text" name="keyword">
</form>

<script>
$("#register input");
</script>

Selector này giúp phạm vi tìm kiếm chỉ nằm trong biểu mẫu có ID register, thay vì tác động tới tất cả input trên trang.

Phụ thuộc quá nhiều vào cấu trúc DOM

Một selector có thể trở nên khó bảo trì nếu nó mô tả quá nhiều tầng HTML không thực sự cần thiết.

<div class="container">
    <div class="row">
        <div class="column">
            <button class="save">Lưu</button>
        </div>
    </div>
</div>

<script>
$(".container .row .column button.save");
</script>

Nếu class save đã được dùng riêng cho nút cần xử lý, selector dài như trên có thể không cần thiết. Một selector ngắn hơn sẽ ít phụ thuộc vào cách bố trí các lớp bao ngoài.

$(".save");

Tuy nhiên, selector dài không phải lúc nào cũng sai. Nếu có nhiều nút save ở những khu vực khác nhau và chỉ một khu vực cần xử lý, việc giới hạn phạm vi là hoàn toàn hợp lý. Mục tiêu không phải là làm selector ngắn nhất mà là làm nó đúng và ổn định.

Tối ưu selector để giao diện lớn hoạt động ổn định

Với trang nhỏ, sự khác biệt về hiệu suất giữa nhiều cách viết selector thường không đáng kể. Nhưng ở giao diện có DOM lớn, bảng dữ liệu nhiều dòng hoặc các thao tác được thực hiện liên tục, việc giảm phạm vi tìm kiếm sẽ giúp mã dễ kiểm soát và có thể giảm công việc truy vấn không cần thiết.

Một nguyên tắc thực tế là bắt đầu truy vấn từ phần tử có phạm vi rõ ràng khi điều đó giúp loại bỏ một lượng lớn đối tượng không liên quan.

<div id="products">
    <div class="item">Sản phẩm 1</div>
    <div class="item">Sản phẩm 2</div>
</div>

<div id="news">
    <div class="item">Tin tức 1</div>
</div>

<script>
$("#products .item");
</script>

Selector này thể hiện rõ rằng chỉ những .item bên trong khu vực sản phẩm mới là đối tượng cần xử lý. Nó đồng thời tránh việc lấy cả .item thuộc khu vực tin tức.

Quan trọng hơn hiệu suất thuần túy là khả năng bảo trì. Selector nên dựa vào những class hoặc attribute có ý nghĩa đối với chức năng, thay vì phụ thuộc vào class chỉ phục vụ trình bày hoặc cấu trúc bố cục có thể thay đổi.

Nguyên tắc xây dựng selector bền vững trong dự án thực tế

Khi dự án jQuery phát triển, HTML thường thay đổi theo thiết kế mới, nội dung mới hoặc yêu cầu nghiệp vụ. Selector được viết tốt từ đầu sẽ giúp hạn chế việc phải sửa JavaScript chỉ vì một phần giao diện được tổ chức lại.

• Chọn ID cho đối tượng thực sự duy nhất, không dùng ID như một class chung.
• Dùng class có ý nghĩa chức năng nếu JavaScript thường xuyên cần truy cập một nhóm phần tử.
• Tận dụng attribute khi attribute đó chứa thông tin đáng tin cậy và ổn định.
• Giới hạn phạm vi truy vấn khi trang có nhiều nhóm phần tử giống nhau.
• Tránh phụ thuộc vào thứ tự nếu danh sách có thể thay đổi.
• Tránh selector quá sâu nếu một selector đơn giản hơn đã xác định đúng đối tượng.
• Không dùng nội dung hiển thị làm định danh chính cho những logic quan trọng.
• Thiết kế HTML và JavaScript có chủ đích để các phần tử cần tương tác có dấu hiệu nhận biết rõ ràng.

Trong một dự án lâu dài, selector tốt không chỉ giúp jQuery tìm được phần tử ở thời điểm hiện tại mà còn giúp mã JavaScript ít bị ảnh hưởng khi giao diện thay đổi. Đây là lý do nên xem selector như một phần của kiến trúc giao diện thay vì chỉ là cú pháp truy vấn.

Tổng kết cách sử dụng selector hiệu quả

Selector là một trong những nền tảng quan trọng nhất khi làm việc với jQuery. Từ những cú pháp đơn giản như chọn theo ID, class và tên thẻ, bạn có thể mở rộng thành selector dựa trên attribute, quan hệ giữa các phần tử, trạng thái, vị trí và nhiều điều kiện CSS khác.

Cách tiếp cận hiệu quả nhất là xác định chính xác đối tượng cần thao tác trước, sau đó chọn selector ngắn gọn nhưng đủ đặc trưng để tìm đúng đối tượng đó. Không nên chạy theo selector phức tạp chỉ vì có thể viết được nhiều điều kiện.

Khi làm việc với dự án thực tế, hãy ưu tiên những selector thể hiện rõ mục đích của chức năng. Nếu một nút dùng để thực hiện hành động cụ thể, class dành cho hành động đó thường có giá trị hơn việc phụ thuộc vào hàng loạt thẻ cha. Nếu một trường biểu mẫu có attribute ổn định, attribute selector có thể là lựa chọn hợp lý. Nếu nhiều phần tử được tạo động, cần tính đến event delegation ngay từ cách tổ chức selector.

Nắm chắc những nguyên tắc này sẽ giúp bạn không chỉ viết được jQuery selector mà còn xây dựng được mã JavaScript dễ đọc, ít lỗi và có khả năng thích ứng tốt hơn khi cấu trúc giao diện thay đổi.

Bùi Tấn Lực

Đánh giá

Chia sẻ nội dung đánh giá của bạn về jQuery Selector: Cách chọn phần tử HTML bằng ID, Class, Attribute và CSS
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp