jQuery Selector là gì: Cách dùng 7 selector phổ biến

Nội dung bài viết

jQuery selector là công cụ cốt lõi trong lập trình front-end, giúp bạn tiếp cận và thao tác phần tử HTML trong trang web một cách dễ dàng. Bài viết này sẽ cung cấp cho bạn một hướng dẫn toàn diện về các loại selector trong jQuery, từ cơ bản nhất như ID, class, tag cho đến các selector nâng cao như attribute, hierarchy và pseudo-class.

Đọc bài viết sau để được giải đáp chi tiết hơn về:

Định nghĩa và các đặc điểm nổi bật của jQuery selector
Cách hoạt động của jQuery selector
Các jQuery selector phổ biến: đặc điểm, ví dụ sử dụng
Cách cache selector để tối ưu hiệu suất jQuery

Tổng quan về jQuery selector

jQuery selector là các hàm cho phép bạn nhắm mục tiêu và chọn các phần tử HTML trong DOM bằng cú pháp $() dựa trên tên phần tử, ID, lớp, thuộc tính,… giúp thao tác và tương tác dễ dàng hơn.

Ví dụ:

$("#myId")

$(".myClass")

$("div")

$("[data-attr]")

Ưu điểm của jQuery selector chính là sử dụng cú pháp quen thuộc tương tự như CSS, hỗ trợ đa dạng các loại selector từ cơ bản đến nâng cao. Nhờ vậy, jQuery selector đã trở thành một trong những công cụ không thể thiếu trong lập trình front-end hiện đại, giúp viết code dễ đọc, dễ bảo trì, tăng tốc độ phát triển web và tối ưu hiệu suất xử lý tương tác với giao diện người dùng.

Xem thêm: Những điều cần biết về jQuery – Thư viện Javascript hàng đầu

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

Câu lệnh của jQuery selector nhìn có vẻ đơn giản như $(".className") thực chất lại trải qua nhiều bước xử lý phức tạp để mang đến cho bạn kết quả chính xác và nhanh chóng.

Khi bạn truyền một chuỗi selector vào jQuery, ví dụ như:

$(".highlight")

jQuery sẽ thực hiện các bước sau:

