10 phút để đọc
HTML, CSS, và JavaScript là ba ngôn ngữ nền tảng của internet. Các trang web được cấu trúc bằng HTML, tạo kiểu dáng với CSS, và thêm các chức năng tương tác bằng JavaScript. Hầu hết các hiệu ứng động hoặc hành động diễn ra khi người dùng nhấp chuột, di chuột hay cuộn trang đều được xây dựng bằng JavaScript.
jQuery là gì?
jQuery là thư viện JavaScript nổi tiếng với khẩu hiệu ““Write Less, Do More” (Dịch: Viết ít hơn, làm được nhiều hơn). Nó không phải là một ngôn ngữ lập trình, mà là một công cụ giúp việc viết các tác vụ JavaScript phổ thường trở nên ngắn gọn và dễ dàng hơn.
Một ưu điểm khác của jQuery là khả năng tương thích đa trình duyệt (cross-browser compatible), nghĩa là bạn có thể yên tâm rằng kết quả mã của mình sẽ hiển thị như mong muốn trên bất kỳ trình duyệt hiện đại nào.
Hướng dẫn này giả định bạn chưa có kiến thức về jQuery. Bạn sẽ được hướng dẫn qua quy trình cài đặt jQuery vào một dự án web. Các khái niệm quan trọng trong phát triển web như API, DOM, và CDN sẽ được định nghĩa liên quan đến jQuery.
Khi đã nắm vững nền tảng kiến thức này và cài đặt xong jQuery, bạn sẽ học cách sử dụng các bộ chọn (selectors), sự kiện (events), và hiệu ứng (effects) phổ biến.
Yêu cầu tiên quyết
Trước khi bắt đầu hướng dẫn này, bạn cần có:
- Kiến thức cơ bản về HTML và CSS.
- Hiểu biết về các nguyên tắc cơ bản của lập trình. Mặc dù có thể bắt đầu viết jQuery mà không cần kiến thức JavaScript nâng cao, nhưng việc làm quen với các khái niệm về biến (variables) và kiểu dữ liệu (data types) sẽ giúp ích đáng kể.
Thiết lập jQuery
jQuery là một tập tin JavaScript mà bạn sẽ liên kết vào trong HTML của mình. Có hai cách để đưa jQuery vào dự án: tải một bản sao về máy (local copy) hoặc liên kết đến tập tin thông qua Mạng phân phối nội dung (Content Delivery Network – CDN).
Lưu ý: CDN là một hệ thống gồm nhiều máy chủ phân phối nội dung web đến người dùng dựa trên vị trí địa lý. Khi bạn liên kết đến một tập tin jQuery được lưu trữ qua CDN, nội dung đó có thể được tải đến người dùng nhanh hơn và hiệu quả hơn so với việc bạn tự lưu trữ trên máy chủ của mình.
Trong các ví dụ dưới đây, chúng ta sẽ sử dụng CDN để tham chiếu đến jQuery. Bạn có thể tìm phiên bản mới nhất của jQuery trong thư viện do Google lưu trữ (Google’s Hosted Libraries). Nếu bạn muốn tải về thay vì sử dụng CDN, có thể truy cập trang web chính thức của jQuery để lấy bản sao.
Bạn sẽ bắt đầu bài thực hành này bằng cách tạo một dự án web nhỏ. Dự án sẽ bao gồm tập tin style.css nằm trong thư mục css/, tập tin scripts.js trong thư mục js/, và tập tin chính index.html nằm ở thư mục gốc của dự án.
project/
├── css/
| └── style.css
├── js/
| └── scripts.js
└── index.html
Để bắt đầu, hãy tạo một khung HTML cơ bản và lưu nó với tên là index.html:
index.html
<!doctype html>
<html lang="en">
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>
Liên kết đến jQuery CDN ngay trước thẻ đóng </body>, sau đó là tập tin JavaScript tùy chỉnh của bạn, scripts.js:
<!doctype html>
<html lang="en">
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="<https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js>"></script>
<script src="js/scripts.js"></script>
</body>
</html
Tập tin JavaScript của bạn (scripts.js) phải được đưa vào sau thư viện jQuery trong tài liệu, nếu không thì nó sẽ không hoạt động.
Lưu ý: Nếu bạn đã tải một bản sao jQuery về máy, hãy lưu nó trong thư mục js/ và liên kết đến nó bằng đường dẫn js/jquery.min.js.
Tại thời điểm này, thư viện jQuery đã được tải vào trang web của bạn, và bạn hoàn toàn có thể sử dụng đầy đủ các tính năng mà jQuery cung cấp thông qua API của nó.
Lưu ý: API (Application Programming Interface) là một giao diện cho phép các chương trình phần mềm tương tác với nhau. Trong trường hợp này, API của jQuery chứa toàn bộ thông tin và tài liệu cần thiết để bạn có thể truy cập và sử dụng jQuery.
Sử dụng jQuery
Bằng cách so sánh một chương trình đơn giản “Hello, World!” viết bằng JavaScript và jQuery, bạn có thể thấy sự khác biệt trong cách mà hai ngôn ngữ này được viết.
document.getElementById("demo").innerHTML = "Hello, World!";
$("#demo").html("Hello, World!");
Ví dụ ngắn sau đây cho thấy cách jQuery có thể đạt được kết quả tương tự như JavaScript thuần túy, nhưng với cú pháp ngắn gọn hơn. Về cốt lõi, jQuery được dùng để tương tác với các phần tử HTML trong trình duyệt thông qua DOM (Document Object Model).
DOM là phương thức mà JavaScript (và jQuery) sử dụng để giao tiếp với HTML trong trình duyệt. Để hình dung rõ DOM là gì, hãy nhấp chuột phải vào trang web đang mở, chọn “Inspect”. Thao tác này sẽ mở Developer Tools. Mã HTML mà bạn thấy tại đây chính là DOM.
Mỗi phần tử HTML được xem là một nút (node) trong DOM – tức là một đối tượng mà JavaScript có thể thao tác. Các đối tượng này được sắp xếp theo cấu trúc cây, với thẻ <html> gần gốc nhất, và các phần tử lồng nhau là những nhánh tiếp theo của cây. JavaScript có thể thêm, xóa, hoặc thay đổi bất kỳ phần tử nào trong số đó.
Nếu bạn nhấp chuột phải một lần nữa và chọn “View Page Source”, bạn sẽ thấy mã HTML gốc của trang web. Ban đầu, nhiều người dễ nhầm lẫn giữa DOM và mã nguồn HTML, nhưng chúng thực ra là khác nhau – mã nguồn trang chính là nội dung được viết sẵn trong tập tin HTML, hoàn toàn tĩnh, không thay đổi và không bị ảnh hưởng bởi JavaScript. Trong khi đó, DOM là động, có thể được thay đổi theo thời gian thực thông qua JavaScript.
Lớp ngoài cùng của DOM, bao bọc toàn bộ nút <html>, chính là đối tượng document. Để bắt đầu thao tác với trang bằng jQuery, bạn cần đảm bảo rằng document đã sẵn sàng.
Hãy tạo tập tin scripts.js trong thư mục js/, và nhập đoạn mã sau:
$(document).ready(function() {
// all custom jQuery will go here
});
Tất cả mã jQuery bạn viết sẽ được bao bọc trong đoạn mã ở trên. jQuery sẽ tự động kiểm tra khi nào document đã sẵn sàng, và chỉ chạy các đoạn mã bên trong hàm đó khi DOM đã sẵn sàng để JavaScript hoạt động. Ngay cả khi trong một số trường hợp JavaScript không được tải cho đến khi các phần tử HTML được render, thì việc bao bọc mã của bạn trong khối này vẫn được xem là best practice. Ở phần mở đầu bài viết, bạn đã thấy một đoạn script đơn giản “Hello, World!”. Để khởi chạy đoạn script này và hiển thị văn bản lên trình duyệt bằng jQuery, trước tiên bạn sẽ tạo một phần tử <p> dạng block-level rỗng, với thuộc tính ID là demo như sau:
...
<body>
<p id="demo"></p>
...
jQuery được gọi và đại diện bằng dấu dollar ($). Bạn truy cập vào DOM bằng jQuery chủ yếu sử dụng cú pháp giống như CSS, và thực hiện hành động thông qua một phương thức (method). Một ví dụ cơ bản của jQuery sẽ theo định dạng sau:
$("selector").method();
Vì trong CSS, ID được biểu diễn bằng dấu thăng (#), nên bạn sẽ truy cập ID demo bằng cách sử dụng selector #demo. Phương thức .html() được dùng để thay đổi nội dung HTML bên trong một phần tử.
Bây giờ, bạn sẽ viết chương trình “Hello, World!” tùy chỉnh của mình bên trong hàm jQuery ready(). Hãy thêm dòng sau vào tập tin scripts.js, bên trong hàm đã có sẵn:
$(document).ready(function() {
$("#demo").html("Hello, World!");
});
Khi bạn đã lưu tập tin, bạn có thể mở tập tin index.html trong trình duyệt. Nếu mọi thứ hoạt động đúng, bạn sẽ thấy kết quả Hello, World!.
Nếu trước đây bạn thấy DOM khó hiểu, bây giờ bạn có thể thấy nó hoạt động. Nhấp chuột phải vào dòng chữ “Hello, World!” trên trang và chọn “Inspect Element”. DOM lúc này sẽ hiển thị <p id="demo">Hello, World!</p>. Nếu bạn chọn “View Page Source”, bạn sẽ chỉ thấy <p id="demo"></p>, là mã HTML gốc mà bạn đã viết.
Selectors trong jQuery
Selectors là cách bạn cho jQuery biết bạn muốn làm việc với những phần tử nào. Hầu hết các selector trong jQuery giống với những gì bạn đã quen dùng trong CSS, chỉ có thêm một vài bộ chọn riêng của jQuery. Bạn có thể xem danh sách đầy đủ các selector jQuery trong tài liệu chính thức của họ. Để sử dụng một selector, hãy dùng ký hiệu $ của jQuery, theo sau là dấu ngoặc đơn ():
$("selector")
Theo hướng dẫn về phong cách viết mã của jQuery, nên sử dụng chuỗi đặt trong dấu ngoặc kép (double-quoted strings), mặc dù chuỗi đặt trong dấu ngoặc đơn (single-quoted strings) cũng thường được dùng.
Dưới đây là tổng quan ngắn gọn về một số selector phổ biến nhất:
$("*")Wildcard: Chọn tất cả các phần tử trên trang.$(this)Current: Chọn phần tử hiện tại đang được thao tác trong một hàm.$("p")Tag: Chọn tất cả các thẻ<p>.$(".example")Class: Chọn tất cả các phần tử có class làexample.$("#example")Id: Chọn một phần tử duy nhất có id làexample.$("[type='text']")Attribute: Chọn mọi phần tử có thuộc tínhtypevới giá trị làtext.$("p:first-of-type")Pseudo Element: Chọn thẻ<p>đầu tiên.
Thông thường, bạn sẽ làm việc nhiều nhất với class và id – dùng class khi muốn chọn nhiều phần tử, và dùng id khi chỉ muốn chọn một phần tử duy nhất.
Sự kiện trong jQuery
Trong ví dụ “Hello, World!”, đoạn mã được chạy ngay khi trang tải xong và document đã sẵn sàng, nên không cần người dùng tương tác gì cả. Trong trường hợp này, bạn hoàn toàn có thể viết nội dung trực tiếp vào HTML mà không cần dùng đến jQuery. Tuy nhiên, bạn sẽ cần sử dụng jQuery nếu muốn làm cho văn bản hiển thị trên trang khi người dùng nhấn vào một nút.
Hãy quay lại tệp index.html của bạn và thêm một phần tử <button>. Bạn sẽ dùng nút này để lắng nghe sự kiện click:
...
<body>
<button id="trigger">Click me</button>
<p id="demo"></p>
Bạn sẽ sử dụng phương thức click() để gọi một hàm chứa đoạn mã “Hello, World!” của bạn:
$(document).ready(function() {
$("#trigger").click();
});
Phần tử <button> của bạn có một ID là trigger, và bạn chọn nó bằng $("#trigger"). Bằng cách thêm .click(), bạn đang yêu cầu nó lắng nghe sự kiện click, nhưng như vậy vẫn chưa xong. Bây giờ, bạn sẽ gọi một hàm chứa đoạn mã của bạn bên trong phương thức click() như sau:
function() {
$("#demo").html("Hello, World!");
}
Đây là mã cuối cùng:
$(document).ready(function() {
$("#trigger").click(function() {
$("#demo").html("Hello, World!");
});
});
Hãy lưu tệp scripts.js và làm mới trang index.html trên trình duyệt. Bây giờ, khi bạn nhấn vào nút, dòng chữ “Hello, World!” sẽ xuất hiện.
Sự kiện (event) là bất kỳ hành động nào của người dùng tương tác với trình duyệt. Thông thường, sự kiện xảy ra khi người dùng dùng chuột hoặc bàn phím. Ví dụ bạn vừa tạo sử dụng sự kiện click. Bạn có thể xem danh sách đầy đủ các phương thức xử lý sự kiện trong tài liệu chính thức của jQuery. Dưới đây là tổng quan ngắn gọn về một số phương thức sự kiện thường được sử dụng nhất.
click()Click: Thực thi khi người dùng nhấp chuột một lần.hover()Hover: Thực thi khi chuột di chuyển vào phần tử. Hai phương thức liên quan làmouseenter()vàmouseleave()chỉ chạy khi chuột lần lượt đi vào hoặc rời khỏi phần tử.submit()Submit: Thực thi khi người dùng gửi một biểu mẫu.scroll()Scroll: Thực thi khi người dùng cuộn trang.keydown()Keydown: Thực thi khi người dùng nhấn một phím trên bàn phím.
Để làm hình ảnh chuyển động hoặc xuất hiện mờ dần khi người dùng cuộn trang, hãy dùng phương thức scroll(). Để đóng menu bằng phím ESC, hãy dùng keydown(). Để tạo menu dạng accordion thả xuống, dùng click().
Việc hiểu rõ cách hoạt động của các sự kiện là điều thiết yếu để xây dựng nội dung website động với jQuery.
Hiệu ứng trong jQuery
Các hiệu ứng (effect) trong jQuery hoạt động song song với các sự kiện, cho phép bạn thêm hoạt ảnh và thao tác với các phần tử trên trang một cách linh hoạt.
Bạn sẽ tạo một ví dụ để mở và đóng một lớp phủ dạng popup (overlay). Mặc dù bạn có thể sử dụng hai ID – một để mở và một để đóng lớp phủ – nhưng thay vào đó, bạn sẽ dùng class để có thể mở và đóng lớp phủ bằng cùng một hàm.
Hãy xóa các thẻ <button> và <p> hiện tại trong phần <body> của tệp index.html, sau đó thêm đoạn mã HTML sau vào tài liệu của bạn:
...
<body>
<button class="trigger">Open</button>
<section class="overlay">
<button class="trigger">Close</button>
</section>
...
Trong tệp style.css của bạn, bạn sẽ sử dụng một chút CSS cơ bản để ẩn lớp phủ (overlay) bằng thuộc tính display: none và căn giữa nó trên màn hình.
.overlay {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 200px;
width: 200px;
background: gray;
}
Quay lại tệp scripts.js, bạn sẽ sử dụng phương thức toggle() để bật/tắt lớp phủ. Phương thức này sẽ chuyển đổi thuộc tính CSS display giữa none và block, giúp ẩn hoặc hiển thị overlay khi người dùng nhấp vào:
$(document).ready(function() {
$(".trigger").click(function() {
$(".overlay").toggle();
});
});
Làm mới trang index.html. Bây giờ bạn đã có thể bật/tắt (toggle) khả năng hiển thị của modal overlay bằng cách nhấp vào các nút. Bạn cũng có thể thay toggle() bằng fadeToggle() hoặc slideToggle() để trải nghiệm một số hiệu ứng dựng sẵn khác của jQuery.
Dưới đây là tổng quan ngắn gọn về một số phương thức hiệu ứng phổ biến:
toggle()Toggle: Chuyển đổi trạng thái hiển thị của một hoặc nhiều phần tử (ẩn nếu đang hiển thị, và ngược lại). Hai phương thức liên quan làshow()vàhide()dùng để hiển thị hoặc ẩn theo một chiều duy nhất.fadeToggle()Fade Toggle: Chuyển đổi trạng thái hiển thị với hiệu ứng làm mờ (opacity). Các phương thức một chiều liên quan làfadeIn()vàfadeOut().slideToggle()Slide Toggle: Bật/tắt phần tử với hiệu ứng trượt. Các phương thức một chiều liên quan làslideDown()(trượt xuống để hiện) vàslideUp()(trượt lên để ẩn).animate()Animate: Tạo hiệu ứng tùy chỉnh cho các thuộc tính CSS của phần tử (ví dụ: di chuyển, đổi màu, thay đổi kích thước, v.v.).
Bạn có thể sử dụng sự kiện jQuery để lắng nghe tương tác của người dùng, chẳng hạn như cú nhấp chuột vào một nút. Sau đó, bạn dùng hiệu ứng jQuery để tiếp tục thao tác với các phần tử khi hành động đó diễn ra.
Kết luận
Trong hướng dẫn này, bạn đã học cách chọn và thao tác với các phần tử bằng jQuery, cũng như cách các sự kiện và hiệu ứng kết hợp với nhau để tạo ra trải nghiệm web tương tác cho người dùng.
Từ đây, bạn đã có nền tảng vững chắc hơn về khả năng của jQuery, và có thể bắt đầu tự viết mã cho các dự án của mình.
