TOP 14 thủ thuật jQuery quan trọng bạn cần phải biết

1. Kiểm tra jQuery đã tồn tại 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');
}

2. Back to top - nhảy lên đầu

Sử dụng phương thức animate và scrollTop của jQuery bạn không cần phải thêm bất cứ plugin nào để tạo ra được hiệu ứng scroll-to-top

$('a.top').click(function (e) {
  e.preventDefault();
  $(document.body).animate({scrollTop: 0}, 800);
});

Back to top

3. 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.

on('click tap hover')

Bạn có thể đặt tên cụ thể cho sự kiện:

on('click.openMenu')

4. Preload images - tải trước hình ảnh

Nếu website của bạn sử dụng nhiều ảnh nhưng chúng chưa được load xong, vậy thì bạn có thể sử dụng câu lệnh ở dưới đây để load tạm thời 1 ảnh thay thế

$.preloadImages = function () {
  for (var i = 0; i     $('').attr('src', arguments[i]);
  }
};

$.preloadImages('img/hover-on.png', 'img/hover-off.png');

5.  Kiểm tra ảnh load xong chưa

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

Bạn có thể kiểm tra 1 ảnh cụ thể được load xong chưa bằng cách sử dụng thêm ID của ảnh

6. 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();
});

7. Toggle class on hover trong jQuery

Nếu bạn muốn thay đổi class của một phần tử khi rê chuột qua thì có thể áp dụng đoạn lệnh như dưới đây

$('.button).hover(function () {
  $(this).addClass('hover');
}, function () {
  $(this).removeClass('hover');
});

Hoặc có thể đơn giản hơn như sau

$('.button').hover(function () {
  $(this).toggleClass('hover');
});

Tuy nhiên bạn có thể áp dụng hoàn toàn css để đạt được tốc độ cao hơn.

8. Vô hiệu hóa các trường nhập dữ liệu

Lấy một ví dụ là người dùng ấn vào checkbox đồng ý với các điều khoản sử dụng thì mới enable nút submit, còn không thì sẽ disable

//cho phép người dùng
$('input[type="submit"]').prop('disabled', true);
//vô hiệu hóa
$('input[type="submit"]').prop('disabled', false);

9. Chặn lại 1 hành động mặc định

Đầu tiên mình cần phải giải thích hành động mặc định là gì, đó là khi bấm vào thẻ thì nó nhảy tới 1 link, bấm vào button thì nó gọi sự kiện onclick.Và đôi khi vì một lý do nào đó chúng ta cần chặn các hành động mặc định đó lại thì có thể sử dụng câu lệnh sau

$('a.no-link').click(function (e) {
  e.preventDefault();
});

10. Ẩn hiện một thẻ element

Chúng ta có thể áp dụng 2 hiệu ứng Fade hoặc Slide để ẩn hiện một phần tử.

// Fade
$('.btn').click(function () {
  $('.element').fadeToggle('slow');
});
 
// Toggle
$('.btn').click(function () {
  $('.element').slideToggle('slow');
});

11. 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 xử lý tối ưu hơn.

12. 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);
});

13. Tìm kiếm phần tử dựa vào text

Bằng cách sử dụng phương thức contains() của jquery bạn có thể tìm được thẻ div chứa nội dung có từ khóa

var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();

14. Simple Accordion -  Danh sách thu gọn

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;
});