Phân tích chuỗi selector (Parsing): jQuery sử dụng Sizzle selector engine để tách chuỗi bạn truyền vào để nhận biết các loại selector như ID, class, tag, attribute hoặc pseudo-selector.
Tối ưu hoá selector: Nếu selector đơn giản như ID (#myID), jQuery sẽ gọi trực tiếp document.getElementById() để tối ưu hiệu suất. Với selector phức tạp hơn, jQuery sẽ sử dụng các hàm như querySelectorAll() hoặc fallback về Sizzle engine.
Tìm kiếm phần tử trong DOM: jQuery sẽ quét qua cấu trúc DOM và trả về danh sách các phần tử phù hợp với selector đã phân tích.
Trả về đối tượng jQuery: Kết quả là một đối tượng jQuery, chứa một tập hợp các phần tử DOM có thể sử dụng các method chainning như .addClass(), .hide(), .click().

Nếu bạn đang làm việc với những đoạn mã phức tạp hoặc quy mô lớn, việc nắm vững cách jQuery selector hoạt động sẽ giúp bạn viết code hiệu quả, dễ bảo trì và tối ưu hóa hiệu suất trang web.

7 jQuery selector phổ biến hiện nay

Mục đích chính của các jQuery selector là để chọn các phần tử trên trang web dựa trên những tiêu chí nhất định. Các tiêu chí đó có thể là id, class, thuộc tính, hoặc sự kết hợp của một hoặc nhiều yếu tố khác.

Dưới đây là 7 loại selector thường gặp, kèm ví dụ thực tế giúp bạn hiểu rõ cách sử dụng chúng:

Selector theo ID

jQuery #id selector cho phép bạn nhắm đến một phần tử cụ thể thông qua thuộc tính ID duy nhất của nó, bằng cách sử dụng ký hiệu # theo sau là tên ID.

$("#ten-id")

Chẳng hạn như ví dụ sau, thêm hai nút có ID là “colorButton” và “hideButton”. Nút đầu tiên có chức năng thay đổi màu nền của đoạn văn đầu tiên (có ID là “p1”) thành màu xanh da trời, và nút thứ hai có chức năng ẩn đoạn văn thứ hai (có ID là “p2”).

<!DOCTYPE html>
<html>
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    
    <script>
        $(document).ready(function () {
            $("#colorButton").click(function () {
                $("#p1").css("background-color", "skyblue");
            });
            $("#hideButton").click(function () {
                $("#p2").hide();
            });
        });
    </script>
</head>
<body>
    <h2>Id selector</h2>
    <p id="p1">
        In this paraphraserwe are changing background.
    </p>
    <p id="p2">
        In 2nd paraphraserwe are going hide this pera.
    </p>
    <button id="colorButton">
        Change Background Color
    </button>
    <br><br>
    <!-- Button to hide the second paragraph -->
    <button id="hideButton">
        Hide Paragraph
    </button>
</body>
</html>

Kết quả hiển thị của đoạn mã trên:

Kết quả đoạn mã sau khi nhấn 2 button:

Giải thích ví dụ trên:

$(document).ready(function () {: Đảm bảo rằng tất cả mã jQuery bên trong chỉ chạy sau khi tài liệu HTML đã được tải hoàn tất.
("#p1").css("background-color", "skyblue"): Khi người dùng nhấn nút có id="colorButton". jQuery tìm phần tử có id="p1" và thay đổi thuộc tính CSS background-color sang màu skyblue.
("#p2").hide(): Khi người dùng nhấn nút có id="hideButton". jQuery tìm phần tử có id=”p2″ và ẩn nó khỏi giao diện bằng hàm .hide().

Selector theo class

Trong jQuery, selector theo class được dùng để chọn các phần tử HTML dựa trên thuộc tính class bằng cách sử dụng dấu chấm (.) theo sau là tên class.

$( ".class" )

Chẳng hạn như ví dụ dưới đây, sử dụng selector theo class để chọn thẻ <p> đã được gán class tương ứng.

<!DOCTYPE html>
<html>
<head>
    <!--jQuery library included -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    
    <script>
        $(document).ready(function () {
            $(".colorBtn").click(function () {
                $(".p1").css("background-color", "yellow");
            });
        });
    </script>
</head>
<body>
    <h2>Class selector</h2>
    <p class="p1">
        In this paraphraserwe are changing background.
    </p>
    <!-- Button to change background 
        color of the first paragraph -->
    <button class="colorBtn">
        Change Background Color
    </button>
</body>
</html>

Kết quả hiển thi của đoạn mã trên:

Kết quả sau khi nhấn vào button:

Trong ví dụ trên, khi người dùng nhấn nút, đoạn văn bản có class .p1 sẽ được đổi màu nền sang màu vàng.

$(document).ready(...): Đảm bảo rằng mã bên trong chỉ chạy sau khi tài liệu HTML được tải hoàn tất.
$(".colorBtn").click(...): Gán sự kiện click cho tất cả các phần tử có class là colorBtn.
$(".p1").css("background-color", "yellow"): Khi nút được nhấn, jQuery tìm tất cả các phần tử có class p1 và thay đổi thuộc tính CSS background-color thành màu vàng.
<p class="p1">: Đoạn văn có class là p1, sẽ bị tác động khi nhấn nút.
<button class="colorBtn">: Nút có class là colorBtn, được dùng để kích hoạt sự kiện click.

Selector theo tên thẻ (tag name)

Trong jQuery, selector theo tên thẻ được sử dụng để chọn các phần tử HTML dựa trên tên thẻ.

$( "p" );

Trong ví dụ này, sử dụng selector theo tên thẻ để chọn thẻ <p> và áp dụng một số kiểu dáng như văn bản được tô màu xanh đỏ và nền của thẻ <p> được đổi sang màu xanh da trời.

<!DOCTYPE html>
<html>
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $(".colorBtn").click(function () {
                $("p").css({
                    "background-color": "skyblue",
                    "font-size": "25px",
                    "color": "red"
                });
            });
        });
    </script>
</head>
<body>
    <h2> Tag name selector</h2>
    <p>
        ITviec <br>
        Trang thông tin về lĩnh vực IT
    </p>
    <button class="colorBtn">
        click here
    </button>
</body>
</html>

Kết quả hiển thị của đoạn mã trên:

Kết quả sau khi nhấn nút button:

Giải thích ví dụ trên:

$(document).ready(...): Đảm bảo toàn bộ DOM đã được tải xong trước khi thực thi mã jQuery.
$(".colorBtn").click(...): Bắt sự kiện click của phần tử có class colorBtn (tức là nút bấm).
$("p").css({...}): Sử dụng tag name selector để chọn tất cả các thẻ <p> và áp dụng cùng lúc nhiều thuộc tính CSS.

Hierarchy selector

Các bộ chọn này sử dụng cấu trúc phân cấp (hierarchy) của DOM làm tiêu chí để chọn phần tử. Dưới đây là danh sách về hierarchy selectors:

$(“ancestor descendant”): Bộ chọn này trả về tất cả các phần tử con (descendant) của phần tử cha được chỉ định. Phần tử con có thể là con trực tiếp, cháu, hoặc sâu hơn nữa trong cây DOM.
$(“parent > child”): Bộ chọn này cụ thể hơn bộ chọn phía trên và chỉ trả về các phần tử con trực tiếp của phần tử cha.
$(“prev + next”): Bộ chọn này trả về phần tử liền kề (adjacent) đứng ngay sau phần tử prev, cùng chung cha và khớp với next.
$(“prev ~ siblings”): Bộ chọn này trả về tất cả các phần tử anh em (sibling) nằm sau phần tử prev, cùng cha và khớp với bộ chọn siblings.

Selector theo thuộc tính (attribute)

Bạn cũng có thể chọn các phần tử dựa trên giá trị của thuộc tính (attribute) của chúng.

Lưu ý: Khi làm việc với các bộ chọn này, bạn nên lưu ý rằng các bộ chọn này coi chuỗi có nhiều giá trị cách nhau bằng dấu cách là một chuỗi duy nhất.

Chẳng hạn như $("a[rel='nofollow']") sẽ không phù hợp với $("a[rel='nofollow other']").

Dưới đây là danh sách attribute selectors:

$(“[attribute|='value']”): Bộ chọn kiểm tra prefix trong thuộc tính: trả về tất cả các phần tử có thuộc tính có giá trị bằng hoặc bắt đầu bằng chuỗi được chỉ định, theo sau là dấu gạch ngang.
$(“[attribute*='value']”): Bộ chọn chứa giá trị trong thuộc tính: trả về tất cả các phần tử có thuộc tính chứa bất kỳ vị trí nào chuỗi con được chỉ định. Vị trí xuất hiện không quan trọng, miễn là có chứa chuỗi đó.
$(“[attribute~='value']”): Bộ chọn này trả về tất cả các phần tử có thuộc tính chứa một từ riêng biệt được phân cách bằng dấu cách (giống như class trong HTML).
$(“[attribute$='value']”): Trả về tất cả các phần tử có thuộc tính mà giá trị kết thúc bằng chuỗi chỉ định.
$(“[attribute='value']”): Bộ chọn này trả về tất cả các phần tử có thuộc tính có giá trị chính xác bằng chuỗi chỉ định.
$(“[attribute^='value']”): Trả về tất cả các phần tử có thuộc tính bắt đầu chính xác bằng chuỗi chỉ định.
$(“[attribute!='value']”): Trả về tất cả các phần tử không có thuộc tính đó hoặc giá trị thuộc tính khác với giá trị được chỉ định trong bộ chọn.

Pseudo-Class selector

Pseudo-class selector cho phép bạn chọn các phần tử dựa trên trạng thái hoặc vị trí của chúng trong tài liệu HTML. Những bộ chọn này đặc biệt hữu ích khi bạn muốn áp dụng kiểu (style) hoặc tương tác với các phần tử trong một trạng thái cụ thể.

:first

Chọn phần tử đầu tiên trong loại (type). Bộ chọn này sẽ chọn phần tử <p> đầu tiên trên trang.

$('p:first')

:last

Chọn phần tử cuối cùng trong loại của nó. Bộ chọn này sẽ chọn phần tử <p> cuối cùng.

$('p:last')

:nth-child(n)

Nghĩa là chọn phần tử con thứ n trong phần tử cha (parent) của nó. Bộ chọn này sẽ chọn phần tử <li> thứ 2 trong danh sách con của phần tử cha. Rất hữu ích khi bạn muốn nhắm đến một phần tử cụ thể trong danh sách.

$('li:nth-child(2)')

:even hoặc :odd

Lựa chọn phần tử có chỉ số chẵn hoặc lẻ. Bộ chọn này sẽ chọn tất cả các phần tử <tr> có chỉ số chẵn (tức là các hàng thứ 0, 2, 4…). Tương tự, $(‘tr:odd’) sẽ chọn các phần tử có chỉ số lẻ (hàng thứ 1, 3, 5…).

$('tr:even')

Form selector

jQuery cung cấp các phiên bản rút gọn của bộ chọn (selector) cho hầu hết các phần tử trong biểu mẫu (form). Những bộ chọn này được xếp vào nhóm bộ chọn biểu mẫu (form selectors).

Ví dụ: Để chọn một phần tử nút <button> hoặc bất kỳ phần tử nào có thuộc tính type="button", thay vì viết dài dòng là $("button, input[type='button']"), bạn có thể sử dụng cú pháp rút gọn là:

$(".button")

Tương tự, để chọn tất cả các phần tử có type="radio", thay vì $("input[type='radio']"), bạn chỉ cần viết:

$(".radio")

Một số jQuery selector khác

Bạn cũng có thể chọn tất cả các phần tử đang được bật (enabled) hoặc bị vô hiệu hóa (disabled) bằng cách sử dụng các bộ chọn $(".enabled") và $(".disabled"). Tuy nhiên, bạn chỉ nên dùng những bộ chọn này cho các phần tử hỗ trợ thuộc tính disabled, ví dụ như: <button>, <input>, <textarea>.

Ngoài ra, còn có bộ chọn $(".checked"), cho phép bạn chọn tất cả các phần tử đang được chọn hoặc đánh dấu, áp dụng với các phần tử checkbox, radio button và option trong thẻ <select>. Nếu bạn chỉ muốn chọn các tùy chọn (option) đang được chọn trong thẻ <select>, thì nên dùng bộ chọn $(".selected").

Bên cạnh đó, jQuery selector còn một số bộ chọn thường được sử dụng như bảng bên dưới:

Selector	Cú pháp	Mô tả
`:first-child`	`$("p:first-child")`	Chọn tất cả các phần tử <p> là phần tử con
`:last-child`	`$("p:last-child")`	Chọn các phần tử cuối cùng của <p> là phần tử con.
`:only-child`	`$("p:only-child")`	Chọn tất cả các phần tử <p> là phần tử con duy nhất.
`:only-of-type`	`$("p:only-of-type")`	Chọn tất cả các phần tử <p> là phần tử con của loại (type) đó
`:header`	`$(":header")`	Chọn tất cả các phần tử header (h1, h2, h3, h4, h5, h6)
`:hidden`	`$("p:hidden")`	Chọn tất cả các phần tử <p> bị ẩn
`:animated`	`$(":animated")`	Chọn tất cả các phần tử đang được chèn hiệu ứng
`:root`	`$(":root")`	Chọn phần tử gốc của document
`:focus`	`$(":focus")`	Chọn phần tử đang được focus
`:has(selector)`	`$(":has(p)")`	Chọn tất cả các phần tử div có chứa thẻ <p>
`:empty`	`$(":empty")`	Các phần tử trống được chọn
`[attribute]`	`$("[href]")`	Tất cả các phần tử có thuộc tính href được chọn.
`[attribute=value]`	`$("[href='gfg.css']")`	Tất cả các phần tử có giá trị thuộc tính href bằng gfg.css được chọn.
`[attribute^=value]`	`$("[title^='value']")`	Tất cả các phần tử có giá trị thuộc tính title bắt đầu bằng “value” được chọn.
`[attribute~=value]`	`$("[title~='Good']")`	Tất cả các phần tử có giá trị thuộc tính title chứa giá trị cụ thể “Good” được chọn.
`:input`	`$(":input")`	Tất cả các phần tử input và textarea, select, button được chọn.

Cách tối ưu jQuery bằng kỹ thuật cache selector

jQuery giúp bạn dễ dàng chọn bất kỳ phần tử nào bằng các selector phức tạp. Ví dụ, để chọn tất cả các liên kết có class externalLink, bạn có thể viết:

$("a.externalLink")

Tuy nhiên, việc chọn phần tử theo cách này sẽ tốn tài nguyên xử lý, vì mỗi lần gọi, jQuery phải quét lại toàn bộ DOM để tìm phần tử phù hợp.

Nếu bạn cần sử dụng cùng một selector nhiều lần, tốt nhất nên lưu (cache) kết quả trả về vào một biến. Việc này sẽ giảm số lần quét DOM và cải thiện hiệu suất đáng kể.

Ví dụ đoạn mã sau:

$("a .externalLink").click(function () {

  $("a .externalLink").removeClass("marked");

  $("a .externalLink").addClass("visited");

});

Có thể được viết lại tối ưu hơn như sau:

var $linkExternal = $("a .externalLink");

$linkExternal.click(function () {

  $linkExternal.removeClass("marked");

  $linkExternal.addClass("visited");

});

Theo cách này, trình duyệt chỉ cần quét tài liệu một lần duy nhất thay vì ba lần, giúp tiết kiệm thời gian xử lý. Mặc dù trong ví dụ nhỏ này chênh lệch hiệu suất có thể không rõ rệt, nhưng nếu bạn đang xử lý hàng chục hoặc hàng trăm selector thì lợi ích sẽ rất đáng kể.

Ngoài ra, hiệu suất của selector :visible trong jQuery cũng đã được cải thiện đáng kể nhờ việc áp dụng kỹ thuật caching.

Câu hỏi thường gặp về jQuery selector

Có bao nhiêu loại selector trong jQuery?

jQuery selector được chia thành nhiều loại khác nhau như: selector cơ bản, selector phân cấp, selector lọc cơ bản, selector lọc theo nội dung, selector lọc theo hiển thị, selector theo thuộc tính, selector lọc theo con, selector dành cho biểu mẫu, và nhiều loại khác.

Mỗi loại selector đều có cách thức riêng để chọn phần tử, dựa trên các điều kiện và tham số cụ thể — giúp bạn dễ dàng kiểm soát và thao tác DOM theo đúng nhu cầu.

Làm sao để sử dụng nhiều selector cùng lúc trong jQuery?

Bạn có thể sử dụng nhiều selector trong jQuery bằng cách ngăn cách từng selector bằng dấu phẩy (,).

Ví dụ, để chọn tất cả các đoạn văn (<p>) và tất cả các phần tử <div>, bạn sẽ sử dụng cú pháp:

$("p, div")

Câu lệnh này sẽ trả về toàn bộ các phần tử đoạn văn và div có trong tài liệu HTML.

Làm sao để sử dụng attribute selector trong jQuery?

Attribute selector trong jQuery được sử dụng để chọn các phần tử có chứa một thuộc tính nhất định hoặc một giá trị cụ thể của thuộc tính đó.

Ví dụ, để chọn tất cả các phần tử có thuộc tính title, bạn sẽ sử dụng:

$("[title]")

Còn nếu bạn muốn chọn các phần tử có thuộc tính title và giá trị bằng một chuỗi cụ thể, bạn sẽ dùng cú pháp:

$("[title='giá trị']")

Có thể sử dụng selector CSS trong jQuery không?

Câu trả lời là Có. jQuery hỗ trợ hầu hết các selector CSS, bao gồm selector theo tag, class, ID, cũng như các selector nâng cao như :first-child, :nth-child(n), :not(), :checked,…. Đây chính là điểm mạnh giúp jQuery dễ tiếp cận với những ai đã quen thuộc với CSS. Tuy nhiên, một số selector CSS mới (CSS3+) có thể không tương thích hoàn toàn với jQuery phiên bản cũ.

Tổng kết về jQuery selector

jQuery selector là công cụ giúp bạn lập trình web hiệu quả và nhanh gọn hơn. Việc hiểu sâu và sử dụng thuần thục các selector sẽ giúp bạn tối ưu hoá code, giảm lỗi và tăng tốc độ phát triển ứng dụng. Từ những selector đơn giản đến những biểu thức phức tạp, mỗi lựa chọn đều là một bước tiến đến khả năng làm chủ DOM và trải nghiệm người dùng tốt hơn.