Lập Trình

jQuery là gì? Tổng quan và hướng dẫn sử dụng chi tiết

12149

Chúng ta đều biết rằng frontend sử dụng rất nhiều các hiệu ứng cũng như giao tiếp với server thông qua Javascript rất nhiều. Tuy nhiên để được như vậy thì cần code javascript rất dài.

Để hạn chế việc này nhưng vẫn đảm bảo các yêu cầu, các ngôn ngữ lập trình đặc biệt là javascript thường được xây dựng và phát triển theo hướng thư viện. Thư viện là tập hợp những phần chức năng thường xuyên được sử dụng, được gói gọn trong một hàm, hay đối tượng.

jQuery là gì?

jQuery là thư viện javascript nổi bật nhất, phổ biến nhất trong lập trình web. Ra đời vào năm 2006 bởi John Resig. Nó đã trở thành một thành phần không thể thiếu trong các website có sử dụng Javascript. Với slogan “Write less – Do more” (viết ít hơn – làm nhiều hơn) nó đã giúp lập trình viên tiết kiệm được rất nhiều thời gian và công sức trong việc thiết kế website.

jQuery có công dụng gì?

jQuery cung cấp các phương thức xử lý sự kiện, hiệu ứng, tương tác chỉ với những dòng lệnh đơn giản. Các module chính mà của jQuery sử bao gồm:

Ajax – xử lý Ajax
Atributes – xử lý 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ý form
DOM – xử lý Data Object Model
Selector – xử lý luồng lách các đối tượng HTML
Hiệu ứng và hoạt hình
Phân tích cú pháp JSON

Nên học gì khi dùng jQuery?

Tại sao nên dùng jQuery

jQuery rất nhanh và có thể mở rộng.
jQuery cải thiện hiệu suất của một ứng dụng.
Giúp các ứng dụng web tương thích với các trình duyệt khác nhau. Mỗi trình duyệt khác nhau có thể quy định cách viết mã lệnh Javascript để thực hiện cùng một công việc theo các cách khác nhau. Ví dụ một số trình duyệt không hỗ trợ sự kiện DOMContentLoaded trong phương thức addEventListener() mà lại hỗ trợ sự kiện load hoặc onreadystatechange hoặc onload. Do đó dẫn tới việc lập trình viên Javascript thường phải rất vất vả khi xử lý sự khác biệt này. Sử dụng thư viện jQuery cho phép bạn có thể viết mã lệnh Javascript chạy được trên hầu hết các loại trình duyệt khác nhau với cùng một code.
Cộng đồng và thư viện phong phú giúp giảm thiểu thời gian viết ứng dụng.
jQuery dễ dàng cho người dùng viết code, chức năng liên quan đến UI với lượng code tối thiểu nhất. Ví dụ: JavaScript thuần ta viết 1 đoạn mã sau

document.addEventListener('DOMContentLoaded', function () {
    var btnEl = document.getElementsByTagName("button")[0];
    var textEl = document.getElementById("text");
    btnEl.addEventListener("click", function() {
            textEl.innerHTML = "TopDev - Việc làm IT cho Top Developers";
    });
});

Viết bằng jQuery ta có:

$(function(){
    $("button").click(function(){
        $("#text").html("TopDev - Việc làm IT cho Top Developers");
    });
});

Cú pháp cơ bản

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 “TopDev” 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.

Có thể bạn quan tâm:

Bài viết được sự cho phép của BQT Kinh nghiệm lập trình

Hầu hết các website đều không thể thiếu Javascript vì đây là thành phần quan trọng giúp tạo hiệu ứng riêng cho từng trang. Tuy nhiên, sự kết hợp giữa Javascript và CSS với những đoạn code dài dòng, phức tạp đã gây không ít rắc rối cho người dùng. Và jQuery được ra đời như một phương thức mới giúp đơn giản hóa mọi thao tác trên website. Vậy jQuery là gì? Ứng dụng jQuery và các thư viện jQuery phổ biến nhất hiện nay ra sao? Hãy cùng tìm hiểu ngay sau đây nhé.

15 thư viện slider jquery miễn phí cho dự án website của bạn

Hướng dẫn và sử dụng jquery plugin typing để giả hiệu ứng gõ văn bản

Xem thêm nhiều việc làm JQuery hấp dẫn trên TopDev

jQuery là gì?

jQuery là một thuật ngữ được dùng rất nhiều trong thời đại công nghệ hiện nay. Kể từ khi phát triển 2.0, cụm từ này đã được dùng khá phổ biến. Vậy jQuery thật sự là gì? Nói một cách dễ hiểu, jQuery là một thư viện được xây dựng trên Javascript. Chúng được tạo ra mới mục đích hỗ trợ các lập trình viên giải quyết các khó khăn khi sử dụng Javascript. jQuery được tích hợp từ nhiều module chuyên biệt, bao gồm cả module hiệu ứng đến module truy vấn selector.

