jQuery实现的简单小功能（实用）

1.返回顶部
使用JQuery的animate和scrollTop方法可以创建简单地返回顶部的动画：

// Back to top
$('#top').click(function (e) {
     e.preventDefault();
     $('html,body').animate({scrollTop: 0}, 300);
});

2.图片预加载
如果页面使用了很多不是最初加载便可见的图片，有必要进行预加载：

$.preloadImages = function () {
    for (var i = 0; i < arguments.length; i++) {
         $('img').attr('src', arguments[i]);
    }
};
$.preloadImages('img/hover-on.png', 'img/hover-off.png');

　　判断图片是否完全加载

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

　　自动修复损坏图片

$('img').on('error', function () {
     $(this).prop('src', 'img/broken.png');
});

3.Hover状态的类切换

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

4.Fade/Slide切换  实现第一次点击显示元素而第二次点击隐藏元素的效果

// Fade
$('.btn').click(function () {
     $('.element').fadeToggle('slow');
});
// Toggle
$('.btn').click(function () {
     $('.element').slideToggle('slow');
});

5.通过文本查找元素

var search = $('#search').val();
$('div:not(:contains("'+search+'"))').hide();