jQuery là gì? Tổng quan về jQuery tất tần tật về nó

tháng 4 08, 2023

jQuery là gì? Tổng quan về jQuery tất tần tật về nó

Nếu bạn đã nghe qua thuật ngữ jQuery nhưng vẫn chưa thực sự biết jQuery là gì và cách sử dụng, thì đây là bài viết dành cho bạn. Trong ngày nay, hầu hết các nhà phát triển web đều quan tâm đến thư viện này và không thể phủ nhận sức mạnh của nó. jQuery giúp cho việc phát triển các trang web và ứng dụng web trở nên dễ dàng hơn bao giờ hết. Được phát triển vào năm 2006, jQuery nhanh chóng trở thành một trong những thư viện JavaScript phổ biến nhất và vẫn được sử dụng rộng rãi cho đến ngày nay.
Một số lý do khiến jQuery trở thành một thư viện phổ biến bao gồm cú pháp dễ đọc, hỗ trợ tương thích đa trình duyệt, cung cấp các tính năng xử lý sự kiện và thao tác với DOM một cách dễ dàng, cũng như cung cấp một loạt các plugin mạnh mẽ để giải quyết các vấn đề phức tạp trong lập trình web. Với những ưu điểm này, không ngạc nhiên khi jQuery ngày càng phát triển và trở thành một công cụ không thể thiếu trong cộng đồng lập trình web.
Nếu bạn muốn bắt đầu học jQuery, hãy tìm hiểu các tài liệu và ví dụ trên trang chủ của jQuery. Việc học jQuery sẽ giúp bạn tăng tốc độ phát triển và tối ưu hóa các trang web và ứng dụng web của mình.

jQuery là gì?

jQuery là một thư viện được viết bằng đa tính năng, nhanh và nhỏ gọn. jQuery hoạt động theo phương châm Write less – Do more (viết ít hơn, làm nhiều hơn). Mục đích của jQuery là làm cho việc sử dụng JavaScript trên trang web trở nên dễ dàng hơn.

jQuery thực hiện rất nhiều tác vụ phổ biến đòi hỏi nhiều dòng mã JavaScript để hoàn thành và gói chúng thành các phương thức mà có thể gọi bằng một dòng mã. jQuery cũng đơn giản hóa rất nhiều thứ phức tạp từ JavaScript, AJAX call và thao tác DOM.

jQuery là một thư viện JavaScript được tích hợp từ nhiều module khác nhau nhằm giúp cho việc lập trình JavaScript trở nên đơn giản hơn. Các module phổ biến của jQuery bao gồm:

Ajax: Cho phép gửi và nhận dữ liệu qua Ajax.
Event: Xử lý các sự kiện như click, hover, submit, keypress, ...
Attributes: Xử lý các thuộc tính của các đối tượng HTML như class, id, data, ...
DOM: Xử lý Data Object Model, giúp thao tác với HTML DOM trở nên dễ dàng hơn.
Effects: Tạo hiệu ứng và chuyển động cho các đối tượng HTML.
Form: Xử lý các sự kiện liên quan đến form như submit, validate, ...
Selector: Lọc và chọn các đối tượng HTML dựa trên các tiêu chí như class, id, thuộc tính, ... để thao tác với chúng.

Lịch sử phát hành của jQuery

jQuery phát hành phiên bản đầu tiên vào năm 2006 bởi John Resig tại Barcamp NYC. Hiện đang được duy trì bởi một nhóm các nhà phát triển được dẫn đầu bởi Timmy Willison.

jQuery được cấp phép theo CC BY-SA 2.5, và được cấp lại vào năm 2006 bởi MIT. Vào cuối năm 2016 được cấp phép hoạt động bởi GPL và MIT.

Các phiên bản của jQuery:

