Top 30+ câu hỏi phỏng vấn jQuery thường gặp mọi cấp độ

Nội dung bài viết

Các câu hỏi phỏng vấn jQuery là một phần không thể thiếu trong quá trình tuyển dụng các vị trí liên quan đến phát triển front-end. Tùy theo cấp độ kinh nghiệm, nhà tuyển dụng sẽ có những cách tiếp cận khác nhau: từ kiểm tra kiến thức cú pháp, hiểu biết về DOM, đến khả năng tối ưu hiệu suất và giải bài toán thực tế.

Đọc bài viết sau để được hướng dẫn trả lời:

Các cảu hỏi phỏng vấn jQuery thường gặp dành cho Fresher, Junior và Senior Developer.
Các câu hỏi jQuery nâng cao (cấp độ expert).
Các bài thực hành code liên quan đến jQuery.
Một số kiến thức cần chuẩn bị trước khi đi phỏng vấn các vị trí liên quan về jQuery hoặc Front-End Developer.

jQuery là gì?

jQuery là một thư viện JavaScript nhanh, nhỏ gọn và giàu tính năng, giúp đơn giản hóa việc xử lý HTML DOM, quản lý sự kiện, hiệu ứng động (animations) và tương tác Ajax trên trang web. Với cú pháp ngắn gọn và dễ hiểu, jQuery đã trở thành một công cụ phổ biến trong phát triển web, đặc biệt trong thời kỳ trước khi các framework hiện đại như React, Vue hay Angular phổ biến như hiện nay.

Dù không còn là lựa chọn hàng đầu trong các dự án web hiện đại, jQuery vẫn được sử dụng rộng rãi trong nhiều hệ thống hiện tại. Vì vậy, kiến thức về jQuery vẫn rất cần thiết khi ứng tuyển ở vị trí front-end vào các công ty sử dụng stack cũ hoặc đang trong quá trình chuyển đổi.

Các câu hỏi phỏng vấn jQuery sẽ thuộc những chủ đề nào?

Các câu hỏi phỏng vấn jQuery thường xoay quanh các chủ đề sau:

Cách thao tác với DOM bằng jQuery
Quản lý sự kiện (event handling)
Hiệu ứng và animation
Làm việc với Ajax trong jQuery
Các khái niệm nâng cao như chaining, deferred/promise, plugin…
Tối ưu performance và so sánh với vanilla JavaScript

Bài viết này sẽ hướng dẫn bạn trả lời hầu hết các chủ đề phổ biến nhất về jQuery từ cơ bản đến nâng cao, giúp bạn ôn tập nhanh, bài bản và tự tin hơn trước buổi phỏng vấn.

Câu hỏi phỏng vấn jQuery phổ biến dành cho Fresher

Điểm mạnh của jQuery là gì?

Một số điểm mạnh nổi bật của jQuery có thể kể đến như:

Phổ biến và mã nguồn mở: jQuery là một thư viện được sử dụng rộng rãi trong cộng đồng phát triển web nhờ là mã nguồn mở và khả năng tích hợp linh hoạt.
Tốc độ cao và dễ mở rộng: jQuery có tốc độ thực thi nhanh chóng và cho phép mở rộng dễ dàng, phù hợp với nhiều nhu cầu phát triển khác nhau.
Tương thích tốt với nhiều trình duyệt: jQuery giúp xây dựng các ứng dụng web hoạt động ổn định trên nhiều trình duyệt khác nhau, bao gồm cả các trình duyệt cũ như IE6-8 (mặc dù hiện nay ít còn quan trọng).
Tối ưu hiệu suất ứng dụng khi sử dụng phiên bản nén: Phiên bản thu gọn của jQuery giúp giảm kích thước tệp JavaScript tới gần 50%, giúp trang web tải nhanh và mượt hơn, cải thiện trải nghiệm người dùng.
Viết mã gọn nhẹ cho các chức năng giao diện người dùng phổ biến: Nhiều hiệu ứng và hành vi tương tác phổ biến có thể được viết chỉ với vài dòng mã, giúp tiết kiệm thời gian lập trình.

jQuery có gì khác so với các thư viện JavaScript khác?

jQuery và các framework hiện đại như React, Vue, Angular phục vụ các mục đích khác nhau. jQuery tập trung vào các thao tác DOM (DOM manipulation), còn các thư viện hiện đại tập trung vào kiến trúc thành phần (component-based architecture).

Một số điểm khác biệt nổi bật khác:

jQuery có dung lượng nhỏ hơn nhiều so với các thư viện hoặc framework khác, giúp giảm tải dung lượng và tăng tốc độ tải trang.
jQuery không phụ thuộc vào các thư viện hay công cụ trung gian khác (như build tools), giúp việc cài đặt và triển khai trở nên đơn giản hơn.
Cấu trúc và cách hoạt động của jQuery ít phức tạp hơn, nên rất dễ học và dễ áp dụng, đặc biệt với người mới bắt đầu.
jQuery không nặng như các framework lớn khác, vì nó chỉ sử dụng các tính năng có sẵn của JavaScript để tạo ra những tương tác động cho ứng dụng web.

Đọc chi tiết: Những điều cần biết về jQuery – Thư viện Javascript hàng đầu

Hãy giải thích những gì bạn biết về each() trong jQuery.

Phương thức each() trong jQuery cho phép duyệt qua các tập dữ liệu khác nhau như mảng, đối tượng (object) và các đối tượng DOM. Thường được sử dụng để lặp qua nhiều phần tử DOM được chọn bởi cùng một selector.

Ví dụ: Nếu muốn gán thuộc tính width=”600″ cho tất cả hình ảnh trên một trang, chúng ta có thể chọn tất cả thẻ <img>, sau đó lặp qua từng phần tử và thêm thuộc tính như sau:

$("img").each(function(im){

    $(this).attr("width", "600");

});

Trong ví dụ trên:

$ là đối tượng jQuery dùng để “bọc” một đối tượng DOM thành jQuery object.
this là một đối tượng DOM bên trong hàm each().
index là tham số đầu tiên, đại diện cho chỉ số của phần tử hiện tại.
Để sử dụng các phương thức jQuery (như .attr()), sẽ cần chuyển đổi this sang đối tượng jQuery bằng cách bọc trong $(), ví dụ $(this).

