jQuery là gì? Tổng quan về jQuery

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. Ngày này, hầu như dân làm web đều rất quan tâm đến thư viện này và không thể phủ nhận sức mạnh của nó. Vì thế, hãy cùng Vietnix tìm hiểu lý do tại sao jQuery ngày càng phát triển như vậy nhé.

jQuery là gì?

jQuery là một thư viện được viết bằng JavaScript đ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 được tích hợp từ nhiều module khác nhau. Các module phổ biến của jQuery bao gồm:

• Ajax: Xử lý Ajax.
• Event: Xử lý sự kiện.
• Atributes: Xử lý các thuộc tính của đối tượng HTML.
• DOM: Xử lý Data Object Model.
• Effect: Xử lý hiệu ứng.
• Form: Xử lý sự kiện liên quan tới form.
• Selector: Xử lý luồng lách giữa các đối tượng HTML.

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 được xem là một điều may mắn cho một số nhà phát triển web, dù là người mới hay đã có kinh nghiệm. Đây là một thư viện dành cho Javascript giúp đơn giản hóa việc lập trình với JavaScript, cung cấp các cú pháp dễ sử dụng, cô đọng để thực hiện được những tác vụ, thậm chí là phức tạp.

Việc sử dụng JQuery có một số lợi ích so với việc sử dụng các thư viện JavaScript khác.

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

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.

Lời kết

Như vậy, chúng ta đã cùng tìm hiểu xong jQuery là gì cũng như những kiến thức cơ bản về jQuery. Nhìn chung, jQuery đã đáp ứng được nhu cầu của lập trình là hạn chế việc lập trình nhiều, nhưng vẫn đảm bảo đạt được các yêu cầu. Hy vọng qua bài viết này có thể giúp bạn sử dụng jQuery thành công. Đừng quên theo dõi những bài viết bổ ích tiếp theo của Vietnix nhé!