Với 11 mẹo này sẽ giúp bạn sử dụng JQuery hiệu quả hơn

[Văn Anh Đào]

JQuery là một trong những Framework phổ biến nhất hiện nay ,nó được sử dụng ở 73% các trang web hiện nay . Với một lập trình viên NodeJS thì JQuery lại là một công cụ không hề xa lạ , tuy nhiên những mẹo nhỏ sau đây phần lớn các lập trình viên không biết hoặc không nắm rõ nó , qua bài viết này mình sẽ cung cấp đến các bạn những mẹo nhỏ để các bạn làm việc hiệu quả hơn nhé .

Mẹo 1 : Cách kiểm tra một phần tử có tồn tại hay không ?
Đoạn code sau đây sẽ giúp bạn kiểm tra một phần tử có tồn tại hay 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ử
}

Mẹo 2 : Cách kiểm tra JQuery đã được tải hay chưa

Trong quá trình viết JQuery đôi khi ta mắc lỗi sơ đẳng này ,… sau đây sẽ là các kiểm tra JQuery đã chạy hay chưa :

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

Chạy đoạn code trên và hệ thống sẽ thông báo cho bạn .

Mẹo 3 : Cách để tải trước ảnh với JQuery

Nếu trong quá trình chạy web hình ảnh web của bạn không hiển thị ( Ví dụ :khi di chuột ), thì 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');

Mẹo 4: Cách tự động sửa ảnh khi ảnh bị hỏng

Thi thoảng bạn phát hiện các liên kết ảnh bị hỏng trên trang web của bạn , việc thay thế từng link ảnh rất mất thời gian , sau đây sẽ là cách để bạn làm điều đó nhanh chông hơ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 những hình ảnh bị hỏng , thì bạn có thể dùng đoạn code sau :

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

Mẹo 5 : Cách Đă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());

Mẹo 6 : Cách để vô hiệu hóa các trường đầu vào
Trong quá trình làm From biểu mẫu , hoặc trong một input style đăng nhập , đăng xuất ,… đôi khi bạn muốn vô hiệu hóa chúng cho đến khi người dùng điền đầy đủ thông tin , hoặc lựa chọn ô “Tôi đã đọc xong điều khoản .” , sau đây sẽ là cách để chúng ta vô hiệu hóa chúng :

$('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);

Mẹo 7 : Cách để dừng việc tải các liên kết
Với đoạn code sau đây sẽ giúp bạn dừng tải các liên kết :

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

Mẹo 8 : 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();
});

Mẹo 9 : Simple Accordion

Sau đây sẽ là phương pháp để đơn giản 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;
});

10 Kiểm tra điều kiện khi gọi method
Khi nhắc đến kiểm tra điều kiện thì chúng ta nghĩ đến ngay việc sử dụng if - else ví dụ như :

if (success) {
  obj.show();
} else {
  obj.hide();
}

Ngoài cách trên chúng ta có thể sử sụng method để rút ngắn chúng :

var methodName = (success ? 'show' : 'hide');
obj[methodName]();

11 Cộng chuỗi
Cộng chuỗi hay nối chuỗi ,nói một cách đơn giản là ta gộp các chuỗi lại với nhau .
Cách đơn giản để nối chuỗi :

'A'+'B'+'C' // ABC

Hoặc chúng ta có thể dùng hàm join() như thế này :

['A','B','C'].join() //ABC

Qua bài viết này mình hi vọng sẽ các bạn phần nào khi sủ dụng JQuery hiệu quả hơn , chúc các bạn thanh công !