jQuery là gì? Làm quen với jQuery

jQuery có lẽ đã không còn là cái tên xa lạ mà bạn sẽ bắt gặp khi tìm hiểu về JavaScript, để trả lời cho những câu hỏi ban đầu jQuery là gì? Sử dụng ra sao? thì bạn hãy đến với bài viết này của Tothost nhé!

Mục lục

1. Thư viện jQuery là gì?

jQuery là một thư viện JavaScript nhỏ gọn, đa nền tảng với phong phú tính năng. Nó được thiết kế để đơn giản hóa việc viết script HTML phía client. Việc duyệt và thao tác tài liệu HTML, tạo hiệu ứng, xử lý sự kiện và AJAX trở nên rất đơn giản nhờ jQuery thông qua một API dễ sử dụng hoạt động trên nhiều loại trình duyệt khác nhau.
Với phương châm “Write less – Do more” (Viết ít hơn, làm nhiều hơn), mục đích chính của jQuery là cung cấp một cách dễ dàng để sử dụng JavaScript trên trang web để làm cho nó trở nên dễ tương tác và hấp dẫn hơn.

Lịch sử các phiên bản của jQuery

Phiên bản đầu tiên của jQuery được phát hành năm 2006 bởi John Resig tại Barcamp NYC. Sau đó được duy trì và phát triển bởi nhóm các nhà phát triển của Google với người đứng đầu là Timmy Wilson.
Lịch sử các phiên bản sau đó được phát hành theo các mốc thời gian sau:

26/08/2006: Phiên bản 1
14/01/2007: Phiên bản 1.1
10/09/2007: Phiên bản 1.2
14/01/2009: Phiên bản 1.3
14/01/2010: Phiên bản 1.4
31/01/2011: Phiên bản 1.5
03/05/2011: Phiên bản 1.6
03/11/2011: Phiên bản 1.7
09/08/2012: Phiên bản 1.8
15/01/2013: Phiên bản 1.9
24/05/2013: Phiên bản 1.10
24/01/2014: Phiên bản 1.11
18/04/2013: Phiên bản 2.0
24/01/2014: Phiên bản 2.1

1.1. Đặc điểm của jQuery

Nhỏ gọn: sau khi nén kích thước còn 19KB.
Tính tương thích cao: jQuery tương thích với mọi trình duyệt phổ biến như Chrome, Firefox, MS Edge, IE thậm chí cả Android và iOS, tự động điều chỉnh và mượt mà trên mọi nền tảng.
Hỗ trợ Ajax: Code được viết bởi Ajax trở nên đơn giản hơn bởi có thể tương tác với server và cập nhật nội dung mà không cần làm mới trang web.
Xử lý DOM nhanh chóng và linh hoạt: Có thể dễ dàng lựa chọn các phần tử DOM để duyệt qua và chỉnh sửa nội dung của chúng bằng cách sử dụng open source Selector, còn được gọi là Sizzle.
Đơn giản hoá tạo hiệu ứng: Thay vì phải viết lại nhiều dòng code, người dùng chỉ cần thêm biến hoặc nội dung vào đoạn mã có sẵn để tạo ra các hiệu ứng animation.
Hỗ trợ phương thức sự kiện HTML: jQuery giúp xử lý một loạt các sự kiện mà không làm cho mã HTML trở nên phức tạp với các Event Handler.

1.2. Các tính năng của jQuery

jQuery có khả năng xử lý sự kiện, hiệu ứng, tương tác thông qua những dòng lệnh đơn giản. Sau đây là các module bao gồm:

Chỉnh sửa và lựa chọn phần tử Data Object Model
Chỉnh sửa CSS
Hiệu ứng và hoạt hình
Xử lý thuộc tính đối tượng HTML
Phân tích cú pháp JSON
Xử lý AJAX
Mở rộng thông qua Plugin

2. Làm quen với jQuery

2.1. Download jQuery

jQuery có hai phiên bản để download:

Phiên bản sản xuất (Product version): dành cho web live vì rút gọn (minify) và nén (compress).
Phiên bản phát triển (Development version): để thử nghiệm và phát triển (mã không nén và có thể đạt được).

Bạn có thể tải xuống cả hai phiên bản từ website chính thức của jQuery (https://jquery.com/). jQuery library là một file JavaScript duy nhất và reference (tham chiếu) bằng thẻ HTML <script> phải nằm trong phần <head>
Còn một cách khác đó là sử dụng trực tiếp từ CDN (Content Delivery Network) nếu không muốn tải thư viện jQuery về Web Hosting hoặc máy chủ. Liên kết đến thư viện jQuery của một số nhà cung cấp Google hay Microsoft hoặc cộng đồng jQuery:

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

2.2. Một số cú pháp cơ bản trong jQuery

Lựa chọn phần tử

Chọn phần tử theo tên thẻ: $("tagname")
Chọn phần tử theo class: $(".classname")
Chọn phần tử theo id: $("#idname")
Chọn phần tử con: $("parentElement childElement")

Thao tác trên phần tử

Ẩn/Hiện phần tử: $(selector).hide() / $(selector).show()
Thêm/xóa lớp CSS: $(selector).addClass("classname") / $(selector).removeClass("classname")
Thay đổi nội dung: $(selector).text("new text") / $(selector).html("<p>new content</p>")
Thêm sự kiện: $(selector).click(function()), $(selector).on("event", function())

Hiệu ứng và hoạt ảnh

Di chuyển phần tử: $(selector).animate({properties}, speed)
Hiệu ứng fade in/out: $(selector).fadeIn() / $(selector).fadeOut()
Thay đổi kích thước: $(selector).width(value) / $(selector).height(value)

Ajax trong jQuery

Gửi yêu cầu AJAX: $.ajax({options})
Lấy dữ liệu từ server: $.get(url, callback) / $.post(url, data, callback)

Xử lý sự kiện

Sự kiện click: $(selector).click(function())
Sự kiện hover: $(selector).hover(function())
Sự kiện gửi form: $(selector).submit(function())

Đây chỉ là một số cú pháp cơ bản trong jQuery. Việc hiểu và sử dụng linh hoạt các phương thức này sẽ giúp bạn tạo ra các tương tác web mạnh mẽ và linh hoạt hơn.

Lời kết

Trong hơn 15 năm qua, thư viện mã nguồn mở jQuery đã giúp các nhà phát triển xây dựng các ứng dụng web phong phú, linh hoạt chỉ với ít code nhất có thể. Hiện nay, jQuery đã được sử dụng trên nhiều trang web hơn bất kỳ thư viện JavaScript nào khác. Nếu bạn muốn xây dựng các trang web và ứng dụng sử dụng jQuery, hãy xem xét tới các giải pháp Web Hosting, VPS Hosting của Tothost nhé.

TAG: JavaScript