jQuery là gì? Tổng quan những thông tin về jQuery

Đặng Tùng Lâm

1674

14-11-2018

Frontend thường sử dụng nhiều hiệu ứng và giao tiếp với server thông qua Javascript. Tuy nhiên, để thực hiện được thì cần code javascript dài. Có thể nói, giải pháp JQuery  giúp khắc phục hiệu quả tình trạng này. Để bạn đọc có thể hiểu JQuery là gì, Bizfly Cloud sẽ trình bày một cách tổng quan nhất về thuật ngữ này trong bài viết dưới đây.

jQuery là gì? 

jQuery là một thư viện JavaScript đa nền tảng và giàu tính năng, được thiết kế nhằm đơn giản hóa client-side scripting của HTML. jQuery giúp chạy HTML document traversal và manipulation, animation, event handling và AJAX chỉ bằng một API rất dễ sử dụng, có thể hoạt động trên nhiều trình duyệt khác nhau. Từ đó giúp cho việc sử dụng JavaScript trên trang web trở nên dễ dàng hơn, website sẽ có tính tương tác và hấp dẫn hơn. Ngoài ra, jQuery cũng được sử dụng để bổ sung vào các animation.

Không chỉ vậy, jQuery còn là cross-platform hỗ trợ nhiều trình duyệt khác nhau, có đặc điểm "write less do more" (chỉ phải viết ít nhưng làm được nhiều). Sở dĩ có đặc điểm này là vì phải mất nhiều tasks phổ biến với nhiều lines của JavaScript code để hoàn thiện và liên kết thành các phương thức mà có thể dùng một dòng mã để gọi bất cứ khi nào cần. Đồng thời, jQuery cũng rất hữu ích trong việc đơn giản hóa những yếu tố phức tạp từ JavaScript như JavaScript, like AJAX calls và DOM manipulation.

Dưới đây là các module phổ biến của jQuery:

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

Tính năng jQuery

• jQuery là một thư viện nhỏ gọn, có kích cỡ khoảng 19KB (gzipped)
• Có khả năng sửa lỗi tự động, có thể chạy trên nhiều trình duyệt khác nhau (Google Chrome, Firefox, Microsoft Edge,...)
• Với thư viện jQuery, code được viết bởi Ajax có thể tương tác với server dễ dàng, cập nhật nội dung tự động mà không cần phải tải lại trang
• Cho phép lựa chọn các phần tử DOM để traverse (duyệt), chỉnh sửa nội dung bằng Selector mã nguồn mở hay còn gọi là Sizzle
• Việc tạo hiệu ứng sẽ trở nên đơn giản hơn do jQuery sẽ thực hiện phủ các dòng code, người dùng chỉ cần thêm nội dung hoặc biến vào
• Hỗ trợ phương thức sự kiện HTML mà không làm lộn xộn HTML code với các Event Handler

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

Ưu điểm

Đơn giản, dễ sử dụng: Với cú pháp đơn giản, người dùng chỉ phải viết ít dòng lệnh để tạo ra các chức năng tương tự, giúp tiết kiệm thời gian hơn cho lập trình viên

Là một thư viện lớn của javaScript: Có khả năng thực thi nhiều chức năng hơn so với các thư viện javaScript khác

Cộng đồng mã nguồn mở mạnh mẽ (một số plugin jquery có sẵn): JQuery có một cộng đồng người dùng lớn giúp phát triển các plugin. Nhờ đó mà hàng trăm plugin được viết sẵn để có thể tải về ngay lập tức, giúp đẩy nhanh quá trình viết code của lập trình viên. Đồng thời, các script này đều được đảm bảo an toàn và hiệu quả cao.

Có sẵn nhiều tài liệu và hướng dẫn cụ thể: Các trang web JQuery đều có sẵn các bộ tài liệu và hướng dẫn chi tiết, kể cả người mới làm lập trình cũng có thể tham khảo và áp dụng trong thực tế.

Hỗ trợ Ajax: JQuery giúp người dùng dễ dàng phát triển các template Ajax. Không chỉ vậy, Ajax còn giúp giao diện trên website trở nên thu hút hơn, có thể thực hiện các chức năng ngay trên trang mà không phải tải lại toàn bộ trang.

Nhược điểm

Làm chậm Client: Client không chỉ phải 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 jQuery nhiều sẽ làm chậm Client, đặc biệt là những Client yếu. Do đó, lập trình viên sẽ cần phải dùng thêm cache.

Có thể không có một số chức năng: jQuery vốn sở hữu rất nhiều chức năng, tùy thuộc vào yêu cầu trên trang web. Tuy nhiên, do nhiều chức năng vẫn chưa được phát triển nên người dùng sẽ vẫn cần đến javascript thuần để xây dựng chức năng này.