Ngoài DOM, each() còn có thể được dùng để lặp qua các phần tử trong mảng, cho phép lấy chỉ số (index) và giá trị (value) tương ứng:

var list = ["ITviec", "jQuery", "Questions"];

$.each(list, function(index, value){

    console.log(index + " " + value);

});

Kết quả hiển thị:

0 ITviec

1 jQuery

2 Questions

Chúng ta cũng có thể sử dụng each() để duyệt qua các cặp key-value trong object:

var obj = {"name": "ITviec", "type": "jQuery"};

$.each(obj, function(key, value){

    console.log(key + " - " + value);

});

Kết quả hiển thị:

name – ITviec

type – jQuery

Tuy nhiên, cũng cần lưu ý rằng trong một số trường hợp, vòng lặp for thông thường có thể nhanh hơn each() khi xử lý lượng dữ liệu lớn.

Đọc chi tiết: each jQuery: Cú pháp, ví dụ, lỗi thường gặp

jQuery có hoạt động với cả tài liệu HTML và XML không?

Có, jQuery hoạt động với cả tài liệu HTML và XML. Thư viện này cung cấp một API thống nhất để duyệt và thao tác với cả hai cấu trúc tài liệu.

jQuery sử dụng các bộ chọn (selectors) và phương thức như .find(), .text(), và .attr() để truy cập các phần tử trong cả tài liệu HTML lẫn XML.

Tuy nhiên, với tài liệu XML, jQuery xử lý chúng như một cấu trúc cây tổng quát (generic tree), cho phép duyệt qua các thẻ và thuộc tính XML theo cách tương tự như với các phần tử HTML.

jQuery là thư viện JavaScript hay JSON?

jQuery là một thư viện JavaScript, không phải là thư viện JSON.

JavaScript: jQuery được viết bằng JavaScript và dùng để thao tác với HTML cũng như tương tác với DOM (Document Object Model) bằng cú pháp JavaScript.
JSON: JSON là một định dạng dữ liệu dùng để truyền và lưu trữ thông tin ở dạng dễ đọc với cả con người và máy. jQuery không phải là thư viện JSON, nhưng có thể được sử dụng để làm việc với dữ liệu JSON, chẳng hạn như phân tích (parse) dữ liệu hoặc gửi yêu cầu Ajax.

$()function trong jQuery nghĩa là gì?

$()function được sử dụng để truy cập vào các phần tử của phần tử trong DOM (Document Object Model) và chuyển đổi chúng thành đối tượng jQuery. $()function tương tự như các hàm chọn phần tử trong JavaScript thuần, nhưng mạnh mẽ hơn và cung cấp nhiều tùy chọn hơn.

$ thực chất là alias (bí danh) của jQuery, vì vậy $() và jQuery() là hoàn toàn giống nhau. Chúng ta có thể dùng $()function để truy cập vào các thuộc tính như: attribute, class, id, các thuộc tính data và nhiều thành phần khác trong HTML.

Giả sử nếu muốn thay đổi màu nền của tất cả các tiêu đề <h1> thành màu xanh lá cây, chúng ta có thể làm điều đó với jQuery như sau:

$(document).ready(function() {  

   $("h1").css("background-color", "green");  

});

Giải thích về $(document).ready() function

Hàm $(document).ready() là một event handler (xử lý sự kiện) của jQuery cho phép bạn thực thi mã ngay khi tài liệu (document) đã sẵn sàng. Đây là phương thức thường được sử dụng để khởi tạo trang mới hoặc để tải các tập lệnh (script) hoặc kiểu dáng (style) vào tài liệu.

Hàm $(document).ready() đặc biệt hữu ích khi bạn muốn đảm bảo thành phần DOM đã tồn tại trước khi thao tác với chúng. Đây là pattern (mẫu) phổ biến nhất khi làm việc với jQuery.

Sự khác biệt giữa phương thức onload() và document.ready() là gì

Các phương thức onload() và $(document).ready() đều được sử dụng để tải thực thi code khi trang web được tải, nhưng chúng khác nhau về thời điểm kích hoạt:

onload() chỉ thực thi sau khi toàn bộ trang, bao gồm cả hình ảnh, video, iframe… đã được tải xong hoàn toàn.
Trong khi đó, $(document).ready() sẽ chạy ngay khi cây DOM đã được khởi tạo xong, không cần chờ các tài nguyên phụ tải hoàn tất.

onload()	document.ready()
Được sử dụng để tải mã HTML.	Được sử dụng để tải mã JavaScript.
Tải mã HTML bằng đối tượng (object) được biên dịch trước khi được truyền đến trình xử lý sự kiện onload.	Tải mã JavaScript bằng đối tượng được biên dịch trước được truyền đến trình xử lý sự kiện document.ready.

Function nào của jQuery được sử dụng để tạo hiệu ứng (effects)

Một số phương thức được sử dụng để tạo hiệu ứng (effect) trong jQuery có thể kể đến như:

toggle()

Phương thức này dùng để kiểm tra trạng thái hiển thị của phần tử và chuyển đổi giữa hide() và show():

Khi phần tử đang ẩn, show() sẽ được thực thi.
Khi phần tử đang hiển thị, hide() sẽ được thực thi.

Cú pháp:

$(selector).toggle(speed, easing, callback)

slidedown()

Phương thức này được dùng để hiển thị các phần tử đang bị ẩn với hiệu ứng trượt từ trên xuống. Áp dụng được cho các phần tử bị ẩn do:

Sử dụng phương thức jQuery (ví dụ: .hide()),
CSS có display: none.

Cú pháp:

$(selector).slideDown(speed, easing, callback)

fadeOut()

Dùng để giảm dần độ mờ (opacity) của phần tử từ trạng thái hiển thị sang ẩn đi hoàn toàn. Sau khi ẩn, phần tử sẽ không chiếm không gian trên DOM nữa.

Cú pháp:

$(selector).fadeOut(speed, easing, callback)

fadeToggle()

Được sử dụng để chuyển đổi giữa fadeIn() và fadeOut().

