jQuery操作小技巧

jQuery操作小技巧

1、返回顶部

通过使用jQuery中的animate和scrollTop方法，不用插件就可以创建一个滚动到顶部的简单动画。

<a id="top" href="www.baidu.com">返回顶部</a>

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

2.预加载图像

如果您的网页中使用大量开始不可见的图像，那么可以试试这个。

 $.preloadimages=function() {
        for (var i = 0; i < arguments.length; i++) {
            $('.img').attr("src", arguments[i]);
        }
    };
    $.preloadimages('img/a.png','img/b.jpg','img/c.gif');

3.检查图像是否加载

有时为了继续脚本，可能需要减产图像是否全部加载完毕：

$(".img").load(function(){
    console.log('images laod success');
});

4.自动修复破损的图像

当图片加载出错了，当前的图片就会应用这段代码再img标签添加一张图片；

$('.img').on('error',function(){
    if(!$(this).hasClass('broke-image')){
        $(this).attr('src','img/broken.png').addClass('broken-image');
    }
})

5.悬停切换类

引用块内容

假如您希望用户将鼠标徐阿你停在可点击的元素上，他会改变颜色，那么您可以在用户选你天赋的时候添加类到元素中，反之这是删除类；

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

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