Lập trình web

10 jQuery Snippets bạn cần biết

Chia sẻ nhanh

jQuery được sử dụng hầu hết trên các trang web hiện nay. Đó là một trong các thư viện phổ biến nhất để chèn vào webpage và jQuery giúp cho thao tác DOM hoạt động một cách nhanh chóng.

Tất nhiên, một phần của sự nổi tiếng của jQuery là sự đơn giản của nó. Có vẻ như chúng ta có thể làm hầu như bất cứ điều gì chúng ta thích với thư viện mạnh mẽ này.
Trong bài viết này tôi muốn cung cấp cho bạn 10 đoạn mã mà tất cả mọi người, từ newbie đến người lập trình có kinh nghiệm sẽ sử dụng nhiều trên các project của họ

1) Back to top button

// jQuery
$('a.top').click(function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});
//HTML
<a class=”top” href=”#”>Back to top</a>

Bằng cách sử dụng tùy biến và chức năng scrollTop trong jQuery chúng ta không cần một plugin để tạo một hiệu ứng scroll đơn giản.
Bạn có thể thay đổi giá trị scrollTop để thay đổi điểm đến của scrollbar. Trong trường hợp của tôi, tôi sử dụng một giá trị từ 0 bởi vì tôi scroll đến đầu trang.
Vì vậy, những gì chúng ta đang làm trong đoạn code này là tạo hiệu ứng chuyển động trong 800ms cho đến khi scroll đến đầu trang

2) Kiểm tra image loaded

$(‘img’).load(function() {
console.log(‘image load successful’);
});

Đôi khi bạn cần kiểm tra nếu ảnh hiển thị trên webpage đã được load đầy đủ để tiếp tục chạy đoạn code mới. Trên đây là 3 dòng lệnh jQuery đơn giản để bạn có thể thực hiện điều đó.
Bạn cũng có thể kiểm tra 1 image cụ thể đã được load bằng cách thay thế thẻ img với 1 ID hay class nhất định

3) Tự động thay thế link ảnh bị hỏng

$('img').error(function(){
$(this).attr('src', ‘img/broken.png’);
});

Việc tìm và thay thế từng link ảnh bị hỏng ngay trên trang web của chúng tôi cũng là điều không dễ dàng. Vì vậy giải pháp thay link ảnh hỏng bằng 1 thông báo lỗi từ trang web là một cách làm tiết kiệm rất nhiều thời gian và công sức của bạn.
Nếu trên webpage không có link ảnh nào bị hỏng, đoạn code trên sẽ không làm ảnh hưởng tới bất kỳ link ảnh nào

4) Chuyển đổi class khi hover

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

Đoạn code trên giúp ta thay đổi class khi có sự kiện hover. Việc của bạn cần làm là thêm style cho class

5) Vô hiệu hóa input

$('input[type="submit"]').attr("disabled", true);

Nếu bạn muốn disable một input cho tới khi kết thúc một tiến trình nào đó trên webpage, bạn có thể sử dụng đoạn mã trên.
Những gì bạn cần là chạy một hàm removeAttr để kết thúc tiến trình:

$('input[type="submit"]').removeAttr("disabled”);


6) Dừng tải các liên kết

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

Đôi khi chúng ta không muốn đi đến một liên kết hoặc chạy lệnh mặc định của phần tử khi được click. Chúng ta muốn chạy một sự kiện nào khác, trong trường hợp này sẽ làm các phần tử không chạy các sự kiện mặc định.

7) Chuyển đổi fade/slide

// Fade
$( “.btn" ).click(function() {
$( “.element" ).fadeToggle("slow");
});

// Toggle
$( “.btn" ).click(function() {
$( “.element" ).slideToggle("slow");
});

Fade và Slide là những hiệu ứng chúng ta thường sử dụng trong jQuery, đôi khi chúng ta chỉ muốn hiển thị một phần tử khi có sự kiện click và trong trường hợp đó fadeIn và slideDown là những hiệu ứng thích hợp để áp dụng. Nhưng nếu chúng ta muốn hiển thị phần tử khi click lần đầu và ẩn đi khi click lần tiếp theo, đoạn code này sẽ làm tốt công việc đó.

8) Accordion đơn giản

// Close all Panels
$('#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;
});


9) Tạo 2 div có cùng chiều cao

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

Với đoạn code đơn giản trên ta có thể tạo cho 2 div riêng biệt có cùng chiều cao

10) Định nghĩa danh sách theo thứ tự

$('li:odd').css('background', '#E8E8E8’);

Với đoạn code này bạn có thể tự tạo định nghĩa CSS cho danh sách của mình, thậm chí CSS này có thể đặt trực tiếp trong file CSS không cần thông qua jQuery. Đoạn code trên giúp ích rất nhiều cho chúng ta khi muốn sử dụng một danh sách muốn bố trí theo dạng bảng với các thông tin được đánh dấu theo sọc cách nhau.

Trên đây là một số câu lệnh jQuery mà chúng tôi thường sử dụng nhiều lần trong các dự án khác nhau. Chúng tôi hi vọng bài viết này có thể giúp ích cho các bạn trong các dự án sắp tới và bookmark để sử dụng khi nào bạn cần.
Nếu bạn có bất kỳ thắc mắc về các đoạn mã hoặc góp ý chỉnh sửa, bạn có thể email cho chúng tôi qua địa chỉ: This email address is being protected from spambots. You need JavaScript enabled to view it.

Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?