Phiên bản 1 được phát hành vào ngày 26/8/2006.
Phiên bản 1.1 được phát hành vào ngày 14/1/2007.
Phiên bản 1.2 được phát hành vào ngày 10/9/2007.
Phiên bản 1.3 được phát hành vào 14/01/2009.
Phiên bản 1.4 được phát hành vào 14/01/2010.
Phiên bản 1.5 được phát hành vào ngày 31/01/2011.
Phiên bản 1.6 được phát hành vào 03/5/2011.
Phiên bản 1.7 được phát hành vào 03/11/2011.
Phiên bản 1.8 được phát hành vào ngày 09/8/2012.
Phiên bản 1.9 được phát hành vào 15/01/2013.
Phiên bản 1.10 được phát hành vào 24/5/2013.
Phiên bản 1.11 được phát hành vào 24/01/2014.
Phiên bản 2.0 được phát hành vào 18/4/2013.
Phiên bản 2.1 được phát hành vào 24/01/2014.
Ưu điểm của jQuery là gì?

jQuery là một thư viện Javascript rất hữu ích cho những nhà phát triển web, bất kể là người mới bắt đầu hay có kinh nghiệm. Thư viện này giúp đơn giản hóa việc lập trình với Javascript bằng cách cung cấp các cú pháp dễ sử dụng và tiện ích để thực hiện các tác vụ phức tạp.

Việc sử dụng jQuery có nhiều lợi ích so với việc sử dụng các thư viện Javascript khác. Ví dụ, jQuery hỗ trợ xử lý sự kiện, truy xuất và thay đổi thuộc tính HTML và CSS, hiệu ứng, Ajax và DOM. Nó cũng hỗ trợ tương thích với nhiều trình duyệt khác nhau và có cộng đồng phát triển đông đảo, cung cấp nhiều tài liệu và hỗ trợ cho những người mới học. Tóm lại, jQuery là một công cụ hữu ích để giúp các nhà phát triển tạo ra các trang web và ứng dụng web đẹp và chuyên nghiệp hơn.

Dễ sử dụng

Đây là ưu điểm chính của việc sử dụng JQuery, nó dễ sử dụng hơn rất nhiều so với JavaScript chuẩn và các thư viện JavaScript khác. Ngoài cú pháp đơn giản, jQuery cũng yêu cầu ít dòng mã hơn nhiều để đạt được cùng một tính năng so với các thư viện JavaScript khác.

Thư viện lớn

JQuery cho phép thực hiện nhiều hàm so với các thư viện JavaScript khác.

Opensource community mạnh (Có sẵn một số plugin jQuery)

Mặc dù còn tương đối mới, nhưng có nhiều người đã dành thời gian để tìm hiểu, phát triển và nâng cao chức năng của JQuery. Do đó, có hàng trăm plugin viết sẵn có sẵn để tải xuống nhằm tăng tốc ngay lập tức quá trình phát triển. Bên cạnh đó, điều này còn đảm bảo tính hiệu quả và bảo mật của script.

Có tài liệu và hướng dẫn tuyệt vời

Trang web JQuery có một tài liệu và hướng dẫn toàn diện cho người mới bắt đầu lập trình hoàn toàn có thể nắm bắt được các hoạt động của thư viện này.

Hỗ trợ Ajax

JQuery cho phép phát triển các mẫu Ajax một cách dễ dàng. Ajax là một phương thức cho phép tạo một giao diện đẹp hơn, và là nơi các hành động có thể được thực hiện trên các trang mà không yêu cầu tải lại toàn bộ trang.

Nhược điểm của jQuery là gì?

Chức năng có thể bị hạn chế

Mặc dù JQuery là một thư viện ấn tượng về số lượng, tùy thuộc vào mức độ tùy chỉnh yêu cầu trên trang web của bạn. Tuy nhiên, vẫn có nhiều chức năng có thể bị hạn chế, do đó việc sử dụng JavaScript thuần để xây dựng chức năng này.

Làm cho client trở nên chậm hơn

Client không chỉ để hiển thị mà còn phải xử lý nhiều chức năng được tạo thành từ jQuery. Nếu jQuery bị lạm dụng quá nhiều sẽ làm cho client trở nên chậm chạp, đặc biệt là những client yếu. Vì thế, các lập trình viên cần phải dùng thêm cache.

Cách sử dụng jQuery

Có rất nhiều thư viện JavaScript trên Internet, tuy nhiên jQuery có lẽ là thư viện phổ biến nhất, tiện dụng nhất và có thể mở rộng.

Một số công ty lớn cũng sử dụng jQuery như Google, Microsoft, IBM, Netflix.

Có hai cách để sử dụng jQuery là tải jQuery từ jquery.com hoặc sử dụng jQuery trực tiếp từ CDN như Google.