Tại sao jQuery cần thiết?

Vì sao chúng ta cần sử dụng jQuery? Có gì khác biệt khi sử dụng jQuery thay vì AJAX/JavaScript? Câu trả lời đó là chính là:

• jQuery rất nhanh và có thể mở rộng.
• jQuery tạo điều kiện cho người dùng viết UI liên quan đến function codes trong số lines ít nhất có thể.
• jQuery cải thiện hiệu suất của một ứng dụng.
• Các ứng dụng web tương thích với trình duyệt có thể được phát triển.
• jQuery sử dụng hầu hết các tính năng mới của các trình duyệt mới.

Trong số rất nhiều JavaScript frameworks, jQuery phổ biến nhất và mở rộng nhất. Nhiều công ty lớn sử dụng jQuery có thể kể tới là: Microsoft, Google, IBM, Netflix…

Lịch sử jQuery

jQuery lần đầu tiên được phát hành vào tháng 1 năm 2006 bởi John Resig tại BarCamp NYC. jQuery hiện đang được phụ trách bởi Timmy Wilson và được duy trì bởi một nhóm các nhà phát triển.

Ngày nay, jQuery là công nghệ được sử dụng rộng rãi. Hầu hết các trang web đều đang sử dụng jQuery.

Sau đây là list phát hành của các phiên bản jQuery.

jQuery lần đầu tiên được phát hành vào tháng 1 năm 2006 bởi John Resig

Ví dụ jQuery

jQuery được phát triển bởi Google. Để tạo ví dụ jQuery đầu tiên, bạn cần sử dụng tệp JavaScript cho jQuery. Bạn có thể tải xuống tệp jQuery từ jquery.com hoặc sử dụng URL tuyệt đối của tệp jQuery.

Trong ví dụ jQuery này, chúng tôi đang sử dụng URL tuyệt đối của tệp jQuery. Ví dụ jQuery được viết bên trong thẻ script.

Hãy xem một ví dụ đơn giản về jQuery như sau.

File: firstjquery.html

jQuery Selectors

jQuery Selectors được sử dụng để chọn và thao tác các phần tử HTML. Chúng là một 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.

Hiểu một cách đơn giản, selectors được sử dụng để chọn một hoặc nhiều phần tử HTML bằng cách sử dụng jQuery và khi phần tử được chọn thì bạn có thể thực hiện nhiều thao tác khác nhau trên đó.

Tất cả jQuery Selectors bắt đầu bằng dấu hiệu và dấu ngoặc đơn, ví dụ: $ (). Nó được gọi là factory function.

$() factory function

Mỗi jQuery selector bắt đầu bằng ký tự $ (). Kí tự này được gọi là factory function. Nó sử dụng ba building blocks cơ bản trong khi chọn một phần tử trong một tài liệu đã cho.

Tag Name

Nó đại diện cho một tên thẻ có sẵn trong DOM.

Ví dụ: $ ('p') chọn tất cả các đoạn văn 'p' trong tài liệu.

Tag ID

Nó đại diện cho một thẻ có sẵn với một ID cụ thể trong DOM.

Ví dụ: $ ('# real-id') chọn một phần tử cụ thể trong tài liệu có ID của real-id.

Tag Class

Nó đại diện cho một tag có sẵn với một class cụ thể trong DOM.

Ví dụ: $ ('real-class') chọn tất cả các phần tử trong tài liệu có class của real-class.

Hãy lấy một ví dụ đơn giản về việc sử dụng Tag selector. Điều này sẽ chọn tất cả các phần tử có tag name và background color được đặt thành "pink".

Tệp: firstjquery.html

Output:

Cách sử dụng jQuery?

Có hai cách để sử dụng jQuery

• Cài đặt nội bộ − Bạn có thể tải jQuery Library trên thiết bị nội bộ của bạn và include nó trong HTML code.
• Sử dụng từ CDN (CDN Based Version) − 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).

Cài đặt jQuery nội bộ

Truy cập trang https://jquery.com/download/ để tải phiên bản jQuery mới nhất.

Bây giờ đặt file jquery-2.1.3.min.js vào trong một thư mục trong Website của bạn, ví dụ /jquery.

Ví dụ:

Bây giờ bạn có thể include thư viện jquery vào trong HTML file của bạn như sau:

Nó sẽ cho kết quả:

Hello, World!

Sử dụng CDN

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). Google và Microsoft cung cấp phiên bản mới nhất.

Trong loạt bài này, chúng tôi sử dụng Google CDN.

Ví dụ:

Bây giờ chúng ta viết lại ví dụ trên bởi sử dụng thư viện jQuery từ Google CDN.

Theo Bizfly Cloud chia sẻ

>>> Xem thêm: 16 mẹo jQuery hữu ích bạn nhất định phải biết