jQuery – Sức mạnh của Thư viện JavaScript

Blog / By

jQuery là gì? Đối với bạn đang muốn tìm hiểu và nghiên cứu cách sử dụng jQuery, đây là bài viết dành cho bạn. Tôi sẽ trình bày một cách tổng quan nhất để bạn dễ dàng nắm bắt được về jQuery. Hãy cùng tìm hiểu nhé.

jQuery là gì?

jQuery là một thư viện JavaScript mạnh mẽ, giúp xây dựng các chức năng bằng JavaScript dễ dàng, nhanh chóng và tích hợp nhiều tính năng hơn. jQuery được tích hợp nhiều module khác nhau, từ module hiệu ứng cho đến module truy vấn selector. Điều này giúp cho việc sử dụng jQuery phổ biến đến 99% trên tổng số website trên thế giới.

Các module chính của jQuery bao gồm:

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

jQuery là gì?

jQuery không phải là một ngôn ngữ lập trình riêng biệt mà hoạt động liên kết với JavaScript. Với jQuery, bạn có thể làm được nhiều việc hơn mà lại tốn ít công sức hơn. jQuery cung cấp các API giúp việc duyệt tài liệu HTML, hoạt ảnh, xử lý sự kiện và thao tác AJAX đơn giản hơn. jQuery cũng hoạt động tốt trên nhiều loại trình duyệt khác nhau. Một trong những đối thủ nặng ký của jQuery đó là JS Framework.

Bạn có thể tìm hiểu thêm về AJAX trong bài viết “AJAX là gì?”.

Lịch sử của jQuery

jQuery được phát hành vào tháng 1 năm 2006 bởi John Resig tại BarCamp NYC. Nó được duy trì và phát triển bởi một nhóm các nhà phát triển của Google đứng đầu là Timmy Wilson.

Xem thêm  Tại sao điểm tín dụng lại quan trọng? Cải thiện như thế nào?

Dưới đây là lịch sử các phiên bản của jQuery:

Phiên bản Ngày phát hành
1.0 26/8/2006
1.1 14/1/2007
1.2 10/9/2007
1.3 14/1/2009
1.4 14/1/2010
1.5 31/1/2011
1.6 3/5/2011
1.7 3/11/2011
1.8 9/8/2012
1.9 15/1/2013
1.10 24/5/2013
1.11 24/1/2014
2.0 18/4/2013
2.1 24/1/2014

jQuery trải qua nhiều giai đoạn phát triển để hoàn thiện hơn

Các tính năng quan trọng của jQuery

jQuery có rất nhiều tính năng quan trọng, giúp nó trở nên phổ biến và hữu ích đến như vậy. Dưới đây là một số tính năng quan trọng của jQuery:

  • Gọn nhẹ: jQuery là một thư viện khá gọn nhẹ, có kích cỡ khoảng 19KB (gzipped).
  • Tương thích đa nền tảng: jQuery tự động sửa lỗi và chạy trên mọi trình duyệt phổ biến như Chrome, Firefox, Safari, MS Edge, IE, Android và iOS.
  • Dễ dàng tạo Ajax: Nhờ thư viện jQuery, code được viết bởi Ajax có thể dễ dàng tương tác với server và cập nhật nội dung tự động mà không cần phải tải lại trang.
  • Xử lý nhanh nhạy thao tác DOM: jQuery giúp lựa chọn các phần tử DOM để traverse (duyệt) một cách dễ dàng, và chỉnh sửa nội dung của chúng bằng cách sử dụng Selector mã nguồn mở, mà còn được gọi là Sizzle.
  • Đơn giản hóa việc tạo hiệu ứng: Giống với code snippet có hiệu ứng animation, nó phủ các dòng code và bạn chỉ việc thêm biến/nội dung vào thôi.
  • Hỗ trợ tốt phương thức sự kiện HTML: jQuery xử lý các sự kiện đa dạng mà không làm cho HTML code trở nên lộn xộn với các Event Handler.

jQuery rất đa dạng về tính năng

Ưu điểm của jQuery là gì?

jQuery có nhiều ưu điểm nổi bật, đó là lý do tại sao nó được sử dụng phổ biến nhất trong JavaScript. Dưới đây là một số ưu điểm của jQuery:

  • jQuery xử lý code rất nhanh và có khả năng mở rộng.
  • jQuery tạo điều kiện cho người dùng viết các mã chức năng bằng cách sử dụng dòng mã tối thiểu.
  • jQuery cải thiện hiệu suất lập trình web.
  • jQuery phát triển các ứng dụng tương thích với trình duyệt.
  • Hầu hết các tính năng mới của trình duyệt mới đều được jQuery sử dụng.