Download jQuery

Có hai phiên bản để download jQuery:

Production version (phiên bản sản xuất) – phiên bản dành cho trang web live vì minify (rút gọn) và compress (nén).
Development version (phiên bản phát triển) – là phiên bản để thử nghiệm và phát triển (mã không nén và có thể đọc được).

Cả hai phiên bản này đều được download từ jQuery.com. Thư viện jQuery là một file JavaScript duy nhất và reference (tham chiếu) bằng thẻ HTML <script> ( thẻ <script> phải nằm trong phần <head>):

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

jQuery CDN

Nếu bạn không muốn tự tải xuống và lưu trữ jQuery, thì có thể sử dụng jQuery trực tiếp từ CDN (Content Delivery Network – Mạng phân phối nội dung). Google là một ví dụ điển hình cho host jQuery.

Google CDN

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

Cú pháp của jQuery

Cách thức làm việc của jQuery là sẽ dùng các bộ chọn (Selector) để chọn ra các phần tử HTML mà mình muốn xử lý, sau đó dùng các hàm (được cung cấp bởi thư viện jQuery) để xử lý các phần tử HTML đó.

Phương thức jQuery đơn giản

Phương thức jQuery đơn giản là chỉ cần chọn ra một phần tử HTML rồi dùng một hành động để xử lý.

Cú pháp:

$(selector).action();

Dấu $ để định nghĩa/truy cập jQuery.
(seletor) để “query (hoặc Find)” các phần tử HTML.
jQuery action() được thực hiện trên các phần tử.

Ví dụ:

$(this).hide() – ẩn phần tử hiện tại.
$("p").hide() – ẩn tất cả các phần tử.
$(".test").hide() – ẩn tất cả các phần tử có class=”test”.
$("#test").hide() – ẩn phần tử có id=”test”.

Phương thức jQuery phức tạp

Phương thức được gọi là phức tạp khi chọn một phần tử HTML rồi dùng hành động để xử lý và trong hành động đó lại bao gồm các phương thức jQuery khác.

Cú pháp:

$(selector).action(function(){   
// Các phương thức jQuery khác nằm trong này 
});

JQuery Selector (Bộ chọn JQuery)

jQuery Selector là một trong những phần quan trọng nhất của thư viện jQuery. Bộ chọn jQuery cho phép chọn và thao tác trên các phần tử HTML.

Bộ chọn jQuery được sử dụng để “tìm” (hoặc chọn) các phần tử HTML dựa trên tên, ID, class, type, thuộc tính, giá trị của thuộc tính và nhiều hơn nữa. Nó dựa trên Bộ chọn CSS hiện có và một số bộ chọn tùy chỉnh riêng.

Tất cả các bộ chọn trong jQuery đều bắt đầu bằng ký hiệu $ hoặc $().

Element Selector (Bộ chọn phần tử)

Bộ chọn phần tử jQuery chọn các phần tử dựa trên tên phần tử.

Bạn có thể chọn tất cả các phần tử <p> trên một trang như thế này:

$("p")

Ví dụ:

Khi người dùng click vào nút, các phần tử <p> sẽ bị ẩn.

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

#ID selector (Bộ chọn ID)

Bộ chọn jQuery #id sử dụng thuộc tính id của thẻ HTML để tìm phần tử cụ thể.

Một id phải là duy nhất trong một trang, vì vậy bạn nên sử dụng bộ chọn #id khi muốn tìm một phần tử duy nhất.

Để tìm một phần tử có id cụ thể, hãy viết một ký tự hash, theo sau là id của phần tử HTML

$("#test")

Ví dụ:

Khi người dùng click vào nút, phần tử có id=”test” sẽ bị ẩn.

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

.class Selector (Bộ chọn .class)

Bộ chọn jQuery .class tìm các phần tử với một lớp cụ thể.

Để tìm các phần tử với một lớp cụ thể, hãy viết một ký tự dấu chấm, theo sau là tên của lớp:

$(".test")

Ví dụ: Khi người dùng click vào nút, các phần tử class=”test” sẽ bị ẩn.

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

Một số ví dụ khác về bộ chọn jQuery

