Menu

  • Trang chủ
  • Trending
  • Gợi ý bạn đọc

Chuyên mục

  • Tin tức
  • Hackintosh
  • Lập trình
  • Software
  • Thủ thuật
  • Chia sẻ
  • GenZA Can Cook
  • GenZA Beauty
  • Cảm nhận cuộc sống

Liên hệ hợp tác

admin@genzakit.com
Genzakit
Không có kết quả phù hợp
Xem tất cả kết quả
  • Đăng nhập
Genzakit
Không có kết quả phù hợp
Xem tất cả kết quả

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

394
CHIA SẺ
2.6k
LƯỢT XEM
Chia sẻ lên FacebookChia sẻ lên TwitterLưu lại trên Pinterest

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

Từ khoá: jquery
Next Post

Hướng dẫn chi tiết tạo bộ cài macOS bằng dòng lệnh

Theo dõi
Đăng nhập
Thông báo của
guest
guest
2 Comments
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
phùng
phùng
2 năm trước

Bài viết hay đó

0
Trả lời
Anthony Tran
Nhat Tran
Trả lời  phùng
2 năm trước

=))) lại xl rồi

0
Trả lời

Có thể bạn quan tâm

Font Awesome 5 Duotone Icons là gì? Có gì nổi bật

by Anthony Tran
7 Tháng Chín, 2019
0
8.3k

Xin chào các bạn, chắc dân làm web chúng ta chẳng còn xa lạ gì với keyword fontawesome nữa rồi....

OpenCore Computer: Máy tính cài sẵn Hackintosh Catalina mà không được sự cho phép của Apple

by Anthony Tran
14 Tháng Sáu, 2020
0
2.6k

Anh em chơi Hackintosh thời gian qua chẳng còn lạ gì OpenCore, một trong hai giải pháp bootloader...

Ảo tưởng sức mạnh ở người trẻ – Căn bệnh làm mất giá trị bản thân

by Anthony Tran
6 Tháng Tám, 2019
0
2.6k

Căn bệnh ảo tưởng sức mạnh ở người trẻ khi đi xin việc làm hiện nay thường xuyên...

Bún hến Huế ngon khó cưỡng

Bún hến Huế ngon khó cưỡng

by Huệ Minh
8 Tháng Mười Hai, 2021
0
2.6k

Bún hến không chỉ đơn thuần là 1 món ăn. Để tạo nên tô bún ngon – độc...

  • Giới thiệu
  • Liên hệ
  • Chính sách bảo mật

© 2023 Genzakit

Không có kết quả phù hợp
Xem tất cả kết quả
  • Trending
  • Gợi ý bạn đọc
  • Tin tức
  • Hackintosh
  • Lập trình
  • Software
  • Thủ thuật
  • Chia sẻ
  • GenZA Can Cook
  • GenZA Beauty
  • Vui mỗi ngày
  • Cảm nhận cuộc sống

© 2022 Genzakit - Ngôi nhà giới trẻ

Chào mừng trở lại!

Đăng nhập bằng Facebook
Sign In with Google
OR

Đăng nhập

Quên mật khẩu?

Retrieve your password

Please enter your username or email address to reset your password.

Đăng nhập
wpDiscuz