Công ty thiết kế website chuẩn SEO Web Mới
Tìm kiếm
Công ty thiết kế website chuẩn SEO Web Mới

jQuery là gì? Tìm hiểu chi tiết về jQuery

jQuery là gì? Đó là thư viện được viết bằng JavaScript, sử dụng phổ biến trong lập trình website, xây dựng các chức năng bằng Javascript và sử dụng nhanh, dễ dàng và đơn giản hơn.

jQuery là gì? Tìm hiểu chi tiết về jQuery

jQuery là gì? Tìm hiểu chi tiết về jQuery

Mục Lục [Ẩn]


jQuery là gì?

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

Các module phổ biến 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 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 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.

Xem thêm bài viết Website là gì?

Lịch sử ra đời của jQuery

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

Lịch sử ra đời các phiên bản của  jQuery là:

Phiên bản 1.0 ra đời 26/8/2006

Phiên bản 1.1: 14/1/2007

Phiên bản 1.2: 10/9/2007

Phiên bản 1.3: 14/1/ 2009

Phiên bản 1.4: 14/1/2010

Phiên bản 1.5: 31/1/2011

Phiên bản 1.6: 3/5/ 2011

Phiên bản 1.7: 3/11/ 2011

Phiên bản 1.8: 9/8/ 2012

Phiên bản 1.9: 15/1/ 2013

Phiên bản 1.10: 24/5/ 2013

Phiên bản 1.11: 24/1/ 2014

Phiên bản 2.0: 18/4/ 2013

Phiên bản 2.1: 24/1/ 2014

Cú pháp cơ bản của jQuery

$(selector) là phương thức chọn các phần tử HTML dựa trên các điều kiện được chỉ định trong "selector". Selector có thể là tên thẻ HTML, lớp CSS, ID CSS hoặc các thuộc tính khác của phần tử.

.action() là phương thức thực hiện một hành động trên các phần tử HTML được chọn. Bạn có thể là thêm nội dung, thay đổi nội dung, thêm hoặc xóa các thuộc tính CSS,...

Cú pháp của jquery luôn bắt đầu bằng kí tự $ hoặc jQuery

Ví dụ 1

# Lấy đối tượng có id = button-id trong jquery
var object = $('#button-id');
hoặc
var object = jQuery('#button-id');
Ví dụ 2
$('#button-id').on('click', function(){
  var textbox = $('#textbox-id');
  alert(textbox.val());

  # $('#button-id').on('click', function(){}
  # => Hàm sự kiện click vào button có id = button-id
  # var textbox = $('#textbox-id');
  # => Lấy ra thẻ HTML có id = textbox-id
  # alert(textbox.val()); in ra giá trị của textbox.
};

Document Ready (sự kiện sẵn sàng)

Để đảm bảo các đoạn mã JQuery không chạy trước khi trang đã được tải xong, bạn cần sử dụng một sự kiện xác định sẵn tài liệu sẵn sàng. Cú pháp:

$(document).ready(function(){
   // Các đoạn JQuery
});

Tại sao cần sử dụng sự kiện này? ví dụ trong trường hợp đoạn mã JQuery của bạn có tác động đến một class có tên “WEBMOI” nhưng class này chưa được tải xong thì hành động của JQuery là thất bại. Bạn có thể đưa các đoạn mã về cuối trang để khắc phục nhưng với sự kiện sẵn sàng bạn có thể để nó ở đầu trang.

Sự kiện cho các phần tử trong jQuery

Sự kiện là một hành động đến từ người dùng hoặc trình duyệt. Cú pháp sử dụng sự kiện: $ (selector).sự_kiện(Mã_thực_thi) jQuery có những sự kiện sau:

Các sự kiện đến từ hành động của “chuột”

click: khi click vào đối tượng.

dblclick: khi double click vào đối tượng.

mouseenter: khi rê chuột vào đối tượng.

mouseleave: khi đưa chuột rời khỏi đối tượng.

Các sự kiện đến từ hành động của bàn phím

keypress: khi phím được nhấn vào đối tượng.

keydown: khi phím được nhấn xuống và giữ nguyên.

keyup: khi phím được thả ra.

Các sự kiện đến từ form

submit: khi nhấn gửi dữ liệu đi (loại button với type submit).

change: khi thay đổi giá trị trong thẻ input.

focus: khi người dùng nhấn vào thẻ input hoặc dùng nut tab chuyển đến thẻ input khác.

blur: khi rời khỏi thẻ input.

Các sự kiện đến từ trình duyệt

load: khi trang đang tải.

resize: khi trang thay đổi kích thước tổng thể.

scroll: khi trang đang cuộn lên xuống.

unload: khi trang đang được load lại.

Lấy phần tử trong HTML

Trước khi jQuery ra đời việc tương tác với phần tử HTML sử dụng Javascript là một công việc rất gian nan và đòi hỏi lập trình viên phải viết rất nhiều các đoạn code dài để chỉ thực hiện một công việc đơn giản. Sử dụng jQuery việc tương tác với phần tử HTML trở nên đơn giản hơn rất nhiều.

Trong Javascript thuần, muốn lấy một phần tử trong HTML bạn sẽ có cú pháp document.getElementBy{Id|Class|Tagname}("Tên_element")… Bạn có thể thấy nó quá dài và rất tốn thời gian. Trong jQuery để lấy ra một phần tử trong HTML bạn chỉ cần sử dụng $(selector). Ví dụ:

$(This) : Lấy phần tử hiện tại.

$("h1") : Lấy các phần tử thẻ H1.

$(".TopDev") : Lấy các phần tử có class “TopDev“.

$("# TopDev") : Lấy phần tử có ID là “TopDev“.

$("*") : Lấy tất cả phần tử.

$("p.intro") : Lấy các phần tử p có class là “intro“

$("p:first") : Lấy phần tử p đầu tiên trong tài liệu HTML.

$("p:last") : Lấy phần tử p cuối cùng trong tài liệu HTML.

$("ul li:first") : Lấy phần tử li đầu tiên trong phần tử ul

$("[href]") : Lấy các phần tử có thuộc tính href.

$("a[target='_blank']") :  Lấy các phần tử a có thuộc tính target='_blank'

$("a[target!='_blank']") :  lấy các phần tử a có thuộc tính target nhưng không phải là '_blank'

$(":button") : Lấy các phần tử button hoặc các phần tử input có loại là button.

$("tr:even") : Lấy các phần tử tr chẵn trong bảng.

$("tr:odd") :   Lấy các phần tử tr lẽ trong bảng.

Những cách sử dụng jQuery hiện nay

Có hai cách sử dụng jQuery phổ biến nhất hiện nay chính là cài đặt cục bộ và sử dụng từ CDN:

Cài đặt cục bộ

Bạn có thể tải thư viện jQuery từ máy chủ https://jquery.com/download/ và đưa vào hệ thống HTML. Lập trình theo cú pháp sau để có thể đưa jQuery vào HTML file:

<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("Xin chào bạn!"); 
  }); 