jQuery với phương châm ưu việt “ viết ít làm nhiều” đang rất phổ biến hiện nay

Đồng thời cũng có thể hiểu jQuery là một thư viện Javascript đa tính năng, nhanh chóng, tiện dụng. Thư viện này được tạo ra bởi John Resig vào năm 2006 với phương châm hoạt động vô cùng ưu việt: viết ít hơn – năng suất hơn. jQuery đơn giản hóa các thao tác duyệt tài liệu HTML, tăng cường tương tác Ajax để có thể nâng cao tối đa hiệu quả phát triển website. Hiện nay công cụ hỗ trợ này được sử dụng vô cùng rộng rãi. Theo thống kê, có đến 99% các website trên thế giới sử dụng thư viện này, trừ những trang dùng JS Framework.

jQuery – một số tính năng quan trọng

Thao tác DOM: jQuery cho phép người dùng đơn giản hóa việc lựa chọn các phần tử DOM để duyệt như khi dùng CSS. Cùng với đó, người dùng cũng có thể sử dụng phương tiện selector mã nguồn mở để chỉnh sửa nội dung của chúng.
Xử lý sự kiện: thư viện jQuery xử lý các sự kiện một cách nhanh chóng chính xác và hiệu quả mà không làm HTML code rối với các Event Handler. Nhờ đó nâng cao khả năng tương tác với người dùng một cách tối đa.
Hỗ trợ AJAX: bằng việc sử dụng công nghệ AJAX, jQuery cho phép lập trình viên phát triển website với đa dạng các tính năng và phản hồi tích cực hơn.
Tạo hiệu ứng động: jQuery cho phép cung cấp đa dạng các hiệu ứng động đẹp mắt, độc đáo cho website, giúp trang trở nên sinh động và chuyên nghiệp hơn
Kích thước cực kỳ gọn nhẹ: thư viện này vô cùng gọn nhẹ, vì vậy chạy rất mượt và nhanh. jQuery chỉ có 19KB
Được hỗ trợ cho hầu hết các trình duyệt hiện nay: ứng dụng này làm việc cực tốt trên IE 6.0+, FF 2.0+, Safari 3.0+, Chrome và Opera 9.0+ và hầu như được hỗ trợ ở tất cả các trình duyệt khác.
Cập nhật và hỗ trợ các ứng dụng mới nhất: hỗ trợ CSS3 Selector và cú pháp XPath cơ bản giúp lập trình viên có thể tiếp cận với những công nghệ tân tiến nhất của thời đại khoa học – máy tính 4.0

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ể thư viện jQuery từ máy chủ 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

Những lý do lập trình viên nên sử dụng thư viện jQuery

Không phải ngẫu nhiên mà jQuery lại được sử dụng trong hầu hết các website trên thế giới. Thư viện lập trình này cho phép người dùng nâng cao tối đa khả năng tương tác và hoạt động của trang nhờ sở hữu những tính năng ưu việt:

jQuery rất nhanh và có khả năng mở rộng
Đơn giản hóa việc viết code. Giúp người dùng có thể viết các mã chức năng liên quan đến giao diện một cách dễ dàng
Cho phép các ứng dụng web tương thích với trình duyệt cùng phát triển.
Sử dụng hầu hết các tính năng hiện đại của các trình duyệt mới
Hỗ trợ trên hầu hết các trình duyệt

Trên đây là những kiến thức lập trình liên quan đến jQuery. Hy vọng các chia sẻ này có thể cung cấp đến quý bạn đọc những thông tin bổ ích.

Bài viết gốc được đăng tải tại kinhnghiemlaptrinh.com

Có thể bạn quan tâm:

Xem thêm Việc làm IT hấp dẫn trên TopDev

jQuery là gì?

jQuery có công dụng gì?

Tại sao nên dùng jQuery

Cú pháp cơ bản

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

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

Lấy phần tử trong HTML

jQuery là gì?

jQuery – một số tính năng quan trọng

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

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

Những lý do lập trình viên nên sử dụng thư viện jQuery

RELATED ARTICLESMORE FROM AUTHOR

Phương thức Autocomplete của jQuery

Thực ra bạn không cần jQuery

Cách sử dụng các plugins jQuery trong VueJS

Vue.js vs jQuery: So sánh qua 1 số ví dụ

500 khóa học Online Programming & Computer Science miễn phí nên học ngay trong tháng 9

RELATED ARTICLES MORE FROM AUTHOR