10 thủ thuật jquery quan trọng cần phải biết

1. Back to top

Bằng cách 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);
});

 
<a class="top" href="#">Back to top</a>

2. Preload images

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 < arguments.length; i++) {
    $('<img>').attr('src', arguments[i]);
  }
};

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

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

4. Toggle class on hover

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

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

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

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

Tuy nhiên trong thực tế không ai làm vậy cả, bạn có thể áp dụng hoàn toàn css để đạt được tốc độ cao hơn nhưng biết thêm một cách bằng js cũng là điều rất thú vị

5. 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);

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

7. Ẩn hiện một thẻ div

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

8. Simple Accordion

Có rất nhiều cách để làm cái này như sử dụng các thư viện bên ngoài. Nhưng cách đơn giản và ngắn gọn nhất là copy & paste các đoạn lệnh dưới đây

$('#accordion').find('.content').hide();
 
// Accordion
$('#accordion').find('.accordion-header').click(function () {
  var next = $(this).next();
  next.slideToggle('fast');
  $('.content').not(next).slideUp('fast');
  return false;
});

<div id="accordion">
    <h4 class="accordion-header">Java</h4>
    <div class="content">  
        Java là một ngôn ngữ rất mạnh mẽ
    </div>
    <h4 class="accordion-header">PHP</h4>
    <div class="content">  
        PHP là một ngôn ngữ rất thú vị
    </div>
    <h4 class="accordion-header">C#</h4>
    <div class="content">  
        C# là một ngôn ngữ rất dễ học
    </div>
</div>

9. Tạo 2 thẻ div có cùng chiều cao

Trong một vài trường hợp bạn muốn 2 thẻ div phải có cùng chiều cao với nhau cho dù nội dung bên trong chúng là gì đi chăng nữa

$('.div').css('min-height', $('.main-div').height());

Ở đoạn lệnh trên thiết lập thuộc tính là min-height, điều này có nghĩa là làm cho thẻ div có thể có cao hơn nhưng không bao giờ ngắn hơn. Tuy nhiên chúng ta có thể sử dụng cách thức linh động hơn bằng cách lặp tất cả các thẻ div và gán chiều cao của nó bằng chiều cao của thẻ div 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 div có cùng chiều cao

var $rows = $('.same-height-columns');
$rows.each(function () {
  $(this).find('.column').height($(this).height());
});

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

Tham khảo

http://apollo13.vn/lap-trinh/javascript/javascript-co-ban https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/blob/master/README.md