Xem thêm  định danh mbbank là gì

Cách cài đặt jQuery

Tải jQuery về máy

Cách đơn giản và nhanh nhất để cài đặt jQuery là tải thư viện jQuery từ trang http://jQuery.com/download. Lựa chọn phiên bản nào tuỳ thuộc vào trình duyệt web mà bạn đang sử dụng và nơi bạn dùng jQuery. Sau đó, bạn có thể include thư viện jQuery vào trong HTML file của bạn như sau:

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="../jQuery/jQuery-2.1.3.min.js" type="text/javascript"></script>
   </head>
   <body>
      <h1>Hello</h1>
   </body>
</html>

Sử dụng CDN

Cách thứ hai để liên kết thư viện jQuery đến trang web là dùng CDN (Content Delivery Network). Với cách làm này thay vì tải thư viện jQuery về web hosting hay máy chủ, chúng ta sẽ liên kết đến thư viện jQuery của một số nhà cung cấp như cộng đồng jQuery, Google hay Microsoft. Các CDN phổ biến và tin cậy nhất hiện nay là:

Bạn có thể include thư viện jQuery vào trong HTML code một cách trực tiếp từ Content Delivery Network (CDN).

Ví dụ:

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jQuery/2.1.3/jQuery.min.js" type="text/javascript">
      </script>
   </head>
   <body>
      <h1>Hello</h1>
   </body>
</html>

Các thuật ngữ cần biết của jQuery

Trong quá trình sử dụng jQuery, bạn sẽ gặp nhiều thuật ngữ khác nhau. Dưới đây là một số thuật ngữ quan trọng nhất của jQuery mà bạn cần biết:

  • jQuery Selectors: jQuery Selectors được sử dụng để chọn và thao tác các phần tử HTML. Đây là phần rất quan trọng trong thư viện jQuery. Với jQuery Selectors, bạn có thể tìm hoặc chọn các phần tử HTML dựa trên ID, classes, attributes, types và nhiều thứ khác từ DOM.
  • jQuery Tag Name: Thể hiện cho một tên thẻ có sẵn trong DOM. Ví dụ: $('p') chọn toàn bộ đoạn văn <p> trong tài liệu.
  • Tag ID: Đại diện cho một thẻ có sẵn với một ID duy nhất trong DOM. Ví dụ: $('#real-id') chọn một thành phần duy nhất trong tài liệu có ID là real-id.
  • Tag Class: Đại diện cho một thẻ có sẵn với một class duy nhất trong DOM. Ví dụ: $('.real-class') chọn tất cả các thành phần trong tài liệu có class là real-class.
  • Function trong jQuery: Một hàm được đặt tên hoàn toàn có thể được định nghĩa bằng cách sử dụng từ khóa function. Ví dụ: function named(){ // do some stuff here }. Một hàm ẩn danh có thể được gán tới một biến hoặc được truyền tới một phương thức. Ví dụ: var handler = function (){ // do some stuff here }.
  • Callback trong jQuery: Một callback là một hàm thuần JavaScript được truyền một số tham số thông qua các phương thức. Một số callback là những sự kiện, được gọi để cung ứng cho người sử dụng thời cơ để phản ứng lại khi một trạng thái nào đó được kích hoạt. JavaScript sử dụng các callback này ở khắp mọi nơi. Ví dụ: $("body").click(function(event) { console.log("clicked: " + event.target); });.
  • Các Closure trong jQuery: Các Closure được tạo bất kỳ khi nào một biến được định nghĩa bên ngoài khoanh vùng phạm vi hiện tại được truy vấn từ bên trong khoanh vùng phạm vi nội bộ.
  • Proxy Pattern trong jQuery: Một Proxy có thể được sử dụng để điều khiển sự truy cập tới phần tử khác. Proxy thi hành cùng giao diện cho đối tượng này và truyền trên bất kỳ phương thức nào tới nó. Đối tượng này thường được gọi là Real Subject.
  • Phạm vi (Scope) trong jQuery: Phạm vi của một biến là khu vực trong chương trình của bạn mà biến đó được định nghĩa. Biến trong JavaScript sẽ chỉ có hai phạm vi: biến Global và biến Local.
  • Các tham số trong jQuery: Các tham số trong JavaScript là một loại của Array mà có thuộc tính length.
  • Context trong jQuery: Từ khóa nổi tiếng trong JavaScript là this tham chiếu tới Context hiện tại.
Xem thêm  Câu hỏi thường gặp về thẻ quà tặng