fbpx
Logo

jQuery là gì? Tính năng và cách sử dụng jQuery hiệu quả nhất

Theo dõi Miko Tech trên Google News

jQuery là một công cụ vô cùng phổ biến được sử dụng rất nhiều trong lĩnh vực lập trình, thiết kế website,… Vậy bạn có biết jQuery là gì? jQuery có những điểm nổi bật nào mà lại được tin dùng nhiều đến thế?

Bài viết sau đây sẽ giúp bạn hiểu được khái niệm jQuery, các module chính, một số tính năng quan trọng, ưu nhược điểm và những thuật ngữ cần biết về jQuery. Bên cạnh đó, bài viết cũng giúp bạn biết cách để cài đặt cũng như sử dụng cơ bản jQuery.

Giờ thì cùng Miko Tech tìm hiểu ngay bài viết jQuery là gì? Tính năng và cách sử dụng jQuery hiệu quả nhất nhé!

jQuery là gì?

jQuery là một thư viện được viết bởi ngôn ngữ lập trình JavaScript. Với mục đích đơn giản hoá công việc của các lập trình viên, jQuery giúp cho việc xây dựng và sử dụng các chức năng được diễn ra một cách nhanh, dễ dàng và đơn giản hơn.

Khái niệm jQuery
Khái niệm jQuery

Những module chính của jQuery

Hiện nay, jQuery đã được tích hợp nhiều module khác nhau, từ module hiệu ứng đến module truy vấn selector. Được sử dụng trên 99% số lượng website trên thế giới, jQuery có những module chính không thể không kể đến như:

  • Ajax: Module có khả năng xử lý Ajax
  • Atributes: Module hỗ trợ xử lý các thuộc tính của đối tượng HTML
  • Effect: Module giúp xử lý hiệu ứng
  • Event: Module có chức năng xử lý sự kiện
  • Form: Module hỗ trợ xử lý sự kiện liên quan tới form
  • DOM: Module có chức năng xử lý Data Object Model
  • Selector: Module có khả năng giúp xử lý luồng lách giữa các đối tượng HTML

Một số tính năng quan trọng của jQuery

Tính năng là một trong những vấn đề rất được quan tâm mỗi khi sử dụng jQuery. Với vai trò như một bộ công cụ JavaScript, jQuery giúp cho mọi công việc lập trình được đơn giản hoá cũng như viết ít code hơn.

jQuery có nhiều tính năng nổi bật
jQuery có nhiều tính năng nổi bật

Để đạt được mục đích này, jQuery sở hữu một số tính năng quan trọng như:

  • Xử lý thao tác DOM: Với tính năng này, jQuery giúp lựa chọn DOM để duyệt, chỉnh sửa nội dung bằng cách dùng các Selector mã nguồn mở (còn được gọi là Sizzle).
  • Xử lý sự kiện: jQuery hỗ trợ website tương tác với người dùng tốt hơn thông qua khả năng xử lý đa dạng sự kiện. Tính năng này không gây ảnh hưởng đến HTML code cũng như không để xuất hiện các Event Handler.
  • Hỗ trợ tạo AJAX: jQuery đem lại khả năng tương tác tốt với máy chủ qua các đoạn code viết bằng AJAX, đồng thời có thể cập nhật các nội dung một cách tự động mà không cần tải lại trang.
  • Hỗ trợ tạo hiệu ứng động: jQuery giúp tạo các hiệu ứng động bắt mắt một cách đơn giản, dễ dàng và nhanh chóng. Bạn có thể áp dụng trực tiếp vào website của mình.
  • Gọn nhẹ: Chỉ khoảng 19KB, jQuery được đánh giá có kích cỡ tương đối nhỏ và vô cùng gọn nhẹ.
  • Tương thích đa nền tảng: jQuery có khả năng tự động sửa lỗi và có độ tương thích với gần như tất cả các trình duyệt như: Chrome, MS Edge, Firefox, Android,…
  • Không ngừng cập nhật: jQuery luôn tiến hành cập nhật các phiên bản, công nghệ lập trình mới nhất như: CSS3 Selector, XPath,…

Ưu – nhược điểm của jQuery

Ưu - nhược điểm của jQuery
Ưu – nhược điểm của jQuery

Ưu điểm

Những ưu điểm nổi bật đồng thời là thế mạnh của jQuery:

  • Có tốc độ xử lý code rất nhanh chóng và có khả năng mở rộng.
  • Tạo điều kiện tối đa cho các lập trình viên có thể viết được hết mã chức năng với ít ký tự code nhất.
  • Nâng cao hiệu suất của lập trình web.
  • Hỗ trợ phát triển các ứng dụng có khả năng tương thích cao với trình duyệt.
  • Những tính năng mới cập nhật nhất của trình duyệt đều được jQuery sử dụng
  • jQuery sở hữu mộ cộng đồng và thư viện đa dạng, phong phú. Vậy nên, jQuery có khả năng giảm thiếu tối đa thời gian viết ứng dụng.
  • Lập trình viên có thể dễ dàng viết code với các chức năng có liên quan đến UI. Do đó, lượng code sẽ giảm được xuống mức thấp nhất.

