1. Lý do sử dụng jQuery và lợi ích mang lại?

• Dung lượng nhỏ, cú pháp gọn gàng
• Hỗ trợ mạnh mẽ các phương thức thao tác DOM
• Cơ chế xử lý sự kiện ổn định
• Tương thích tốt với các trình duyệt
• Kỹ thuật nối tiếp phương thức (method chaining)
• Hệ sinh thái plugin phong phú

2. Các loại selector trong jQuery

• Selector cơ bản: ID, class, thẻ HTML
• Selector phân cấp: $("div span")
• Selector giả (pseudo): $("p:first")
• Selector form: $(":text")

3. Sự khác biệt giữa $(document).ready() và window.onload

window.onload thực thi sau khi toàn bộ tài nguyên (ảnh, CSS, script) được tải xong. $(document).ready() chạy ngay khi DOM sẵn sàng, không cần đợi tài nguyên khác hoàn tất.

4. Cách chuyển đổi giữa đối tượng jQuery và DOM

• Lấy DOM từ jQuery: $("#element")[0]
• Chuyển DOM sang jQuery: $(document.getElementById("element"))

5. Phân biệt attr() và prop()

attr() xử lý thuộc tính HTML nguyên thủy (ví dụ: id, class). prop() thao tác thuộc tính hiện đại của DOM (ví dụ: checked, disabled).

6. Các phương thức chèn node trong jQuery

• append(): Thêm vào cuối phần tử đích
• prepend(): Thêm vào đầu phần tử đích
• after(): Thêm sau phần tử đích
• before(): Thêm trước phần tử đích

7. Các phương thức phổ biến trong jQuery

• find(): Tìm kiếm phần tử con
• on(): Gán sự kiện
• hide()/show(): Ẩn/hiện phần tử
• remove(): Xóa phần tử
• val(): Lấy/gán giá trị form

8. Lấy giá trị radio thứ hai trong nhóm

$('input:radio').eq(1).prop('checked', true);

9. Sự khác biệt giữa selector trong jQuery và CSS

jQuery kế thừa toàn bộ cú pháp selector của CSS, đồng thời mở rộng thêm khả năng tương tác với DOM và xử lý sự kiện.

10. Thao tác CSS class bằng jQuery

• addClass("new-class")
• removeClass("old-class")
• toggleClass("active")

11. Phân biệt selector con trực tiếp và hậu duệ

• Con trực tiếp: $("ul > li") (chỉ cấp 1)
• Hậu duệ: $("div span") (tất cả cấp độ lồng nhau)

12. Kiểm tra trạng thái ẩn/hiện phần tử

if ($('#box').is(':hidden')) {
  $('#box').fadeIn();
} else {
  $('#box').fadeOut();
}

13. Phân biệt get() và eq()

• get(1): Trả về DOM element
• eq(1): Trả về jQuery object

14. Hiệu ứng kéo thả với jQuery

$('#drag').on('mousedown', function(e) {
  const offsetX = e.pageX - $(this).position().left;
  const offsetY = e.pageY - $(this).position().top;
  
  $(document).on('mousemove', (ev) => {
    $('#drag').css({
      left: ev.pageX - offsetX,
      top: ev.pageY - offsetY
    });
  });

  $(document).on('mouseup', () => {
    $(document).off('mousemove');
  });
});

15. Cách giải quyết xung đột khi dùng nhiều thư viện

• Sử dụng $.noConflict()
• IIFE pattern: (function($){})(jQuery)

16. Chuyển đổi giữa mảng và JSON

$.convertArrayToJson = function(arr) {
  return JSON.stringify(arr);
};

$.convertJsonToArray = function(json) {
  return JSON.parse(json);
};

// Sử dụng
const jsonData = $.convertArrayToJson([1, 2, 3]);
const arrayData = $.convertJsonToArray(jsonData);

17. Cơ chế sao chép đối tượng trong jQuery

• Sao chép nông: $.extend({}, source)
• Sao chép sâu: $.extend(true, {}, source)

18. Tạo hiệu ứng lặp vô hạn

function loopAnimation() {
  $('#box').animate({left: '+=200'}, 1000)
           .animate({top: '+=100'}, 1000)
           .animate({left: '-=200'}, 1000)
           .animate({top: '-=100'}, 1000, loopAnimation);
}
loopAnimation();

19. Gán nhiều sự kiện cùng lúc

$('#button').on('click focus', function() {
  // Xử lý logic
});

20. Tối ưu hiệu suất jQuery

• Ưu tiên ID selector thay vì class
• Sử dụng event delegation
• Tận dụng method chaining
• Caching selector
• Sử dụng phiên bản jQuery mới nhất