Cú pháp	Mô tả
$(“*”)	Chọn tất cả các phần tử.
$(this)	Chọn các phần tử HTML hiện tại.
$(‘p.intro)	Chọn tất cả các phần tử <p> có class=”intro”.
$(“p:first”)	Chọn phần tử <p> đầu tiên.
$(“ul li:first”)	Chọn phần tử <li> đầu tiên của phần <ul> đầu tiên.
$(“ul li:first-child”)	Chọn phần tử <li> đầu tiên của mỗi phần tử <ul>.
$(“[href]”)	Chọn tất cả các phần tử có thuộc tính href.
$(“a[target=’_blank’]”)	Chọn tất cả các phần tử <a> có giá trị thuộc tính bằng “_blank”.
$(“a[target!=’_blank’]”)	Chọn tất cả các phần tử <a> có giá trị thuộc tính không bằng “_blank”.
$(“:button”)	Chọn tất cả các phần tử <button> và <input> có type=”button”.
$(“tr:even”)	Chọn tất cả các phần từ “tr” chẵn.
$(“tr:odd”)	Chọn tất cả các phần từ “tr” lẻ.

Một số ví dụ khác về bộ chọn jQuery

Một số thuật ngữ jQuery bạn cần biết?

Element

Element: Phần tử, là một yếu tố DOM bao gồm các thuộc tính của nó, text và children. Ví dụ:

<div>
   <p class="baivong">
         Con gà có 
       <strong>4<trong> 
         <i>chân</i>
     </p>
<div> // HTML ví dụ
// Element p bao gồm tất cả những gì bạn thấy trong DOM của nó

Selector

Selector: Trong jQ, khi bạn muốn làm một điều gì, đầu tiên bạn phải xác định chính xác elements cần cho việc đó. Selector là cách thức, phương pháp để bạn chọn được nó. Ví dụ:

$("p") // Chọn phần tử theo element p
$(".baivong") // Chọn phần tử theo class baivong

Method

Method: Phương thức. Ví dụ:

.click(function(){}) // Phương thức này thực hiện khi nhấp chuột trái

Event

Event: Sự kiện, đề cập đến các tác vụ của người dùng như nhấp chuột, rê chuột, gõ phím, tải trang… Ví dụ:

$("p").click(function(){}); // Nhấp chuột trái lên p
$("input").focus(); // Kích hoạt event focus trên input

jQuery

jQuery: Một đối tượng jQuery bao gồm DOM tạo ra từ chuỗi HTML hoặc chọn từ tài liệu. Ví dụ:

$("p"); // Đây là một đối tượng jQuery

Khi một phương thức thay đổi cấu trúc DOM của nó, biến nó thành đối tượng jQuery khác thì toàn bộ quá trình đó cũng tính là jQuery như định nghĩa này.

$("p").css("color", "red"); // Đây là một đối tượng jQuery
$("p").css("color", "red").find("strong").hide(); // Đây là một đối tượng jQuery

Text

Text: Văn bản, chuỗi ký tự. Ví dụ:

$("div").text() // Kết quả: Con gà có 4 chân

Children

Children: Phần tử con, là những phần tử ở các phần nhánh DOM bắt đầu từ nó. Ví dụ:

// Phần tử strong và i đóng vai trò children của p

Siblings

Siblings: Phần tử anh chị em, là những phần tử chung gốc DOM(cha mẹ) với nó. Ví dụ:

// Phần tử p và i là siblings của nhau

Parent

Parent: Phần tử cha mẹ, phần tử gốc DOM mà nó trực thuộc. Ví dụ:

// Phần tử p và i có parent là p

Ancestors

Ancestors: Phần tử tổ tiên, tất cả các phần tử gốc DOM phân nhánh đến nó, parent, parent của parent, parent của … parent. Ví dụ:

// Phần tử i có ancestors là p và div

String

String: Chuỗi ký tự, trong javascript chuỗi phải được đặt trong dấu nháy. Ví dụ

"Đây là chuỗi" // Chuỗi ký tự
"123" // Chuỗi số
Không phải chuỗi // Lỗi cú pháp
123 // Số
$("div") // Phần tử div, không phải chuỗi vì div đóng vai trò là selector.
$("div").text("Đây là chuỗi") // Vì nó không đóng vai trò là selector

htmlString

