Những gợi ý sử dụng jQuery bạn nên biết

Rate this post

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 Code Tốt đ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é.

 

 

Viết một bình luận


Chuyên gia về Web
Bạn muốn làm việc với dịch vụ website do chúng tôi triển khai?
Gọi tư vấn 0982.90.4343
Chuyên gia về Web
Bài viết liên quan

02/01/2024

Fix lỗi npm không thể cài các package devDependencies
Khi cài đặt dự án,  có lúc bạn sẽ cài mãi cũng không đủ các package npm, đặc biệt là...
Gọi file PHP trong WordPress

19/09/2023

Cài đặt và sử dụng WP-CLI trên môi trường Linux
Trên một số môi trường Hosting có thể cung cấp SSH hoặc Terminal access, song không có sẵn WP-CLI để...
Import database MySQL lớn trên môi trường Docker

06/08/2023

Import database MySQL lớn trên môi trường Docker
Mình sử dụng EasyPanel để quản lý các Docker và build môi trường app. Nay gặp tình huống phải import...

28/01/2023

Hướng dẫn cài đặt php extension mongodb trên Mac OS M1
Khi bạn muốn hỗ trợ MongoDB trên dòng Mac M1, phần cài đặt sẽ cần một chút lưu ý. Hướng...