Nếu phần tử đang hiển thị (đã fadeIn), fadeToggle() sẽ thực hiện fadeOut().
Nếu phần tử đang ẩn, fadeToggle() sẽ thực hiện fadeIn().

Cú pháp:

$(selector).fadeToggle(speed, easing, callback)

animate()

Phương thức này được dùng để tạo hoạt ảnh tùy chỉnh bằng cách thay đổi giá trị của các thuộc tính CSS một cách từ từ, tạo hiệu ứng động.

Trường styles là bắt buộc, khai báo các thuộc tính CSS cần được animate (viết theo camelCase).
Các tham số speed, easing và callback là tùy chọn.

Cú pháp:

$(selector).animate({styles}, speed, easing, callback)

Giải thích các tham số chung:

speed: Tham số tùy chọn, chỉ tốc độ thực hiện hiệu ứng. Các giá trị có thể dùng: “slow”, “fast” hoặc một số cụ thể (đơn vị: milliseconds). Mặc định: 400ms.
easing: Tham số tùy chọn, xác định kiểu chuyển động. Các giá trị phổ biến: “swing” (mặc định) và “linear”.
callback: Hàm được gọi sau khi hiệu ứng kết thúc. Đây cũng là tham số tùy chọn.

Bộ chọn (selector) trong jQuery là gì? Có bao nhiêu loại bộ chọn trong jQuery?

Để thao tác với bất kỳ phần tử nào trên trang web, trước tiên cần tìm ra chúng. Trong jQuery, selectors (bộ chọn) được dùng để tìm và thao tác với các phần tử HTML. Chúng sử dụng cú pháp giống như CSS selectors, kết hợp với một số bộ chọn mở rộng riêng của jQuery.

Dưới đây là một số bộ chọn cơ bản và phổ biến nhất trong jQuery:

