jQuery là một thư viện JavaScript phổ biến, giúp đơn giản hóa việc thao tác với DOM, xử lý sự kiện, tạo hiệu ứng và thực hiện các yêu cầu AJAX. Triết lý cốt lõi của nó là "write less, do more" — viết ít hơn nhưng làm được nhiều hơn, đồng thời đảm bảo tương thích rộng rãi trên các trình duyệt cũ (đặc biệt ở phiên bản 1.x).

Khởi đầu với jQuery

Để sử dụng, cần đưa thư viện vào trang HTML — có thể tải về hoặc dùng CDN:

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

Sau khi tải xong, toàn bộ API được đóng gói trong hai biểu tượng đồng nghĩa: $ và jQuery. Thông thường, người ta ưu tiên dùng $ cho ngắn gọn.

Bộ chọn (Selectors)

jQuery kế thừa cú pháp CSS để định vị phần tử. Kết quả trả về luôn là một đối tượng jQuery — hỗ trợ gọi phương thức chuỗi (chaining) và không cần duyệt mảng thủ công như DOM thuần.

Các bộ chọn cơ bản

• $('#header') → tương đương document.getElementById('header')
• $('.nav-item') → tất cả phần tử có lớp nav-item
• $('article') → tất cả thẻ <article>
• $('ul li.active') → các thẻ <li> có lớp active bên trong <ul>
• $('header, footer, .sidebar') → hợp của nhiều điều kiện

Bộ chọn quan hệ

Cú pháp	Mô tả
$('nav a')	Tìm tất cả <a> là hậu duệ (bất kỳ cấp độ nào) của <nav>
$('nav > a')	Chỉ tìm <a> trực tiếp là con của <nav>
$('h2 + p')	Tìm đoạn văn ngay sau tiêu đề cấp 2
$('h2 ~ p')	Tìm tất cả đoạn văn đứng sau <h2> cùng cấp

Bộ lọc vị trí (Pseudo-classes)

• $('tr:even') — hàng chẵn (chỉ số bắt đầu từ 0)
• $('tr:gt(2)') — hàng có chỉ số lớn hơn 2
• $('div:not(.hidden)') — mọi <div> trừ những cái có lớp hidden
• $('ul:has(li:last-child)') — danh sách chứa mục cuối cùng là <li>

Bộ chọn thuộc tính

• $('[data-id]') — phần tử có thuộc tính data-id (bất kể giá trị)
• $('[type="submit"]') — nút gửi biểu mẫu
• $('[href^="https://"]') — liên kết bắt đầu bằng https://
• $('[src$=".png"]') — ảnh có đuôi .png
• $('[class*="btn-"]') — phần tử có lớp chứa chuỗi btn-

Bộ chọn biểu mẫu (Form Selectors)

• $(':input') — tất cả phần tử nhập liệu (<input>, <select>, <textarea>, <button>)
• $(':text, :password') — ô văn bản và mật khẩu
• $(':checked') — checkbox/radio đã chọn
• $(':disabled') — phần tử bị vô hiệu hóa
• $(':visible') — phần tử đang hiển thị (không bị display: none hay visibility: hidden)

Thao tác với phần tử

Quản lý lớp CSS

$('.card').addClass('is-highlighted'); // thêm lớp
$('.card').removeClass('is-hidden');   // xoá lớp cụ thể
$('.card').toggleClass('collapsed');   // bật/tắt lớp
$('.card').hasClass('active');         // kiểm tra tồn tại lớp → true/false

Thiết lập kiểu trực tiếp

$('#banner').css('background-color', '#3498db');
$('#banner').css({
  'font-size': '1.2em',
  'padding': '1rem',
  'border-radius': '4px'
});

Truy xuất và chỉnh sửa nội dung

• $('.title').text() — lấy hoặc gán văn bản thuần (không giữ markup)
• $('.content').html() — lấy hoặc gán nội dung HTML đầy đủ
• $('input[name="email"]').val() — đọc/gán giá trị value của input

Thuộc tính và thuộc tính trạng thái

Dùng .attr() cho thuộc tính tĩnh (như id, src, href).
Dùng .prop() cho thuộc tính phản ánh trạng thái động (như checked, disabled, selected):

$('input[type="checkbox"]').prop('checked', true); // đánh dấu chọn
$('input').attr('data-version', '2.1');           // đặt thuộc tính tùy chỉnh

Thao tác DOM cấu trúc

Hành động	Cú pháp	Mô tả
Thêm vào cuối	$(A).append(B)	Chèn B vào cuối nội dung A
Thêm vào đầu	$(A).prepend(B)	Chèn B vào đầu nội dung A
Chèn phía sau	$(A).after(B)	Chèn B ngay sau A (cùng cấp)
Xoá phần tử	$('.temp').remove()	Xoá hoàn toàn khỏi DOM
Xoá nội dung con	$('#box').empty()	Giữ lại phần tử gốc, xoá hết con
Nhân bản	$('#btn').clone(true)	true: sao chép kèm sự kiện

Sự kiện và xử lý

jQuery hỗ trợ gắn sự kiện theo hai cách chính:

// Cách 1: Gắn trực tiếp
$('#submit-btn').click(function(e) {
  e.preventDefault(); // ngăn hành vi mặc định (vd: submit form)
  console.log('Đã nhấn nút!');
});

// Cách 2: Dùng .on() — linh hoạt hơn, hỗ trợ uỷ quyền
$('#form-container').on('submit', 'form', function(e) {
  e.preventDefault();
  alert('Gửi thành công!');
});

Một số sự kiện phổ biến:

• .click(), .dblclick()
• .hover(overHandler, outHandler)
• .focus(), .blur(), .change()
• .keydown(), .keyup(), .keypress()

Ngăn chặn lan truyền và hành vi mặc định

• e.stopPropagation() — dừng sự kiện lan lên cha
• e.preventDefault() — ngăn hành vi mặc định (ví dụ: không tải lại trang khi submit)
• return false — tương đương cả hai lệnh trên

Khởi tạo khi tài liệu sẵn sàng

Thay vì đợi toàn bộ trang tải xong như window.onload, jQuery cung cấp cách hiệu quả hơn:

$(function() {
  // Đoạn mã này chạy khi DOM đã sẵn sàng — nhanh hơn window.onload
  $('.dropdown').on('click', '.toggle', toggleMenu);
});

Hiệu ứng và hoạt ảnh

jQuery tích hợp sẵn một số hàm hoạt ảnh đơn giản:

$('#notification').fadeIn(300).delay(2000).fadeOut(500);

// Hoặc dùng animate() để điều khiển thuộc tính CSS
$('.progress-bar').animate({
  width: '85%'
}, 800, 'swing');