欢迎使用CSDN-markdown编辑器

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