Theo tên thẻ (Element): Chọn tất cả các phần tử có tên thẻ trùng khớp. Ví dụ: $(“div”) sẽ chọn tất cả các thẻ <div>.
Theo ID (#ID): Chọn một phần tử duy nhất với ID được chỉ định. Ví dụ: $(“#header”) sẽ chọn phần tử có id=”header”.
Theo class (.Class): Chọn tất cả các phần tử có class cụ thể. Ví dụ: $(“.menu-item”) sẽ chọn tất cả phần tử có class=”menu-item”.
Bộ chọn toàn cục (*): Chọn tất cả các phần tử trong DOM. Ví dụ: $(“*”) sẽ chọn mọi phần tử trên trang. Tuy nhiên nên tránh sử dụng bộ chọn này vì có thể gây ảnh hưởng đến hiệu suất.
Bộ chọn nhiều phần tử (E, F, G): Chọn tập hợp các phần tử từ nhiều bộ chọn khác nhau. Ví dụ: $(“h1, p, .highlight”) sẽ chọn tất cả các thẻ <h1>, <p>, và các phần tử có class highlight.
Bộ chọn theo thuộc tính (Attribute Selector): Chọn các phần tử dựa trên giá trị của thuộc tính. Ví dụ: $(‘[type=”text”]’) sẽ chọn tất cả các phần tử có thuộc tính type=”text”.

Đọc chi tiết: jQuery Selector là gì: Cách dùng 7 selector phổ biến

Giải thích cách thao tác với CSS class trong HTML bằng jQuery.

jQuery cung cấp nhiều phương thức để thao tác với class CSS được gán cho các phần tử HTML. 4 phương thức quan trọng nhất là: addClass(), removeClass(), toggleClass() và hasClass().

addClass(): Phương thức này dùng để thêm một hoặc nhiều class vào các phần tử được chọn.

Cú pháp:

$(selector).addClass("className");

Bạn cũng có thể thêm nhiều class cùng lúc với cú pháp: $(selector).addClass(“class1 class2”);

removeClass(): Tương tự như addClass(), phương thức removeClass() dùng để xóa một, nhiều hoặc toàn bộ class khỏi phần tử được chọn.

Cú pháp:

Xóa một class: $(selector).removeClass(“class1”);
Xóa nhiều class: $(selector).removeClass(“class1 class2 class3”);
Xóa tất cả các class: $(selector).removeClass();

toggleClass(): Phương thức này dùng để thêm class nếu phần tử chưa có, hoặc xóa class nếu phần tử đã có. Nói cách khác, nó giúp chuyển đổi trạng thái của class.

Cú pháp:

$(selector).toggleClass("className");

Ví dụ:

$("#button").click(function(){

  $("#box").toggleClass("highlight");

});

Trong ví dụ trên, mỗi lần click vào #button, phần tử #box sẽ được thêm hoặc xóa class highlight tùy vào trạng thái hiện tại.

hasClass(): Phương thức này kiểm tra xem phần tử có chứa class cụ thể hay không, trả về giá trị true hoặc false.

Cú pháp:

javascript$(selector).hasClass("className");

Ví dụ thực tế:

$("#button").click(function(){

    // Toggle class highlight
    $("#box").toggleClass("highlight");

    // Kiểm tra và thực hiện hành động tương ứng
    if ($("#box").hasClass("highlight")) {
        console.log("Box is highlighted");
        $(this).text("Remove Highlight");
    } else {
        console.log("Box is not highlighted");
        $(this).text("Add Highlight");
    }
});

// Thêm class với animation
$(".card").hover(
    function() {
        $(this).addClass("hover-effect");
    },
    function() {
        $(this).removeClass("hover-effect");
    }
);

Câu hỏi phỏng vấn jQuery phổ biến dành cho Middle

Có còn nên dùng jQuery nếu tác vụ có thể được xử lý bằng JavaScript thuần?

Không nên, trừ khi thật sự cần thiết. Nếu một tác vụ có thể được xử lý bằng JavaScript thuần, thì nên ưu tiên dùng JavaScript thay vì jQuery. Lý do:

Thư viện jQuery luôn có kích thước vài chục kilobytes, điều này có thể gây lãng phí băng thông không cần thiết, đặc biệt trong các dự án nhỏ hoặc những tác vụ đơn giản.
jQuery được xây dựng trên nền JavaScript, nên nhiều chức năng trong jQuery thực chất chỉ là các thao tác đơn giản mà bạn hoàn toàn có thể thực hiện dễ dàng bằng JavaScript thuần và nhanh hơn, nhẹ hơn.
Việc tải jQuery cũng sẽ gây thêm độ trễ, vì nó bao gồm nhiều tính năng và phụ thuộc không cần thiết cho những công việc nhỏ. So với JavaScript thuần, jQuery có thể gặp vấn đề về hiệu suất trong một số trường hợp cụ thể.

Lợi ích của việc sử dụng jQuery thay vì Javascript trong ứng dụng web Asp.net là gì?

Dưới đây là một số lợi ích khi sử dụng jQuery thay vì JavaScript thuần trong ứng dụng web ASP.NET:

jQuery là mã JavaScript đã được viết sẵn và tối ưu hóa tốt, vì vậy nó sẽ thực thi nhanh hơn, trừ khi bạn tự viết được mã JavaScript thuần với cùng mức độ tối ưu.
jQuery súc tích và ngắn gọn, chúng ta có thể viết ít dòng mã hơn để thực hiện cùng một chức năng so với JavaScript thuần.
jQuery giúp tăng tốc quá trình phát triển JavaScript, vì phần lớn các chức năng thông dụng đã được cung cấp sẵn trong thư viện, chỉ cần gọi và sử dụng thay vì phải viết lại từ đầu.
jQuery hỗ trợ khả năng tương thích trình duyệt (cross-browser compatibility), giúp tiết kiệm thời gian đáng kể trong việc xử lý sự khác biệt giữa các trình duyệt web.

event.stopPropagation() là gì?

Phương thức event.stopPropagation() dùng để ngăn sự kiện lan truyền lên cây DOM (event bubbling) hoặc xuống cây DOM (event capturing), tức là ngăn các phần tử cha nhận được thông báo về sự kiện đó. Điều này giúp kiểm soát việc xử lý sự kiện, tránh các hành vi không mong muốn do sự kiện “bong bóng” lên các phần tử cha.

Ví dụ: nếu một thẻ <a> có gắn sự kiện click nằm bên trong một thẻ <div> hoặc <form> cũng có sự kiện click, thì khi bạn gọi event.stopPropagation() trong hàm xử lý sự kiện của thẻ <a>, sự kiện sẽ không tiếp tục lan lên, và do đó hàm xử lý của <div> hoặc <form> sẽ không được kích hoạt.

Giải thích cách sử dụng phương thức event.preventDefault().

event.preventDefault() là một phương thức trong jQuery dùng để ngăn chặn hành vi mặc định của một sự kiện, chẳng hạn như khi người dùng nhấp vào một liên kết hoặc một thành phần kích hoạt khác.

Nó hoạt động bằng cách ngăn sự kiện mặc định được kích hoạt, cho phép bạn kiểm soát hoàn toàn những hành động khác diễn ra sau đó. Đây là phương pháp hữu ích khi bạn muốn tránh các hành vi không mong muốn, chẳng hạn như mở liên kết trong tab mới khi người dùng vô tình nhấp vào.

Khi sử dụng các sự kiện như click hoặc keypress, bạn có thể chặn hành vi mặc định bằng cách thêm event.preventDefault() vào trong hàm xử lý sự kiện.

Lưu ý: preventDefault() là DOM API native, có từ jQuery 1.0 và cả vanilla JavaScript.

Ví dụ: Giả sử xây dựng một ứng dụng AJAX, trong đó dữ liệu form cần được gửi đi thông qua AJAX khi người dùng nhấp vào nút gửi. Nếu không sử dụng preventDefault(), nút đó sẽ thực thi hành vi mặc định, nghĩa là gửi form và tải lại trang. Điều này khiến sự kiện AJAX không được thực hiện.

Giải pháp:

$("#submitBtn").click(function(event){
    event.preventDefault(); // Ngăn hành vi gửi form mặc định

    // Thực hiện gọi AJAX và xử lý DOM
    $.ajax({
        url: "/submit-form",
        method: "POST",
        data: $("#myForm").serialize(),
        success: function(response){
            $("#result").html("Dữ liệu đã được gửi!");
        }
    });
});

Với event.preventDefault(), chúng ta có thể bỏ qua hành vi mặc định của trình duyệt và thực hiện logic xử lý tùy chỉnh như gửi dữ liệu qua AJAX, cập nhật nội dung trang mà không cần reload lại toàn bộ.

Giải thích lợi ích của việc sử dụng CDN cho các file jQuery.

CDN là một giải pháp tuyệt vời để lưu trữ các tệp JavaScript và CSS. Nhờ vào việc lưu bộ nhớ đệm (cache), CDN giúp giảm thời gian tải trang, làm cho website nhanh hơn và phản hồi tốt hơn. Điều này đặc biệt quan trọng với các website có lượng nội dung lớn, như blog hoặc trang thương mại điện tử.

Lưu trữ jQuery trên mạng phân phối nội dung (CDN – Content Delivery Network) mang lại nhiều lợi ích thiết thực về hiệu suất, băng thông và trải nghiệm người dùng, ví dụ như:

Giảm số lần tải lại các tài nguyên khi người dùng truy cập trang.
Giảm băng thông tiêu thụ, vì các tài nguyên tĩnh (JS, CSS) được cung cấp từ các máy chủ phân tán gần với người dùng hơn.
Tối ưu trải nghiệm trên thiết bị di động, giúp giao diện phản hồi tốt với các kích thước màn hình khác nhau.
Đảm bảo lưu trữ an toàn cho các tệp hoặc dữ liệu quan trọng.

Phân biệt giữa jquery.min.js và jquery.js.

jquery.min.js là phiên bản đã được rút gọn (minified) từ jquery.js, nó loại bỏ tất cả ký tự không cần thiết như khoảng trắng, xuống dòng, chú thích, rút ngắn tên biến hay tối ưu hóa cú pháp để giảm dung lượng tệp.

Chức năng của jquery.min.js và jquery.js là giống nhau, tuy nhiên việc sử dụng phiên bản rút gọn sẽ mang lại nhiều lợi ích hơn, đặc biệt trong môi trường sản xuất (production), ví dụ như:

Tăng tốc độ tải trang: Tệp minified có dung lượng nhỏ hơn, giúp tải nhanh hơn trên mọi nền tảng, đặc biệt quan trọng với người dùng có kết nối mạng yếu.
Hiệu suất tốt hơn: Trình duyệt cần ít thời gian hơn để phân tích mã JavaScript.
Giảm dung lượng trên server và cache trình duyệt: Giúp tiết kiệm không gian lưu trữ tạm thời trên máy chủ và bộ nhớ cache của trình duyệt, dẫn đến phản hồi nhanh hơn và giảm tải cho server.
Giúp cấu trúc mã gọn gàng hơn: Khi sử dụng phiên bản .min.js, bạn không cần phải nhúng nhiều tệp JS riêng lẻ, giúp mã HTML sạch hơn, dễ bảo trì hơn.

Tóm lại, dù jquery.min.js và jquery.js hoạt động giống nhau, nhưng sử dụng phiên bản minified là lựa chọn tối ưu cho hiệu suất, tốc độ tải trang và bảo mật trong môi trường thực tế. Đây là tiêu chuẩn gần như bắt buộc trong các dự án web chuyên nghiệp.

Trong jQuery, sự khác biệt giữa $(this) và this là gì?

Các điểm khác biệt chính:

$(this) là một đối tượng jQuery, trong khi this là tham chiếu đến DOM element thuần túy trong JavaScript context hiện tại.

$(this) thường được sử dụng trong jQuery để thao tác với phần tử đang được chọn, dưới dạng đối tượng jQuery, từ đó bạn có thể gọi các phương thức như .addClass(), .hide(), .attr(),… Ngược lại, this trong JavaScript đơn thuần chỉ là phần tử DOM gốc, không có sẵn các phương thức tiện ích như đối tượng jQuery.

Trong vòng lặp .each(), this đại diện cho phần tử hiện tại đang được lặp đến (DOM element), còn $(this) là cách để chuyển phần tử đó thành đối tượng jQuery, giúp bạn sử dụng các hàm của jQuery trên nó.

Ví dụ:

$('ul').each(function() {

    var childElement = this.parent().nextSibling(); // Sai vì this là DOM, không có .parent() hay .nextSibling()

});

Đoạn mã trên sẽ không hoạt động đúng, vì this ở đây là một DOM element, không có sẵn các phương thức như .parent() hay .nextSibling() theo cách viết như jQuery.

Để làm đúng, bạn nên viết như sau:

$('ul').each(function() {

    // Cách 1: Sử dụng $(this) với jQuery methods
    var nextElement = $(this).parent().next();

    // Cách 2: Sử dụng this với DOM properties/methods
    var parentElement = this.parentElement;
    var nextSibling = this.nextElementSibling;

    // Cách 3: Mix both approaches
    var id = this.id; // Fast DOM property access
    $(this).addClass('processed'); // jQuery method
});

Tóm lại:

Dùng this để tham chiếu đến phần tử DOM thuần túy.
Dùng $(this) khi muốn thao tác với phần tử đó bằng các phương thức của jQuery (như .css(), .addClass(), .parent()…).
Trong vòng lặp .each(), this luôn là phần tử DOM đang được lặp qua, do đó nên dùng $(this) để xử lý dễ dàng hơn.

Làm thế nào để thực hiện một yêu cầu AJAX trong jQuery?

Để thực hiện yêu cầu AJAX trong jQuery, bạn có thể sử dụng phương thức $.ajax(). Phương thức này cho phép gửi các yêu cầu HTTP bất đồng bộ đến máy chủ và xử lý phản hồi mà không cần tải lại trang. jQuery cung cấp $.ajax() với nhiều tùy chọn linh hoạt để cấu hình yêu cầu.

Một số thuộc tính quan trọng của $.ajax() gồm có:

url: Địa chỉ URL nơi gửi yêu cầu.
type: Kiểu phương thức HTTP sử dụng (ví dụ: GET, POST…).
data: Dữ liệu gửi kèm theo yêu cầu (thường dùng với POST hoặc PUT).
success: Hàm callback thực thi khi yêu cầu thành công.
error: Hàm callback thực thi khi yêu cầu thất bại.

Mục đích của các phương thức bind(), live() và delegate() trong jQuery là gì?

Trong jQuery, các phương thức bind(), live() và delegate() được sử dụng để xử lý sự kiện.

bind(): Dùng để gán (bind) trình xử lý sự kiện trực tiếp vào phần tử tại thời điểm gọi hàm. Tuy nhiên, nó chỉ hoạt động với các phần tử đã tồn tại trong DOM khi trang được tải, không áp dụng được cho các phần tử được thêm vào sau này.
live(): Cho phép gán sự kiện cho cả những phần tử được thêm vào sau khi trang đã tải (tuy nhiên đã bị loại bỏ ở các phiên bản jQuery mới). Nó gán trình xử lý sự kiện cho tất cả các phần tử khớp với selector, kể cả những phần tử thêm động sau.
delegate(): Gán sự kiện thông qua cơ chế ủy quyền sự kiện (event delegation). Bạn chỉ định một phần tử cha và selector của phần tử con mà bạn muốn theo dõi sự kiện. Khi sự kiện xảy ra ở phần tử con phù hợp, phần tử cha sẽ “đón” sự kiện đó và xử lý thông qua callback. Phương pháp này hiệu quả và thích hợp để xử lý các phần tử thêm động.

Câu hỏi phỏng vấn jQuery phổ biến dành cho Senior

Giải thích cách hoạt động của event bubbling và event capture trong jQuery.

Event Bubbling và Event Capturing là hai giai đoạn trong mô hình lan truyền sự kiện (event propagation) trong DOM API (không chỉ riêng jQuery). jQuery mặc định sử dụng bubbling phase.

Event Bubbling	Event Capturing
Sự kiện bắt đầu từ phần tử mục tiêu (target element) và lan truyền từ dưới lên đến tài liệu gốc.	Sự kiện bắt đầu từ document và lan truyền từ trên xuống đến phần tử mục tiêu (từ cha → con).
Cho phép các phần tử cha bắt sự kiện được kích hoạt bởi phần tử con.	Capturing cho phép bạn bắt sự kiện trước khi nó đến phần tử mục tiêu.
Ví dụ: Nếu bạn click vào một nút bên trong một thẻ <div>, sự kiện “click” sẽ được kích hoạt đầu tiên ở nút, sau đó lan lên đến <div>, và tiếp tục lên đến document.	Capturing ít được sử dụng hơn so với bubbling trong thực tế.
Hành vi mặc định trong jQuery và hầu hết là các thư viện	Ít được sử dụng hơn, cần được kích hoạt rõ ràng

Ví dụ sử dụng event bubbling trong jQuery:

$("#parent").on("click", function () {
    alert("Parent clicked!");
});

$("#child").on("click", function (event) {
    alert("Child clicked!");
    event.stopPropagation(); 
});

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

Khi người dùng click vào #child, theo mặc định sự kiện sẽ “bubbling” lên #parent.
Tuy nhiên, event.stopPropagation() trong hàm của #child ngăn không cho sự kiện lan lên cha, nên “Parent clicked!” sẽ không hiển thị.
Nếu bỏ dòng event.stopPropagation();, cả “Child clicked!” và “Parent clicked!” sẽ được hiển thị tuần tự.

Giải thích phương thức .promise() trong jQuery.

Phương thức .promise() trong jQuery được sử dụng để tạo một đối tượng Promise, cho phép bạn định nghĩa các hàm callback xử lý thành công hoặc thất bại thông qua các phương thức .done(), .fail() và .always().

Ví dụ cách sử dụng:

var promise = $(selector).promise(type);

Nó cung cấp cách để xử lý kết quả của một hoặc nhiều thao tác bất đồng bộ, xâu chuỗi các phản hồi sau khi tất cả các tác vụ đó được hoàn tất. Phương thức này đặc biệt hữu ích khi bạn có nhiều thao tác cần hoàn thành trước khi thực thi đoạn mã tiếp theo.

Phương thức này thường được sử dụng kết hợp với các thao tác hiệu ứng (animation) hoặc thao tác DOM, nhằm đảm bảo các hành động cụ thể được hoàn tất trước khi tiếp tục.

Lưu ý: jQuery Promise khác với native ES6 Promise về API và behavior.

Sự khác biệt giữa event.preventDefault() và event.stopPropagation() là gì?

Cả hai phương thức event.preventDefault() và event.stopPropagation() đều được sử dụng để kiểm soát hành vi của sự kiện, nhưng chúng phục vụ cho những mục đích khác nhau.

Tiêu chí	event.preventDefault()	event.stopPropagation()
Mục đích	Ngăn chặn hành động mặc định của sự kiện	Ngăn chặn sự kiện lan truyền (bubbling lên hoặc capturing xuống)
Ảnh hưởng đến gửi form?	Có, ngăn việc gửi form khi dùng trong sự kiện submit	Không, chỉ ngăn sự kiện lan truyền
Ví dụ sử dụng	Ngăn một liên kết điều hướng đến URL:$(‘a’).click(function(event) { event.preventDefault(); });	Ngăn sự kiện lan truyền trong các phần tử lồng nhau:$(‘#child’).click(function(event) { event.stopPropagation(); });

$.proxy() là gì và nó được sử dụng như thế nào?

$.proxy() được sử dụng để bind context (this)bind context (this) bên trong các trình xử lý sự kiện (event handlers).

Điều này rất hữu ích khi làm việc với các hàm callback hoặc sự kiện, nơi mà giá trị của this có thể thay đổi, và bạn muốn ràng buộc nó với một ngữ cảnh cụ thể (ví dụ: một phần tử DOM hoặc một đối tượng).

var obj = {
    message: "Hello",
    showMessage: function () {
        console.log(this.message);
    }
};
$("#btn").on("click", $.proxy(obj.showMessage, obj));

Giải thích đoạn mã trên:

Trong ví dụ trên, showMessage là một phương thức của obj.
Khi gán showMessage làm callback cho sự kiện “click” của #btn, nếu gọi trực tiếp obj.showMessage, this sẽ không còn tham chiếu tới obj.
Bằng cách sử dụng $.proxy(obj.showMessage, obj), ta đảm bảo rằng this bên trong showMessage luôn là obj, bất kể hàm được gọi ở đâu.

Tại sao nên sử dụng plugin trong jQuery? Hãy mô tả cách bạn tạo một plugin jQuery.

Plugin là cách để mở rộng chức năng của jQuery bằng cách tạo ra các hàm có thể tái sử dụng, duy trì khả năng liên kết và tuân theo các quy ước của jQuery. Các plugin này cho phép lập trình viên thêm các phương thức tùy chỉnh có thể được gọi trên đối tượng jQuery, giúp việc đóng gói logic phức tạp trở nên dễ dàng hơn và giữ cho mã nguồn có tính mô-đun, rõ ràng. Một plugin cho phép tách biệt các mối quan tâm bằng cách đóng gói một chức năng cụ thể vào trong một mô-đun riêng biệt. Điều này giúp giữ cho mã nguồn sạch sẽ và dễ quản lý.

Bằng cách sử dụng plugin, tôi có thể ẩn đi sự phức tạp của một tác vụ hoặc tính năng cụ thể bên trong một giao diện đơn giản, giúp các lập trình viên khác dễ dàng sử dụng hơn. Ví dụ cách tạo plugin:

(function ($) {
    $.fn.changeColor = function (color) {
        this.css("color", color);
        return this;
    };
})(jQuery);
$("p").changeColor("blue");

Làm sao để đảm bảo hiệu quả bộ nhớ khi sử dụng jQuery?

Khi làm việc với jQuery, tôi chú trọng đến việc giảm rò rỉ bộ nhớ và giải phóng tài nguyên không cần thiết. Một số nguyên tắc tôi thường áp dụng gồm:

Hạn chế biến toàn cục: Tôi ưu tiên dùng biến cục bộ trong hàm hoặc dùng closure để đóng gói logic, tránh gây chiếm dụng bộ nhớ toàn cục.
Gỡ bỏ event handler không còn cần thiết bằng .off(), đặc biệt khi thao tác với DOM động.
Xóa phần tử DOM bằng .remove() thay vì .hide() để dọn dẹp cả data và event đi kèm.
Giảm số lần truy vấn DOM: Tôi thường cache các selector trong biến nếu dùng nhiều lần.
Quản lý dữ liệu với .data() và .removeData(), đảm bảo xóa đúng lúc để giải phóng bộ nhớ.
Với các hàm hẹn giờ như setInterval() hoặc setTimeout(), tôi luôn clear khi không còn sử dụng.
Gộp thao tác DOM bằng cách sử dụng .html() hoặc .append() một lần thay vì thao tác từng phần tử một.

Bạn tối ưu hiệu năng jQuery trong ứng dụng lớn như thế nào?

Để tối ưu hiệu năng jQuery trong dự án quy mô lớn, tôi tập trung vào 4 chiến lược chính:

Cache selector: Thay vì truy vấn DOM nhiều lần, tôi lưu các phần tử thường dùng vào biến. Điều này giúp giảm thiểu thao tác DOM và tăng tốc độ xử lý:

var $btn = $("#myButton");
$btn.click(function() {
    $btn.text("Clicked!");
});

Dùng event delegation: Với các phần tử tạo động, tôi tránh gắn event trực tiếp mà sử dụng .on() ở phần tử cha. Kỹ thuật này tiết kiệm bộ nhớ và giúp code gọn hơn.

$(document).on("click", ".dynamic-button", function() {
    alert("Button Clicked!");
});

Hạn chế thao tác DOM lặp lại: Tôi thường dựng HTML dưới dạng chuỗi và gán vào DOM một lần duy nhất để tránh reflow.

var items = "";
for (var i = 0; i < 100; i++) {
    items += "<li>Item " + i + "</li>";
}
$("#list").html(items);

Xóa các phần tử và data không còn dùng bằng .remove() và .empty() khi cần dọn dẹp giao diện.

Ngoài ra, tôi cũng tránh dùng các API cũ như .bind() hoặc .live() vì hiệu năng kém hơn .on(). Nhờ các phương pháp trên, tôi có thể đảm bảo hiệu năng mượt mà, kể cả trong dự án jQuery với lượng DOM lớn và nhiều tương tác.

Top câu hỏi phỏng vấn thực hành viết mã jQuery thường gặp

Giải thích đoạn mã sau sẽ thực hiện chức năng gì.

$( "div#first, div.first, ol#items > [name$='first']" )

Đây là câu lệnh chọn nhiều phần tử cùng lúc, được ngăn cách bằng dấu phẩy. Cụ thể:

div#first: Chọn thẻ <div> có id=”first”
div.first: Chọn thẻ <div> có class=”first”
ol#items > [name$=’first’]: Chọn các phần tử con trực tiếp của thẻ <ol> có id=”items” và có thuộc tính name kết thúc bằng ‘first’

Nhìn chung, đoạn mã trên sẽ chọn tất cả các phần tử DOM thỏa mãn ít nhất một trong ba điều kiện sau:

Là thẻ <div> có id=”first”.
Là thẻ <div> có class=”first”.
Là phần tử con trực tiếp của <ol id=”items”> và có thuộc tính name kết thúc bằng “first”.

Đây là cách chọn kết hợp nhiều phần tử cụ thể để thao tác đồng thời bằng jQuery (ví dụ: thêm class, ẩn/hiện, thay đổi thuộc tính,..).

Ví dụ:

<div id="first">Div 1</div>                    

<!-- Matched by div#first -->

<div class="first">Div 2</div>                 

<!-- Matched by div.first -->

<div class="first">Div 3</div>                 

<!-- Matched by div.first -->

<ol id="items">

    <li name="item-first">Item 1</li>          

<!-- Matched by ol#items > [name$='first'] -->

    <span name="user-first">Span</span>        

<!-- Matched by ol#items > [name$='first'] -->

</ol>

Cho 2 đoạn mã HTML và CSS như sau. Hãy viết mã jQuery để tạo hiệu ứng động #expander div, mở rộng từ 100×100 pixel thành 200×200 pixel

HTML:

<div id="expander"></div>

CSS:

div#expander{
  width: 100px;
  height: 100px;
  background-color: blue;
}

Đoạn mã jQuery để tạo hiệu ứng động cho #expander, làm mở rộng kích thước từ 100×100 pixel lên 200×200 pixel:

$(document).ready(function(){
  $("#expander").animate({
    width: "200px",
    height: "200px"
  }, 500); // thời gian chạy hiệu ứng là 500ms
});

Giải thích đoạn mã trên:

$(document).ready() đảm bảo mã jQuery chạy sau khi tài liệu HTML đã tải xong.
$(“#expander”) chọn phần tử có id=”expander”.
.animate({…}, 500) tạo hiệu ứng chuyển động mượt từ kích thước hiện tại lên 200px trong vòng 500ms (0.5 giây).

Ngoài ra, chúng ta cũng có thể thêm hiệu ứng khi người dùng click vào khối đó, như sau:

$(document).ready(function(){
  $("#expander").click(function(){
    $(this).animate({
      width: "200px",
      height: "200px"
    }, 500);
  });
});

Khi người dùng click vào #expander, nó sẽ nở rộng mượt mà từ 100×100 thành 200×200 pixel.

Giải thích đoạn mã sau có công dụng gì

$( "div" ).css( "width", "300px" ).add( "p" ).css( "background-color", "blue" );

Thực hiện liên tiếp 2 thao tác:

$( “div” ).css( “width”, “300px” ): Chọn tất cả các thẻ <div> trong trang và đặt chiều rộng của chúng thành 300px.
.add( “p” ): Thêm tất cả các thẻ <p> vào tập hợp đã chọn trước đó (div).
.css( “background-color”, “blue” ): Thiết lập màu nền (background-color) là màu xanh dương cho tất cả div và p trong tập hợp hiện tại.

Trong 2 đoạn mã dưới đây, mã nào sẽ hoạt động hiệu quả hơn? Giải thích

document.getElementById( "logo" ); hoặc $( "#logo" );

Cả hai đoạn mã trên đều dùng để chọn phần tử có id=”logo”, nhưng chúng khác nhau về hiệu năng và mục đích sử dụng.

document.getElementById("logo")

Nhanh hơn: Đây là API gốc (native) của JavaScript.
Không cần tải thêm thư viện, tối ưu cho hiệu suất cao.
Trả về một DOM element thuần, bạn không thể gọi các hàm jQuery (như .fadeIn(), .css(), .slideUp()) mà không chuyển đổi.

$("#logo")

Chậm hơn, vì jQuery cần xử lý nội bộ để chuyển thành đối tượng jQuery, dù sự chênh lệch rất nhỏ trong các thao tác đơn giản.
Trả về một đối tượng jQuery, rất tiện để thao tác tiếp như: .hide(), .css(), .animate(),…
Hỗ trợ cross-browser, xử lý các vấn đề tương thích giữa trình duyệt tốt hơn.

Xem xét đoạn mã dưới đây. Nếu có 5 phần tử <div> trên trang, thì sự khác biệt giữa thời gian bắt đầu và kết thúc được hiển thị là bao nhiêu?

function getMinsSecs() {
  var dt = new Date();
  return dt.getMinutes()+":"+dt.getSeconds();
}
$( "input" ).on( "click", function() {
  $( "p" ).append( "Start time: " + getMinsSecs() + "<br />" );
  $( "div" ).each(function( i ) {
    $( this ).fadeOut( 1000 * ( i * 2 ) );
  });
  $( "div" ).promise().done(function() {
    $( "p" ).append( "End time: " + getMinsSecs() + "<br />" );
  });
});

Giả sử có 5 phần tử <div>, thì .each() sẽ chạy qua từng phần tử với index i từ 0 đến 4. Với $( this ).fadeOut( 1000 * ( i * 2 ) );, thời gian fadeOut tăng dần theo index:

div[0]: 1000 × (0×2) = 0 ms
div[1]: 1000 × (1×2) = 2000 ms
div[2]: 1000 × (2×2) = 4000 ms
div[3]: 1000 × (3×2) = 6000 ms
div[4]: 1000 × (4×2) = 8000 ms

Khi tất cả các hiệu ứng .fadeOut() hoàn tất, .promise().done() mới được gọi. Vậy thời gian tổng để chờ div cuối cùng fadeOut xong là 8000 ms = 8 giây.

Ngoài ra, bạn cần lưu ý:

.promise().done() chỉ được kích hoạt sau khi tất cả các hiệu ứng hoạt động trên tập hợp các phần tử ($(“div”)) hoàn thành.
Do đó, thời gian kết thúc phụ thuộc vào thời gian dài nhất của bất kỳ .fadeOut() nào đang thực hiện. Trong trường hợp này, div cuối mất 8 giây.

Tổng kết

Các câu hỏi phỏng vấn jQuery trên đây giúp bạn ôn luyện cả kiến thức lý thuyết và kinh nghiệm thực tiễn. Khi bạn hiểu được cấu trúc câu hỏi, nắm rõ các dạng thường gặp và biết cách trình bày câu trả lời mạch lạc, bạn đã nắm trong tay chìa khóa để tạo ấn tượng mạnh với nhà tuyển dụng. Hy vọng qua bài viết, bạn sẽ tổng hợp được những câu hỏi cần thiết và tự tin trong các buổi phỏng vấn sắp tới nhé.

jQuery là gì?

Các câu hỏi phỏng vấn jQuery sẽ thuộc những chủ đề nào?

Câu hỏi phỏng vấn jQuery phổ biến dành cho Fresher

Điểm mạnh của jQuery là gì?

jQuery có gì khác so với các thư viện JavaScript khác?

Hãy giải thích những gì bạn biết về each() trong jQuery.

jQuery có hoạt động với cả tài liệu HTML và XML không?

jQuery là thư viện JavaScript hay JSON?

$()function trong jQuery nghĩa là gì?

Giải thích về $(document).ready() function

Sự khác biệt giữa phương thức onload() và document.ready() là gì

Function nào của jQuery được sử dụng để tạo hiệu ứng (effects)

Bộ chọn (selector) trong jQuery là gì? Có bao nhiêu loại bộ chọn trong jQuery?

Giải thích cách thao tác với CSS class trong HTML bằng jQuery.

Câu hỏi phỏng vấn jQuery phổ biến dành cho Middle

Có còn nên dùng jQuery nếu tác vụ có thể được xử lý bằng JavaScript thuần?

Lợi ích của việc sử dụng jQuery thay vì Javascript trong ứng dụng web Asp.net là gì?

event.stopPropagation() là gì?

Giải thích cách sử dụng phương thức event.preventDefault().

Giải thích lợi ích của việc sử dụng CDN cho các file jQuery.

Phân biệt giữa jquery.min.js và jquery.js.

Trong jQuery, sự khác biệt giữa $(this) và this là gì?

Làm thế nào để thực hiện một yêu cầu AJAX trong jQuery?

Mục đích của các phương thức bind(), live() và delegate() trong jQuery là gì?

Câu hỏi phỏng vấn jQuery phổ biến dành cho Senior

Giải thích cách hoạt động của event bubbling và event capture trong jQuery.

Giải thích phương thức .promise() trong jQuery.

Sự khác biệt giữa event.preventDefault() và event.stopPropagation() là gì?

$.proxy() là gì và nó được sử dụng như thế nào?

Tại sao nên sử dụng plugin trong jQuery? Hãy mô tả cách bạn tạo một plugin jQuery.

Làm sao để đảm bảo hiệu quả bộ nhớ khi sử dụng jQuery?

Bạn tối ưu hiệu năng jQuery trong ứng dụng lớn như thế nào?

Top câu hỏi phỏng vấn thực hành viết mã jQuery thường gặp

Giải thích đoạn mã sau sẽ thực hiện chức năng gì.

Cho 2 đoạn mã HTML và CSS như sau. Hãy viết mã jQuery để tạo hiệu ứng động #expander div, mở rộng từ 100×100 pixel thành 200×200 pixel

Giải thích đoạn mã sau có công dụng gì

Trong 2 đoạn mã dưới đây, mã nào sẽ hoạt động hiệu quả hơn? Giải thích

Xem xét đoạn mã dưới đây. Nếu có 5 phần tử <div> trên trang, thì sự khác biệt giữa thời gian bắt đầu và kết thúc được hiển thị là bao nhiêu?

Tổng kết

Uyen Ngo