htmlString: Chuỗi có chứa tag HTML, đặt trong dấu nháy, có thể tạo thành phần tử HTML tùy phương thức. Ví dụ:

"<p>Ctrl©</p>"
"<p>Ctrl©</p> baivong"
$("<p>Ctrl©</p>").appendTo("body")
$("body").html("<p>Ctrl© baivong</p>")

Number

Number: Số, có thể dùng trong các phép toán (+, -, *, /, %, =, +=, -=, *=, /=, ++, –). Cẩn thận nhầm với chuỗi số. Ví dụ:

123 // Số
1.23 // Số
"123" // Chuỗi số
234 + "12" // Chuỗi số. Kết quả "23412"
234 + eval("12") // Số, do phương thức eval đã chuyển chuỗi số 12 thành số 12. Kết quả: 246

Oject

Object: Đối tượng javascript, gồm mọi thứ dùng trong javascript. Ví dụ:

var x = {}; // Ký hiệu ngoặc nhọn({...}), dù không có thuộc tính nào x vẫn là đối tượng javascript
document // Đối tượng
var y = {
    name: "Pete",
    age: 15
}; // Đối tượng y với 2 thuộc tính name và age

Dùng dấu chấm(.) để lấy hoặc gán giá trị cho thuộc tính trong đối tượng. Ví dụ:

y.name // Lấy giá trị thuộc tính name. Kết quả: "Pete"
y.age // Lấy giá trị thuộc tính age. Kết quả: 15
y.age = 20 // Gán giá trị 20 cho thuộc tính age

PlainOject

PlainObject: Đối tượng thuần, chỉ các đối tượng viết với dấu ngoặc nhọn({…}). Dùng phương thức $.isPlainObject để kiểm tra. Ví dụ:

$("div") // Không phải là PlainObject
var x = {
    background: "red",
    display: "inline"
}; // Đây là PlainObject
$("div").css(x); // Gán thuộc tính css vào div
$.isPlainObject($("div")); // Kết quả: false
$.isPlainObject(x); // Kết quả: true

Array

Array: Mảng javascript, lấy giá trị theo số thứ tự trong mảng. Ví dụ:

var x = []; // Ký hiệu ngoặc vuông([...]), dù không có thuộc tính nào x vẫn là mảng javascript
var y = ["name", "Pete"]; // Mảng đơn
y[0] // Kết quả: "name"
y[1] // Kết quả: "Pete"
var y = [
    ["name", "Pete"],
    ["age", 15]
]; // Mảng kép
y[0] // Kết quả là mảng javascript: ["name", "Pete"]
y[0][0] // Kết quả: "name"
y[1][0] // Kết quả: "age"
y[1][1] // Kết quả: 15

Function

Function: Hàm, chức năng. Nó được sử dụng khi cần thực hiện một xử lý javascript. Có 2 cách đặt tên hoặc vô danh:

function baivong() {} // Tên hàm là baivong
var ctrlc = function() {} // tên hàm là ctrlc
(function() {})() // Không đặt tên hàm

Trong jQ, hàm được sử dụng khá thường xuyên. Ví dụ:

$(document).ready(function () {}); // Xử lý khi tài liệu sẵn sàng
$("a").click(function () {}); // Xử lý khi click vào a
$.ajax({
    url: "/forum",
    success: function () {} // Xử lý với tài liệu từ url "/forum"
});

Callback

Callback: Gọi lại, trả về. Nó được sử dụng khá thường xuyên trong jQ, một vài callbacks chỉ là sự kiện, được gọi để cung cấp đối tượng cho phương thức xử lý. Ví dụ:

$("body").click(function( event ) {
    return "clicked: " + event.target;
});

Đôi khi callback được dùng với luận lý false để chặn một sự kiện được kích hoạt. Ví dụ:

$("body").click(function() {
    return false;
});
$("form").submit(function() {
    return false;
});

Tại sao jQuery lại tốt hơn Javascript?

jQuery có thể được sử dụng để phát triển các ứng dụng dựa trên AJAX.
Có thể được sử dụng để giữ cho mã đơn giản, ngắn gọn và có thể tái sử dụng.
JQuery đơn giản hóa quá trình duyệt qua DOM HTML.
Có thể xử lý các sự kiện, tạo hiệu ứng và thêm hỗ trợ AJAX trong các ứng dụng web.