Nhược điểm

Mặc dù sở hữu rất nhiều ưu điểm nổi bật nhưng jQuery vẫn còn một vài hạn chế như:

  • Chức năng có thể bị hạn chế: Mặc dù có cả một thư viện nhưng vẫn có nhiều chức năng bị hạn chế. Vậy nên, bạn cần phải sử dụng javascript thuần để xây dựng các chức năng.
  • Làm cho client trở nên chậm hơn: Client không những để 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 lạm dụng quá nhiều, jQuery sẽ làm cho client trở nên chậm chạp. Vì vậy, các lập trình viên cần phải dùng thêm cache.

Các thuật ngữ cần biết khi sử dụng jQuery

jQuery có khá nhiều thuật ngữ khác nhau. Trong đó, có một số thuật ngữ quan trọng mà bất kỳ ai khi sử dụng jQuery đều cần biết. Cụ thể:

  • jQuery Selectors: Dùng để chỉ những thao tác trên các phần tử HTML. Với jQuery Selection, bạn có thể tìm và chọn các phần từ HTML dựa trên các trường, types, ID, thuộc tính,… Tất cả jQuery Selectors đều được bắt đầu bằng ký tự $ () (factory function).
Selectors là một thuật ngữ rất quan trọng trong jQuery
Selectors là một thuật ngữ rất quan trọng trong jQuery
  • jQuery Tag Name: Thuật ngữ đại diện cho tên thẻ đã có sẵn trong DOM.
  • Tag ID: Đại diện cho thẻ có sẵn được gắn với ID cụ thể trong DOM.
  • Tag Class: Đại diện cho tag có sẵn tương ứng với class cụ thể trong DOM.
  • Function trong jQuery: Dùng để nói về từ khóa đặt tên cho các hàm trong jQuery.
  • Callback trong jQuery: Hàm thuần JavaScript có thể được truyền các phương thức như là tham số hoặc tùy chọn. Một số callback có thể là các sự kiện, được dùng ở khắp mọi nơi trong jQuery. Hầu hết các callback đều cung cấp tham số và context.
  • Closure trong jQuery: Các Closure được tạo ra mỗi khi các biến được định nghĩa ngoài phạm vi hiện tại và được truy cập từ bên trong nội bộ.
  • Proxy Pattern trong jQuery: Các Proxy có khả năng điều khiển sự truy cập đến các phần tử khác. Chúng thi hành cùng giao diện cho đối tượng khác (Real Subject), đồng thời truyền trên mọi phương thức sẵn có.
  • Phạm vi trong jQuery: Dùng để chỉ khu vực có trong chương trình mà biến đó được định nghĩa. Biến trong JavaScript sẽ có hai phạm vi: biến Global (được định nghĩa tại mọi nơi trong JavaScript code) và biến Local (chỉ có ở hàm được định nghĩa).
  • Tham số có trong jQuery: Một loại của kiểu Array và có thuộc tính length.
  • Context trong jQuery: Trong JavaScript, ‘this’ là một từ khóa tham chiếu với Context. Từ khóa này có khả năng thay đổi tùy theo cách hàm đó được gọi.

Cách cài đặt jQuery

Download jQuery

Giao diện tải jQuery
Giao diện tải jQuery

Để tải jQuery, bạn cần thực hiện theo những bước sau:

  • Truy cập vào địa chỉ http://jQuery.com/download
  • Lựa chọn phiên bản tải (phụ thuộc vào trình duyệt web và nơi dùng jQuery)
  • include thư viện jQuery vào trong HTML file như sau:
<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript"  src="../jQuery/jQuery-2.1.3.min.js"></script>
      <script type="text/javascript">
         $(document).ready(function(){
            document.write("Hello, World!");
         });
      </script>
   </head>
   <body>
      <h1>Hello</h1>
   </body>
</html>

Lưu ý, tại dòng:

<script type="text/javascript"  src="../jQuery/jQuery-2.1.3.min.js"></script>

src=”……” bạn sẽ thực hiện điều hướng tới nơi lưu trữ file trên máy tính hoặc trên web hosting của bạn.

Sử dụng CDN

Khi sử dụng CDN, thay vì tải thư viện jQuery về web hosting hay máy chủ, bạn sẽ tiến hành 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. Một số CDN phổ biến và đáng tin cậy nhất hiện nay là:

  • jQuery CDN
  • Google CDN
  • Microsoft CDN

