GitHub

jQuery từng là một trong những thư viện JavaScript phổ biến nhất thế giới, góp phần định hình lại cách chúng ta phát triển giao diện web. Dù hiện nay có nhiều framework hiện đại xuất hiện, việc hiểu rõ jQuery vẫn mang lại lợi ích lớn, đặc biệt khi làm việc với các hệ thống legacy hoặc dự án WordPress.

Tổng quan

jQuery là gì?

jQuery là một thư viện JavaScript nhanh, nhỏ gọn và giàu tính năng. Triết lý cốt lõi của jQuery là “Write less, do more” (Viết ít hơn, làm nhiều hơn), giúp đơn giản hóa việc thao tác với tài liệu HTML, xử lý sự kiện, tạo hiệu ứng hoạt ảnh và tương tác AJAX.

Lịch sử ra đời

jQuery được John Resig giới thiệu lần đầu tiên vào tháng 1 năm 2006 tại sự kiện BarCamp NYC. Trước khi jQuery xuất hiện, việc viết JavaScript thuần (Vanilla JS) để tương thích trên nhiều trình duyệt khác nhau là một “cơn ác mộng” đối với các nhà phát triển.

Bối cảnh lịch sử & Vấn đề giải quyết

Thập niên 2000 chứng kiến sự phân mảnh gay gắt giữa các trình duyệt (đặc biệt là Internet Explorer so với Firefox/Safari). Một đoạn mã chạy tốt trên Firefox có thể bị lỗi hoàn toàn trên IE. jQuery ra đời với sứ mệnh xóa bỏ rào cản tương thích trình duyệt (Cross-browser compatibility), cung cấp một giao diện lập trình (API) nhất quán.

Vị thế hiện tại

Ngày nay, các trình duyệt hiện đại đã tuân theo các tiêu chuẩn chung (ECMAScript, DOM API) tốt hơn rất nhiều. Dù không còn là sự lựa chọn ưu tiên cho các ứng dụng web phức tạp mới, jQuery vẫn chiếm tỷ lệ sử dụng rất lớn trên Internet nhờ các hệ thống CMS như WordPress, Drupal và hàng triệu trang web đang vận hành.

Các tính năng chính của jQuery

Dễ dàng thao tác DOM (DOM Manipulation): Chọn và thay đổi các phần tử HTML/CSS dễ dàng bằng cách sử dụng cú pháp giống hệt CSS Selector.
Xử lý sự kiện (Event Handling): Lắng nghe và xử lý sự kiện người dùng (click, hover, keyup, submit…) ngắn gọn, không lo lỗi trình duyệt.
Tích hợp AJAX đơn giản: Gửi và nhận dữ liệu bất đồng bộ từ server mà không cần tải lại trang chỉ với vài dòng lệnh $.ajax(), $.get(), hay $.post().
Hiệu ứng & Hoạt ảnh (Effects & Animations): Cung cấp sẵn các hiệu ứng phổ biến như ẩn/hiện (hide/show), làm mờ (fadeIn/fadeOut), trượt (slideUp/slideDown).
Hệ sinh thái Plugin phong phú: Hàng ngàn plugin mở rộng do cộng đồng phát triển cho slider, modal popup, form validation…

Sử dụng thực tế

Lựa chọn phiên bản jQuery phù hợp

Khi truy cập trang tải jQuery Core – All Versions, bạn sẽ thấy nhiều nhóm thư viện, biến thể và hình thức nhúng khác nhau. Dưới đây là một số khái niệm về tên gọi và phân loại để bạn có thể dễ dàng lựa chọn phiên bản phù hợp tùy vào mục đích sử dụng:

