Bên cạnh việc hỗ trợ đơn giản hóa các thao tác làm việc với văn bản HTML và các thuộc tính CSS, jQuery còn cung cấp một số các hàm hỗ trợ tạo hiệu ứng cho các thành phần tương tác với người dùng. Trong bài viết này, chúng ta sẽ thử sử dụng các hiệu ứng này thay cho hiệu ứng transition: max-height 0.5s; mà chúng ta đang sử dụng cho code dropdown trước đó. Đồng thời, chúng ta cũng sẽ nói về các hàm hỗ trợ đơn giản hóa thao tác gửi yêu cầu tới máy chủ web để truy vấn thêm dữ liệu.
Các hàm tạo hiệu ứng chuyển tiếp
Để đơn giản hóa thao tác ẩn/hiện một phần tử HTML, jQuery cung cấp cho chúng ta 4 lựa chọn cơ bản là:
- Ẩn/hiện không sử dụng hiệu ứng được hỗ trợ bởi các hàm
hide(),show(), vàtoggle(). - Ẩn/hiện với hiệu ứng trượt lên/xuống (giống như
dropdownmà chúng ta đang có) được hỗ trợ bởi các hàmslideUp(),slideDown(), vàslideToggle(). - Ẩn/hiện với hiệu ứng mờ dần/hiện dần được hỗ trợ bởi các hàm
fadeIn(),fadeOut(), vàfadeToggle(). - Ẩn/hiện với các hiệu ứng tùy chỉnh được hỗ trợ bởi hàm
animate()và các hàm hỗ trợanimateđược liệt kê trong chỉ mụcEffects.
Chúng ta sẽ làm ví dụ với các hàm tạo hiệu ứng đơn giản là fade, áp dụng cho dropdown mà chúng ta đã có. Để chuẩn bị thì trong code CSS của dropdown chúng ta sẽ bỏ đi phần thuộc tính transition và các class .hidden, .shown. Mặc định, chúng ta sẽ để các .dropdown-list ẩn đi với display: none;.
dropdown.html
<!doctype html>
<html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>A Normal Dropdown</title> <link rel="stylesheet" href="dropdown.css">
</head> <body> <div class="dropdown"> <button class="dropdown-btn primary"> Toggle List </button> <div class="dropdown-list"> <a class="dropdown-item" href="#">The rose is red</a> <a class="dropdown-item" href="#">The sky is sunny</a> <a class="dropdown-item" href="#">The river is blue</a> <a class="dropdown-item" href="#">The grass is green</a> </div> </div><!-- .dropdown --> <!-- copy/paste 1000 dropdown nữa --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"> </script> <script src="dropdown.js"></script>
</body> </html>
dropdown.css
.dropdown { font-family: Arial, sans-serif; font-size: 16px; display: inline-block; position: relative;
} .dropdown-btn { font-size: 14px; font-weight: bold; letter-spacing: 1px; padding: 15px 30px; color: White; border: none; cursor: pointer;
} .dropdown-btn.primary { background: RoyalBlue;
} .dropdown-btn.primary:hover { background: DodgerBlue;
} .dropdown-list { position: absolute; top: calc(100% + 3px); display: none;
} .dropdown-item { display: block; min-width: 245px; max-width: 335px; padding: 15px 25px; color: White; background: RoyalBlue; border-bottom: 1px solid DodgerBlue; text-decoration: none;
} .dropdown-item:hover { background: DodgerBlue;
}
Code xử lý JavaScript của chúng ta sẽ được bắt đầu lại từ đầu với tệp dropdown.js mới để làm quen với hàm fadeIn(). Cách sử dụng đơn giản nhất của các hàm tạo hiệu ứng là chúng ta có thể truyền vào hàm thời gian kéo dài của hiệu ứng tính theo mili-giây milisecond như sau:
dropdown.js
$('.dropdown-list').fadeIn(0.45 * 1000);
Nếu như danh sách của dropdown hiện ra sau khi chúng ta làm mới trình duyệt web thì có nghĩa là code đã hoạt động tốt. Vậy có lẽ hàm fadeToggle() cũng sẽ hoạt động tốt như jQuery đã hứa hẹn trong tài liệu. 
Bây giờ chúng ta sẽ thử viết luôn hàm xử lý sự kiện click chuột vào nút nhấn .dropdown-btn và sử dụng hàm fadeToggle(). Cấu trúc tổng quan của logic hoạt động thì chúng ta vẫn sẽ có các hàm như cũ với hàm xử lý sự kiện chính toggleList() được chia thành 2 tác vụ là: Thay đổi trạng thái hiển thị của danh sách hiện tại toggleTheList(), và nếu có danh sách nào đó khác đang hiện thì ẩn đi hideOtherLists().
dropdown.js
const toggleTheList = function(event) {};
const hideOtherLists = function(event) {}; const toggleList = function(event) { toggleTheList(event); hideOtherLists(event);
}; $('.dropdown-btn').click(toggleList);
Bây giờ chúng ta thêm vào code xử lý trong thân hàm toggleTheList() và hideOtherLists() với sự hỗ trợ của .fadeToggle() và .fadeOut().
dropdown.js
const toggleTheList = function(event) { $theList = $(event.target).next(); $theList.fadeToggle(0.45 * 1000);
}; const hideOtherLists = function(event) { $theList = $(event.target).next(); $otherLists = $('.dropdown-list').not($theList); $otherLists.fadeOut(0.45 * 1000);
}; const toggleList = function(event) { toggleTheList(event); hideOtherLists(event);
}; $('.dropdown-btn').click(toggleList);
Bên cạnh đó thì các hàm tạo hiệu ứng của jQuery còn có thể nhận thêm nhiều giá trị khác để tùy chỉnh linh động hơn. Ví dụ như .fadeOut(0.45 * 1000, callback), trong đó callback là một hàm xử lý thao tác nào đó mà bạn muốn thực hiện ngay khi hiệu ứng ẩn .dropdown-list kết thúc.
Các hàm hỗ trợ gửi yêu cầu tới máy chủ web
Các hàm hỗ trợ đơn giản hóa giao tiếp với máy chủ web được jQuery lập tài liệu trong chỉ mục AJAX - Asynchronous JavaScript and XML - được hiểu lơ mơ là các tác vụ được thực hiện xử lý không đồng bộ thời gian với dòng chảy chính của code JavaScript, và đối tượng làm việc là các dữ liệu được lưu trữ ở định dạng XML. Trong đó XML là một ngôn ngữ đánh dấu có cú pháp na ná với HTML nhưng được thiết kế và sử dụng với mục đích giống với JSON, đó là chung chuyển dữ liệu giữa các thiết bị qua mạng network.
Nghe dài dòng ghê gớm vậy thôi chứ thực ra chúng ta không cần phải học XML để sử dụng các hàm hỗ trợ này, chúng ta vẫn sẽ làm việc với JSON như ví dụ trong bài viết [JavaScript] Bài 8 - Window & Request mà chúng ta đã thực hiện trước đó.
weather.js
var hanoiPosition = { latitude: 21.04912, longtitude: 105.877876
};
var openWeatherApiKey = '0f9b17d098964aeb784a6d638bf89603';
var apiUrl = 'https://api.openweathermap.org/data/2.5/weather' + '?lat=' + hanoiPosition.latitude + '&lon=' + hanoiPosition.longtitude + '&appid=' + openWeatherApiKey; const printWeatherType = function(data) { const weatherInfo = data.weather[0]; const weatherType = weatherInfo.main; console.log(weatherType);
}; jQuery.get(apiUrl, printWeatherType);
Ở đây dữ liệu data mà chúng ta nhận được trong hàm printWeatherType() có thể là JSON, XML, hoặc HTML ở dạng chuỗi tùy vào xử lý của máy chủ web. Tuy nhiên hàm .get() của jQuery đã tự động chuyển đổi chuỗi JSON nhận được thành một object và chúng ta có thể thực hiện luôn thao tác truy xuất tới các biến bên trong.
Bài viết của chúng ta đến đây là kết thúc. Đây cũng là bài viết cuối cùng của chúng ta trong Sub-Series JQuery và cũng là điểm chuyển tiếp tới một Sub-Series mới có tên là jQuery UI. Trong khi jQuery chỉ là một thư viện library cung cấp các hàm tiện ích giúp chúng ta đơn giản hóa việc thể hiện các thao tác cần thực hiện trong code JavaScript, thì jQuery UI lại là một framework cung cấp các thành phần giao diện người dùng mang tính tiện ích bổ trợ widget cho các giao diện web và có thể được sử dụng xen lẫn với các thành phần giao diện người dùng của các framework khác như Bootstrap mà chúng ta đã biết.
Mình rất hy vọng rằng bạn sẽ tiếp tục tham gia cùng tự học lập trình web với mình trong Sub-Series mới - jQuery UI.
(Sắp đăng tải) [jQuery UI] Bài 1 - jQuery UI Là Cái Gì?