Bên cạnh đó, bạn cò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ụ về sử dụng thư viện jQuery từ Google CDN:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jQuery/2.1.3/jQuery.min.js">
      </script>
       <script type="text/javascript">
         $(document).ready(function(){
            document.write("Hello, World!");
         });
      </script>
   </head>
   <body>
       <h1>Hello</h1>
    </body>
</html>

Trong đó:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jQuery/2.1.3/jQuery.min.js">

Đây là dòng chứa đường dẫn file CDN jQuery mà bạn cần thêm vào src:”…….”

Hướng dẫn sử dụng jQuery

Gọi một hàm thư viện jQuery

Gọi hàm jQuery
Gọi hàm jQuery

JavaScript đi kèm một tập hợp các hàm hữu ích có thể được sử dụng để thực hiện thao tác String, Number và Date. Một số hàm quan trọng, có sẵn trong jQuery:

  • charAt(): Trả về ký tự tại chỉ mục (index) đã xác nhận.
  • concat(): Dùng để kết nối hai chuỗi văn bản, đồng thời trả về một chuỗi mới.
  • forEach(): Dùng để gọi một hàm cho mỗi phần tử của một mảng.
  • indexOf(): Trả về chỉ mục đầu tiên trong việc gọi đối tượng String với giá trị đã cho hoặc -1 nếu không tìm thấy.
  • length(): Dùng để trả về độ dài của chuỗi.
  • pop(): Gỡ bỏ phần tử cuối của một mảng, đồng thời trả về phần tử đó.
  • push(): Thêm một hoặc nhiều phần tử tới phần cuối của một mảng và tiến hành trả về độ dài mới của mảng đó.
  • reverse(): Đảo ngược thứ tự các phần tử trong một mảng ( vị trí đầu tiên trở thành cuối cùng và vị trí cuối cùng thành đầu tiên).
  • sort(): Dùng để sắp xếp phân loại các phần tử của một mảng.
  • substr(): Thực hiện trả về các ký tự trong một mảng, bắt đầu từ vị trí đã xác định với các ký tự đã xác định.
  • toLowerCase(): Dùng để trả về giá trị chuỗi đang gọi được biến đổi thành kiểu chữ thường.
  • toString(): Trả về sự biểu diễn chuỗi của giá trị số đã xác định.
  • toUpperCase(): Trả về giá trị chuỗi đang gọi được biến đổi thành kiểu chữ hoa.

Để một sự kiện làm việc trên trang của bạn, bạn nên gọi nó bên trong hàm $(document).ready(). Mọi thứ bên trong sẽ được tải ngay sau khi DOM được tải và trước khi nội dung trang được tải.

Để làm điều này, bạn hãy đăng ký một sự kiện đã sẵn sàng cho tài liệu như sau:

$(document).ready(function() {
   // do stuff when DOM is ready
});

Để gọi bất kỳ hàm thư viện jQuery nào, sử dụng các thẻ HTML script như dưới đây:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jQuery/2.1.3/jQuery.min.js">
      </script>
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div").click(function() {alert("Hello, world!");});
         });
      </script>
   </head>
   <body>
      <div id="mydiv">
      </div>
   </body>
</html>

Custom Script trong jQuery

jQuery được đánh giá là chạy tốt hơn khi có riêng Custom Code trong một Custom JavaScript file: custom.js.

/* Filename: custom.js */$(document).ready(function() { $("div").click(function() { alert("Hello, world!"); });});

Tiếp theo, bạn đặt custom.js này vào trong HTML file cụ thể như sau:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jQuery/2.1.3/jQuery.min.js">
      </script>
      <script type="text/javascript" src="../custom.js"></script>
   </head>
    <body>
      <div id="mydiv">         Click on this to see a dialogue box.      </div>
   </body>   
</html>           

Sử dụng nhiều thư viện trong jQuery

Trong jQuery, bạn có thể sử dụng hai hay nhiều thư viện khác nhau mà không tạo nên tình trạng xung đột giữa chúng.

Vậy là Miko Tech đã giúp bạn hiểu được khái niệm jQuery, các module chính, một số tính năng quan trọng, ưu nhược điểm và những thuật ngữ cần biết về jQuery. Đồng thời, bài viết cũng cho bạn biết cách cài đặt và sử dụng jQuery một cách cơ bản.

Hy vọng qua bài viết jQuery là gì? Tính năng và cách sử dụng jQuery hiệu quả nhất, bạn sẽ hiểu rõ hơn về công cụ này, từ đó có thể sử dụng chúng một cách tối ưu và đạt hiệu quả cao trong công việc thiết kế website của mình.

Cảm ơn bạn vì đã theo dõi bài viết!

13.10.2022 Hồng Nhi

Comments are closed.

Bài viết liên quan
Bài viết nổi bật
Scroll