Các nhóm thư viện:
- jQuery Core: Là thư viện chính chứa toàn bộ các hàm xử lý DOM, sự kiện, AJAX, hiệu ứng… Đây là gói bạn bắt buộc phải dùng để viết code jQuery.
- jQuery Migrate: Là một thư viện bổ trợ (Plugin chuyển đổi). Mục đích duy nhất của nó là giúp code jQuery cũ (viết cho các phiên bản 1.x hoặc 2.x) có thể chạy bình thường trên các phiên bản jQuery Core mới hơn (như 3.x hoặc 4.x) mà không bị lỗi. Sử dụng khi nâng cấp jQuery cho các dự án cũ (Legacy) và có thể gỡ bỏ sau khi nâng cấp xong.
Các biến thể:
- Uncompressed: Mã nguồn đầy đủ, chưa nén, có chứa chú thích. Dùng khi lập trình hoặc cần kiểm tra/sửa lỗi (Development).
- Minified: Mã đã được nén tối đa để giảm dung lượng file, giúp website tải nhanh hơn. Khuyên dùng cho website chạy thực tế (Production).
- Slim: Bản rút gọn đã loại bỏ AJAX và các hiệu ứng phức tạp để đạt dung lượng siêu nhẹ. Dùng khi bạn chỉ cần thao tác DOM và đã có giải pháp thay thế khác (như Fetch API / CSS Animation).
- Slim Minified: Là bản Slim đã được nén tối đa (Minified).
Hình thức nhúng:
- Script: Nhúng kiểu truyền thống với thẻ <script …>.
- Module: Dùng cho dự án viết theo chuẩn ES6 Module (import $ from “...").

Tích hợp jQuery vào dự án

Có 4 cách chính phổ biến để đưa jQuery vào dự án web của bạn:

Sử dụng CDN (Khuyên dùng cho web truyền thống). Một số nguồn CDN phổ biến:
https://releases.jquery.com/jquery/
https://developers.google.com/speed/libraries?hl=vi#jquery
https://cdnjs.com/libraries/jquery
https://www.jsdelivr.com/package/npm/jquery

Bạn không cần tải bất kỳ tệp nào về máy, chỉ cần dán đoạn mã <script> vào tệp HTML bằng cách chèn đoạn mã sau vào trước thẻ </head> (thêm thuộc tính defer để tải song song với HTML/CSS) hoặc thêm trước thẻ </body> (để tránh Render-Blocking). Trình duyệt người dùng sẽ tải jQuery từ máy chủ lưu trữ gần họ nhất.

Ưu điểm: Tốc độ tải nhanh, tiết kiệm băng thông máy chủ của bạn, và có khả năng được lưu sẵn trong bộ nhớ đệm (cache) của trình duyệt người dùng..

HTML

			
<!-- Nhúng jQuery ở trước </head> -->
<head>
    <meta charset="UTF-8">
    <title>Trang web của bạn</title>
    
    <!-- Dùng thuộc tính defer để tải jQuery ở nền, và chỉ chạy khi HTML/CSS đã tải xong -->
    <script src="https://code.jquery.com/jquery-4.0.0.min.js" defer></script>
    <!-- Code JS của bạn -->
</head>
<body>
  <!-- Nội dung HTML của trang web -->
  <div id="app">...</div>
  <!-- Hoặc chèn script jQuery ở đây (ko dùng defer), HTML/CSS sẽ tải trước rồi đến jQuery cuối cùng -->
  <!-- Code JS của bạn -->
</body>

		

Tải trực tiếp về máy chủ nội bộ (Local)

Bạn truy cập vào trang jQuery Core – All Versions, chọn phiên bản cần dùng, tải file .js về thư mục dự án (ví dụ: js/jquery.min.js) và nhúng vào HTML bằng thẻ script với src là đường dẫn đến file .js vừa tải về.

Cài đặt qua Package Manager (NPM / Yarn)

Đối với các dự án sử dụng Node.js, Webpack, Vite, Laravel hoặc các công cụ build hiện đại:

# Dùng npm
npm install jquery
# Hoặc yarn
yarn add jquery

Sau đó import vào file JavaScript chính của bạn:

import $ from "jquery";

Sử dụng qua ES Modules (ESM)

Nếu bạn đang viết JavaScript thuần hiện đại (ES6+) mà không muốn cài đặt npm hay dùng Webpack:

HTML

<script type="module">
  import $ from "https://cdn.jsdelivr.net/npm/jquery@4.0.0/+esm";
  
  // Dùng jQuery trực tiếp thay đổi màu nền thẻ body
  $("body").css("background-color", "#f4f4f4");
</script>

Cú pháp cơ bản

Cú pháp jQuery cơ bản có dạng: jQuery(selector).action() hay $(selector).action(), trong đó:

Dấu $: Ký hiệu để truy cập vào jQuery hay tên viết tắt đại diện cho jQuery.
(selector): Dùng để truy vấn/tìm các phần tử HTML (giống CSS selector).
action(): Hành động sẽ thực hiện trên phần tử đó.

// Hai cách viết này có giá trị tương đương
jQuery("#box-content").hide();
$("#box-content").hide();

⚠️ Lưu ý:

Khi làm việc trong môi trường (ví dụ WordPress) có nhiều thư viện JS khác cũng dùng ký hiệu $, để tránh xung đột với giữa jQuery với các thư viện đó, bạn chỉ cần bọc code trong một hàm anonymous (IIFE) hoặc dùng jQuery(document).ready() như sau:

JavaScript

			
// Cách 1: Truyền $ vào hàm ready
jQuery(document).ready(function($) {
    // Bên trong khối này, bạn thoải mái dùng $ mà không lo xung đột
    $("#btn-toggle").click(function() {
        $("#box-content").slideToggle();
    });
});

// Cách 2: Bọc trong hàm tự chạy IIFE
(function($) {
    // Dùng $ thoải mái ở đây
})(jQuery);

		

Theo cơ chế render, khi trình duyệt đọc HTML, mã nguồn sẽ được nạp và thực thi theo thứ tự từ trên xuống dưới. Lúc này JavaScript hoạt động theo nguyên tắc phải có biến/thư viện trước thì mới gọi được hàm của nó. Như vậy, file JS hoặc script code của bạn, nếu có sử dụng jQuery, cần được nạp sau thẻ script của jQuery (cũng dùng thuộc tính defer nếu đặt ở trước </head>). Nếu script của bạn chạy trước jQuery, trình duyệt sẽ không biết $ hay jQuery là gì và báo lỗi “Uncaught ReferenceError: $ is not defined“.
Trong jQuery, nếu bạn sử dụng Regular function (function() {}), jQuery sẽ tự động gán con trỏ this trực tiếp đến phần tử DOM (selector) đang diễn ra sự kiện. Do đó bạn có thể sử dụng $(this) bên trong function thay cho $(selector). Còn đối với Arrow function (() => {}), nó sẽ không tự tạo con trỏ this riêng mà thừa hưởng từ phạm vi bao quanh nó (như window , document hoặc undefined). Do đó khi viết Event listener trong jQuery hoặc Vanilla JS, nếu tận dụng con trỏ this để trỏ vào phần tử vừa tương tác, hãy dùng function() {} thông thường thay vì Arrow function. Hoặc nếu bạn vẫn muốn dùng Arrow function, có thể dùng tham số event (e.currentTarget) để lấy phần tử đang nhận sự kiện.

JavaScript

			
// ✅ Regular function
$('#text').click(function() {
    $(this).text('Clicked');
});

// ❌ Arrow function
$('#text').click(() => {
    // this lúc này là Window nên text sẽ không thay đổi khi click
    $(this).text('Clicked'); 
});

// ✅ Arrow function
$('#text').click((e) => {
    // dùng e.currentTarget trả về jQuery wrapper của #text
    $(e.currentTarget).text('Clicked'); 
});

		

Các hàm thông dụng

Tùy vào các phiên bản và nhóm thư viện, tổng số hàm sẵn có của jQuery sẽ khác nhau, trung bình từ 150 đến hơn 200 hàm. Các hàm này được phân bổ theo các nhóm tính năng chính:

Thao tác DOM & Xử lý phần tử (DOM Traversal & Manipulation): ~50 – 60 hàm. Ví dụ: .append(), .prepend(), .attr(), .addClass(), .parent(), .children(), .find(),…
Xử lý sự kiện (Events): ~30 – 40 hàm. Ví dụ: .on(), .off(), .trigger(), .click(), .hover(),…
Hiệu ứng & Hoạt ảnh (Effects): ~15 – 20 hàm. Ví dụ: .hide(), .show(), .fadeIn(), .fadeOut(), .slideDown(), .animate(),…
AJAX & Bất đồng bộ (AJAX & Utilities): ~15 – 25 hàm. Ví dụ: $.ajax(), $.get(), $.post(), $.getJSON(), $.each(), $.extend(),…

💡 Bên cạnh các hàm có sẵn, jQuery cho phép lập trình viên tự thêm các hàm mới vào thư viện thông qua cơ chế Custom Plugin (mở rộng $.fn). Các hàm này nên đặt ở đầu file để đảm bảo plugin luôn sẵn sàng trước khi gọi và return chính đối tượng jQuery đó để hỗ trợ tính năng Nối hàm liên hoàn (Method Chaining – cho phép gọi nhiều hàm liên tiếp trên cùng một đối tượng).

JavaScript

			
// Tạo thêm một hàm tùy chỉnh mới tên là greenText, đặt ở đầu file
$.fn.greenText = function() {
    this.css("color", "green");
    return this; // trả về this để hỗ trợ nối hàm
};

// Gọi sử dụng hàm vừa định nghĩa và nối hàm text() của jQuery vào sau đó
$(".title").greenText().text('Đã đổi màu tiêu đề');

		

Tóm lại: Một lập trình viên thực tế chỉ cần nhớ và sử dụng khoảng 20 – 30 hàm phổ biến nhất (như .on(), .addClass(), .hide(), .show(), .find(), $.ajax(),…) là đã có thể giải quyết hầu hết 90% các công việc hàng ngày với jQuery.

Ví dụ thực tế

Ví dụ 1: Thay đổi nội dung và kiểu dáng HTML khi nhấp nút

HTML

			
<button id="btn-change">Đổi nội dung</button>
<p class="text-demo">Đây là đoạn văn ban đầu.</p>

<script>
  $(document).ready(function(){
    $("#btn-change").click(function(){
      $(".text-demo").html("<b>Nội dung đã được thay đổi!</b>").css("color", "blue");
    });
  });
</script>

		

Ví dụ 2: Lắng nghe sự kiện click và Ẩn/Hiện khối (Toggle)

HTML

			
<button id="btn-toggle">Ẩn / Hiện thông báo</button>
<div id="box-content" style="padding: 10px; background: #f0f0f0; margin-top: 10px;">
  Nội dung thông báo quan trọng.
</div>

<script>
  $(document).ready(function(){
    $("#btn-toggle").click(function(){
      $("#box-content").slideToggle("fast");
    });
  });
</script>

		

Ví dụ 3: Gọi API lấy dữ liệu bằng $.ajax và hiển thị ra HTML

HTML

			
<button id="btn-load">Tải dữ liệu bài viết</button>
<div id="post-container" style="margin-top: 15px; padding: 10px; border: 1px solid #ccc; display: none;">
  <h3 id="post-title" style="color: #0073aa;"></h3>
  <p id="post-body"></p>
</div>

<script>
  $(document).ready(function(){
    $("#btn-load").click(function(){
      $.ajax({
        url: "https://jsonplaceholder.typicode.com/posts/1",
        type: "GET",
        dataType: "json",
        success: function(data) {
          // Lấy dữ liệu trả về từ API và chèn vào các phần tử HTML
          $("#post-title").text(data.title);
          $("#post-body").text(data.body);
          
          // Hiển thị khối chứa nội dung
          $("#post-container").fadeIn();
        },
        error: function(error) {
          console.error("Lỗi khi tải dữ liệu:", error);
          alert("Không thể tải dữ liệu từ API!");
        }
      });
    });
  });
</script>

		

Tham khảo thêm code mẫu tại đây.

So sánh jQuery và JavaScript thuần (Vanilla JS)

Để hiểu rõ tại sao jQuery từng rất thành công và lý do ngày nay Vanilla JS dần thay thế nó, hãy cùng so sánh cú pháp và đặc điểm của cả hai qua các thao tác phổ biến:

So sánh cú pháp và cơ chế hoạt động

Tiêu chí / Thao tác	jQuery	JavaScript thuần (ES6+)
Đối tượng trả về	jQuery Wrapper Object (Được bọc trong đối tượng jQuery chứa sẵn các phương thức hỗ trợ).	Native DOM Element / NodeList (Phần tử DOM thực tế của trình duyệt).
Chọn phần tử	`$('.box')`	`document.querySelector('.box')`
Lắng nghe sự kiện	`$('#btn').click(fn)` hoặc `$('#btn').on('click', fn)`	`document.querySelector('#btn').addEventListener('click', fn)`
Thao tác trên nhiều phần tử (Implicit Iteration)	Tự động lặp: `$('.item').addClass('active')` (Áp dụng ngay cho tất cả thẻ `.item` mà không cần vòng lặp).	Phải dùng vòng lặp: `document.querySelectorAll('.item').forEach(el => el.classList.add('active'));`
Thêm / Bỏ Class	`$('.box').addClass('active')` `$('.box').removeClass('active')` hay toggle: `$('.box').toggle();`	`element.classList.add('active')` `element.classList.remove('active')` (Muốn toggle phải dùng `if/else` kiểm tra hoặc dùng `element.classList.toggle('hidden')` với CSS)
Ẩn / Hiện phần tử	`$('.box').hide()` `$('.box').show()`	`element.style.display = 'none'` / `'block'`
Phương thức liên hoàn (Method Chaining)	Hỗ trợ mặc định nên code ngắn hơn: `$('#box').addClass('active').show().html('Done');`	Khó hơn: Phải thực hiện từng dòng lệnh riêng biệt hoặc tự viết hàm helper để kiểm tra phần tử và thực thi, code dài hơn. `const box = document.querySelector('#box');` `if (box) {` `box.classList.add('active'); // Thêm class 'active'` `box.style.display = 'block'; // Hiển thị element (tương đương .show())` `box.innerHTML = 'Done'; // Thay đổi nội dung HTML` `}`
Chờ DOM tải xong (DOM Ready)	`$(document).ready(function() { ... });` hoặc `$(function() { ... });`	`document.addEventListener('DOMContentLoaded', () => { ... });`
Gọi API (AJAX)	`$.ajax({ url: '/api', success: fn })`	`fetch('/api').then(res => res.json()).then(fn)`

Ưu và nhược điểm

Tiêu chí	jQuery	JavaScript thuần (Vanilla JS)
Ưu điểm 🟢	• Cú pháp ngắn gọn: Viết ít hơn, thao tác với chuỗi phần tử (DOM collection) cực dễ mà không cần vòng lặp. • Tương thích tuyệt đối: Xử lý rất tốt bài toán trình duyệt cũ (Cross-browser). • Hệ sinh thái rộng: Hàng ngàn plugin có sẵn để dùng ngay.	• Tối ưu hiệu năng: Chạy trực tiếp trên engine của trình duyệt, không qua lớp bọc trung gian nên tốc độ xử lý nhanh nhất. • Không phụ thuộc: Không cần tải thêm thư viện bên ngoài. • Tiêu chuẩn hiện đại: Code theo chuẩn ES6+ dễ tích hợp với các Framework mới (React, Vue, Webpack…).
Nhược điểm 🔴	• Tốn dung lượng: Phải tải thêm file thư viện (`~30KB - 80KB`). • Hiệu năng: Chậm hơn Vanilla JS do tốn chi phí khởi tạo bọc đối tượng (wrapper class), chạy qua lớp kiểm tra trung gian và các vòng lặp ẩn. • Lạc hậu: Không phù hợp cho các SPA (Single Page Application) phức tạp hiện nay.	• Cú pháp dài hơn: Các thao tác như chọn nhiều phần tử hay tạo hiệu ứng tốn nhiều dòng code hơn. • Tốn thời gian viết code: Phải tự dựng các chức năng thủ công (như tự viết vòng lặp, kiểm tra DOM, xử lý bất đồng bộ) nếu không dùng thư viện ngoài.

JavaScript thuần (Vanilla JS) đã đủ sức thay thế jQuery?

JavaScript thuần (Vanilla JS) hiện đại đã hoàn toàn đủ sức thay thế jQuery cho các dự án xây dựng mới nhờ hiệu năng vượt trội và không phụ thuộc vào thư viện ngoài. Điều này có được là nhờ ngôn ngữ JS (ES6+) đã liên tục nâng cấp các tính năng tiện lợi từ jQuery, kết hợp với việc các trình duyệt ngày nay đã tuân thủ tiêu chuẩn ECMAScript chung.

Tuy nhiên, jQuery vẫn là một công cụ đắc lực, khó có thể thay thế khi bảo trì các hệ thống legacy hoặc làm việc với hệ sinh thái WordPress.

Khi nào nên sử dụng jQuery?

✅ Nên sử dụng khi:

Bảo trì, nâng cấp các dự án legacy, theme/plugin WordPress hoặc trang web viết bằng PHP thuần.
Cần xây dựng nhanh các trang web nhỏ, trang đích (landing page) chỉ với một vài hiệu ứng đơn giản.
Đội ngũ phát triển đã quen thuộc với jQuery và dự án không yêu cầu kiến trúc phức tạp.

❌ Không nên sử dụng khi:

Xây dựng các ứng dụng trang đơn (Single Page Application – SPA) có tương tác dữ liệu phức tạp. Thay vào đó, hãy dùng React, Vue.js, hoặc Angular.
Các dự án mới hoàn toàn: JavaScript thuần hiện đại (ES6+) đã hỗ trợ đầy đủ các tính năng như document.querySelector, fetch(), classList mà không cần phải tải thêm thư viện ngoài.

Lời kết

jQuery đã hoàn thành xuất sắc sứ mệnh lịch sử của mình trong việc thúc đẩy sự phát triển của chuẩn hóa web. Dù vai trò của nó đã suy giảm trước sự trỗi dậy của JavaScript hiện đại và các UI framework, việc nắm vững tư duy thao tác DOM của jQuery vẫn giúp ích rất nhiều cho lập trình viên web.

Đối với người mới bắt đầu, lời khuyên tốt nhất là hãy học thật vững JavaScript thuần (Vanilla JS) trước khi quyết định sử dụng jQuery hay bất kỳ framework nào khác!

Tài liệu tham khảo:
https://api.jquery.com/
https://www.w3schools.com/jquery/default.asp

jQuery toàn tập