Những thủ thuật jQuery bạn nên biết

jQuery là một trong những thư viện UI có ảnh hưởng tới thiết kế và lập trình website nhiều nhất hiện nay. Hãy cùng điểm qua những điều thú vị có thể bạn chưa biết.

Kiểm tra jQuery đã có sẵn chưa

Một trong nhiều thao tác lỗi hay gặp: “jQuery is not defined” có thể được chủ động test kiểm tra

if (typeof jQuery == 'undefined') {
  console.log('jQuery hasn\'t loaded');
} else {
  console.log('jQuery has loaded');
}

Sử dụng on() thay vì click()

Sử dụng on() mang lại một số lợi thế mà bạn có thể không biết, chẳng hạn như có thể thêm nhiều sự kiện một lúc.
Ví dụ:

on('click tap hover')

Hay khả năng đặt tên cụ thể cho sự kiện:

on('click.openMenu')

Tạo nút “Trở lại lên trên cùng” dễ dàng bằng jQuery animation

Bạn không cần cài plugin hay thư viện gì phức tạp. Bản thân jQuery cũng cho phép bạn tự tạo ra nút trở lên cùng website bằng đoạn code ngắn sau:

// Back to top
$('body').on('click', '.js-scroll-top', function (e) {
  e.preventDefault();
  $('html, body').animate({scrollTop: 0}, 300);
});

À mà cũng đừng quên ngó qua bug do scrollTop gây ra nếu bạn không chú ý nhé.

Kiểm tra ảnh đã load trước khi thực thi

Đôi khi trong các project bạn gặp việc mình cần tải ảnh xong thì mới thực thi các hành động tiếp theo. Ta có thể check như sau:

$('img').on('load', function () {
 console.log('image load successful');
});

Nếu bạn muốn check ảnh cụ thể hơn thì có thể gọi $('img.is-loaded') chẳng hạn.

Kiểm tra ảnh bị lỗi và thay thế bằng ảnh mặc định

Bạn sẽ rất đau đầu nếu một website có hàng chục bài viết với ảnh chết. jQuery cho phép bạn thực thi thay thế hàng loạt ảnh lỗi bằng một ảnh mặc định mà bạn có thể tham khảo như sau:

$('img').on('error', function () {
  if(!$(this).hasClass('broken-image')) {
    $(this).prop('src', 'img/broken.png').addClass('broken-image');
  }
});

Nếu bạn chỉ muốn đơn giản hơn, tức là ẩn ảnh nếu lỗi:

$('img').on('error', function () {
  $(this).hide();
});

Gửi dữ liệu form bằng AJAX

Nếu bạn muốn gửi form lên bằng AJAX, thường ta sẽ làm như thế này:

$.post('/lib/sign-up.php', {
  user_name: $('input[name=user_name]').val(),
  email:     $('input[name=email]').val(),
  password:  $('input[name=password]').val(),
});

Tuy nhiên việc gọi nhiều input value như vậy không hay bằng cách sau:

$.post('/lib/sign-up.php', $('.form--signup').serialize());

Đừng check có hay không, hãy dùng toggle

Rất nhiều người khi mới bắt đầu học Javascript thường viết như này:

$('.js-toggle').on('click', function () {
  $(this).addClass('hover');
}, function () {
  $(this).removeClass('hover');
});

Thực ra, bạn có thể viết như thế này:

$('.js-toggle').on('click', function () {
  $(this).toggleClass('hover');
});

Cache các selector của jQuery

Mặc dù bạn có thể gọi $('.nav') nhiều lần, nhưng cách tốt nhất là nên xác định các biến selector của jQuery để sử dụng, chẳng hạn như:

var $nav = $('.nav');
$('.js-open-menu').on('click', function () {
  $nav.fadeOut();
});
$('.js-close-menu').on('click', function () {
  $nav.fadeIn();
});

Nó mang lại hiệu suất tối ưu hơn đấy nhé!

Kiểm tra khi AJAX bị lỗi

Thường khi AJAX trả về mã 404 hoặc 500, handler báo lỗi mới hoạt động. Nếu trả về các mã khác mà handler không được thiết lập thì có thể lỗi. Ta có thể đặt global cho vụ này như sau:

$(document).on('ajaxError', function (e, xhr, settings, error) {
  console.log(error);
});

Tạo phiên bản Accordion (list thu gọn) bằng jQuery

Với jQuery, bạn có thể tạo ra một phiên bản FAQ (list danh sách click vào thì hiện ra nội dung bên trong) như sau:

// Define selector
var $el = $('.accordion');
var $contentList = $('.accordion__content');
// Close all panels
$el.find('.content').hide();
// Accordion
$el.find('.accordion__header').on('click', function () {
  var $next = $(this).next();
  $next.slideToggle('fast');
  $contentList.not($next).slideUp('fast');
  return false;
});

Kết luận

Bạn có dùng jQuery và thử các ví dụ mà Code Tốt đã nêu ở trên chưa? Bạn có thể tham khảo thêm các mẹo sử dụng jQuery hay ho nữa ở đây nhé.