16 mẹo jQuery hữu ích bạn nhất định phải biết
Khi thiết kế một website hiện đại, có nhiều thư viện mà lập trình viên cần sử dụng, một trong số đó là jQuery. Bài viết này Bizfly Cloud sẽ cung cấp các mẹo jQuery hữu ích nhất, giúp quá trình xây dựng website trở nên dễ dàng và liền mạch hơn.
>> Xem thêm: jQuery là gì? Các ví dụ minh họa
Kiểm tra xem jQuery được tải hay chưa
Trước khi bạn có thể làm bất cứ điều gì với jQuery, bạn cần chắc chắn rằng nó đã được tải:
if (typeof jQuery == 'undefined') {
console.log('jQuery hasn\'t loaded');
} else {
console.log('jQuery has loaded');
}
Hệ thống sẽ báo về khi jQuery được load thành công
Kiểm tra xem một phần tử có tồn tại không
Trước khi sử dụng phần tử HTML, bạn cần đảm bảo đó là một phần của DOM.
if ($("#selector").length) {
// làm gì đó với phần tử
}
Sử dụng noConflict ()
Các ký tự $ được sử dụng bởi jQuery cũng được các thư viện JavaScript khác sử dụng. Để đảm bảo rằng jQuery không xung đột với đối tượng $ của các thư viện khác nhau, hãy sử dụng phương thức noConflict () ở đầu tài liệu:
jQuery.noConflict();
Bây giờ bạn sẽ tham chiếu đối tượng jQuery bằng tên biến jQuery thay vì $ (ví dụ: jQuery('div p').hide()). Nếu bạn có nhiều phiên bản jQuery trên cùng một trang (điều này không được khuyến nghị), bạn có thể sử dụng noConflict() để đặt alias thành một phiên bản cụ thể, ví dụ:
$x = jQuery.noConflict();
Sử dụng .on() Binding thay cho .click()
Sử dụng .on() mang lại cho bạn một số lợi thế so với sử dụng .click(), chẳng hạn như khả năng thêm nhiều sự kiện...
.on('click tap hover')
Một sự ràng buộc được áp dụng cho các phần tử động (ta cũng không cần phải liên kết thủ công mọi phần tử đơn lẻ được thêm động vào phần tử DOM) và khả năng thiết lập một không gian tên (namespace):
.on('click.menuOpening')
Namespaces cung cấp cho bạn khả năng hủy liên kết một sự kiện cụ thể (ví dụ: .off('click.menuOpening')).
Nút Quay lại Đầu trang (Back to Top button)
Bằng cách sử dụng animate và scrollTop trong jQuery, bạn không cần một plugin để tạo một hiệu ứng cuộn lên trên đơn giản:
// Back to top
$('. container').on('click', '.back-to-top', function (e) {
e.preventDefault();
$('html, body').animate({scrollTop: 0}, 800);
});
<! - Tạo thẻ neo ->
<div class="container">
<a href="#" class="back-to-top"> Về đầu trang </a>
</div>
Thay đổi giá trị scrollTop sẽ thay đổi vị trí dừng lại của scrollbar. Tất cả những gì bạn thực sự làm là tạo hiệu ứng cho phần thân của tài liệu trong suốt 800 mili-giây cho đến khi nó cuộn lên trên cùng của tài liệu.
Lưu ý: Tham khảo các lỗi thường gặp với scrollTop.
Tải trước hình ảnh
Nếu trang web của bạn sử dụng nhiều hình ảnh ban đầu không hiển thị (ví dụ: khi di chuột), bạn nên tải trước chúng:
$.preloadImages = function () {
for (var i = 0; i <argument.length; i ) {
$('<img>').attr('src', argument[i]);
}
};
$.preloadImages('img/hover-on.png', 'img / hover-off.png');
Kiểm tra xem hình ảnh được tải chưa
Đôi khi bạn có thể cần kiểm tra xem hình ảnh của mình đã được tải đầy đủ chưa để tiếp tục với tập lệnh của mình. Ví dụ
$('img').on('load', function () {
console.log('image load successful');
});
Bạn cũng có thể kiểm tra xem một hình ảnh cụ thể đã được tải chưa bằng cách thay thế thẻ <img> bằng ID hoặc class của nó.
Tự động sửa ảnh bị hỏng
Nếu bạn tình cờ tìm thấy các liên kết hình ảnh bị hỏng trên trang web của bạn, việc thay thế từng liên kết có thể rất tốn thời gian. Đoạn mã đơn giản này có thể tiết kiệm rất nhiều công sức sửa ảnh của bạn:
$('img').on('error', function () {
if (!$(this).hasClass('broken-image')) {
$(this).prop('src', 'img/broken.png').addClass ('broken-image');
}
});
Ngoài ra, nếu bạn muốn ẩn hình ảnh bị hỏng, đoạn code này sẽ xử lý việc đó:
$('img').on ('error', function () {
$(this).leather();
});
Đăng một Form với AJAX
Các phương thức AJAX của jQuery là một cách phổ biến để yêu cầu text, HTML, XML hoặc JSON. Nếu bạn muốn gửi biểu mẫu qua AJAX, bạn có thể thu thập dữ liệu nhập của người dùng thông qua phương thức val():
$ .post ('sign_up.php', {
user_name: $('input[name=user_name]').val(),
email : $('input[name=email]').val(),
mật khẩu : $('input[name=password]').val(),
});
Nhưng tất cả các cuộc gọi val() đều đắt tiền và sử dụng .val() trên các phần tử <textarea> sẽ loại bỏ các ký tự trả về từ các giá trị báo cáo của trình duyệt. Một cách tốt hơn để thu thập các form thông tin của người dùng là sử dụng hàm serialize() để thu thập chúng dưới dạng chuỗi:
$.post ('sign_up', $('#sign-up-form').serialize());
Toggle class trên Hover
Giả sử bạn muốn thay đổi hình ảnh của một yếu tố có thể nhấp trên trang của mình khi người dùng di chuyển qua nó. Bạn có thể thêm một class vào phần tử đó khi người dùng đang di chuột; khi người dùng dừng di chuột sẽ loại bỏ class:
$('.btn').on('hover', function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
Bạn cần một chút kiến thức về CSS cơ bản để thực hiện điều này. Nếu bạn muốn một cách đơn giản hơn, hãy sử dụng toggleClass:
$('.btn').on('hover', function () {
$ (this).toggleClass('hover');
});
Vô hiệu hóa các trường đầu vào
Đôi khi bạn có thể muốn button "gửi biểu mẫu" hoặc một trong các input style của nó bị vô hiệu hóa cho đến khi người dùng thực hiện một hành động nhất định (ví dụ: lựa chọn ô "Tôi đã đọc các điều khoản"). Thêm thuộc tính vô hiệu hóa vào input của bạn để bạn có thể kích hoạt nó khi bạn muốn:
$('input[type="submit"]').prop('disabled', true);
Tất cả những gì bạn cần làm là chạy lại prop tại đầu vào, nhưng đặt giá trị disabled thành false:
$('input[type="submit"]').prop('disabled', false);
Dừng việc tải liên kết
Đôi khi bạn không muốn liên kết đi đến một trang web nhất định, hoặc không muốn tải lại trang. Thay vào đó, bạn có thể muốn chúng làm một cái gì đó khác như kích hoạt một script khác. Có một thủ thuật ngăn chặn hành động mặc định trên:
$('a.no-link').on('click', function (e) {
e.preventDefault();
});
Lưu jQuery Selectors vào bộ nhớ đệm
Hãy nghĩ về số lần bạn viết cùng một selector nhiều lần trong bất kỳ dự án nào. Mỗi selector $ ('. Element') phải tìm kiếm toàn bộ DOM mỗi lần, bất kể bộ chọn đó đã chạy trước đó chưa. Thay vào đó, bạn có thể chạy bộ chọn một lần và lưu kết quả vào một biến:
var blocks = $ ('#blocks').find('li');
Bây giờ bạn có thể sử dụng biến blocks bất cứ nơi nào bạn muốn mà không phải tìm kiếm DOM mỗi lần:
$('#hideBlocks').on('click', function () {
blocks.fadeOut();
});
$('#showBlocks').on('click', function () {
blocks.fadeIn();
});
Lưu các jQuery selectors vào bộ nhớ đệm là một phương pháp hiệu quả.
Toggle Fade/Slide
Slide và fade là các hiệu ứng phổ biến với jQuery. Bạn có thể muốn hiển thị một phần tử khi người dùng nhấp vào một cái gì đó, bạn có thể sử dụng fadeIn và slideDown. Nhưng nếu bạn muốn phần tử đó xuất hiện ở lần nhấp đầu tiên và sau đó biến mất vào lần thứ hai, thì hãy sử dụng lệnh sau:
// Fade
$('.btn').on('click', function () {
$ ('.element').fadeToggle ('slow');
});
// Toggle
$('.btn').on(click', function () {
$('.element').slideToggle ('slow');
});
Simple Accordion
Đây là một phương pháp đơn giản cho một accordion nhanh chóng:
// Close all panels
$('#accordion').find('.content').hide();
// Accordion
$('#accordion').find('.accordion-header').on('click', function () {
var next = $(this).next();
next.slideToggle('fast');
$('.content').not(next).slideUp('fast');
return false;
});
Với lệnh script bên trên, công việc còn lại của bạn chỉ là chuẩn bị HTML cần thiết.
Làm cho hai Div có cùng chiều cao
Đôi khi, bạn sẽ muốn hai div có cùng chiều cao với nhau, bất kể dù chúng chứa nội dung gì:
$('.div').css('min-height', $('.main-div').height());
Ví dụ này đặt chiều cao tối thiểu (min-height) có nghĩa là nó có thể lớn hơn div chính nhưng không bao giờ nhỏ hơn. Tuy nhiên, một phương pháp linh hoạt hơn là lặp qua một tập hợp các phần tử và đặt height thành chiều cao của phần tử cao nhất:
var $columns = $('.column');
var height = 0;
$columns.each(function () {
if ($(this).height() > height) {
height = $(this).height();
}
});
$columns.height(height);
Nếu bạn muốn tất cả các cột có cùng chiều cao, sử dụng lệnh sau:
var $rows = $('.same-height-columns');
$rows.each(function () {
$(this).find('.column').height($(this).height());
});
Lưu ý: Có nhiều cách để thực hiện điều này trong CSS tùy thuộc vào nhu cầu của bạn là gì, biết cách thực hiện điều này trong jQuery đôi khi rất tiện lợi.
Theo BizFly Cloud tổng hợp
>>Có thể bạn quan tâm: Lazy load jQuery là gì? Sử dụng như thế nào?