</script> 
</head> 
   <body> 
     <h1>Hello</h1> 
   </body> 
</html>

Sử dụng CDN

Người dùng có thể tự thêm jQuery vào trong HTML code trực tiếp từ Content Delivery Network (CDN) một cách vô cùng đơn giản. Google và Microsoft đều cung cấp những phiên bản mới nhất để mang đến những tính năng đột phá. Chỉ cần nhập lệnh sau khi sử dụng CDN Google:

<html> 
<head> 
    <title>The jQuery Example</title> 
    <script type="text/javascript"    src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> 
    </script> 
    <script type="text/javascript">        $(document).ready(function(){ document.write("Xin chào bạn!"); }); 
    </script> 
</head> 
<body> 
    <h1>Hello</h1> 
</body> 
</html>

Với hai cách sử dụng trên, kết quả trả ra đều sẽ là “Xin chào bạn”

Cách để gọi một hàm thư viện jQuery

Trước khi sử dụng các đoạn code của jQuery để chỉnh sửa hoặc đọc DOM, cần đảm bảo thêm vào các sự kiện khi DOM đã sẵn sàng. Điều kiện sử dụng này cũng tương tự như JavaScript. Và để một sự kiện hoạt động tốt trên website, lập trình viên cần gọi tên chúng trong Hàm $(document).ready(). Các dữ liệu bên trong sẽ được tải lên trước khi nội dung trang được tải và khi DOM sẵn sàng

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 điểm và Nhược điểm của jQuery

Ưu điểm của jQuery:

Chạy nhanh

jQuery xử lý code rất nhanh và có khả năng mở rộng.

Đơ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

Hiệu suất

jQuery cải thiện hiệu suất lập trình web.

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.

Tương thích

jQuery phát triển các ứng dụng có tương thích với trình duyệt.

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.

Tận dụng

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.

Nhược điểm của jQuery:

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.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết về jQuery

  • 0 Bình luận
CEO Bùi Tấn Lực
Bùi Tấn Lực
CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên, người viết content, chuyên tư vấn các vấn đề về website và SEO website, quý khách hãy liên hệ để trao đổi thiết kế website
  • Zalo
Chia sẻ nội dung đánh giá của bạn về jQuery là gì? Tìm hiểu chi tiết về jQuery
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
Đánh giá của bạn
Tên *
Email
Số điện thoại *
Bình luận, Hỏi đáp
Đăng ký tư vấn miễn phí
Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn
Tỉnh thành
0398.259.259