下面这些简单的小技巧能够帮助你玩转jQuery。

中国学网

返回顶部按钮

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

// Back to top $('.top').click(function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); <!-- Create an anchor tag --> <a href="#">Back to top</a>

改变scrollTop 的值可以更改你想要放置滚动条的位置。所有你真正需要做的是在800毫秒的时间内设置文档主体的动画，直到它滚动到文档的顶部。

注：小心scrollTop的一些错误行为。

预加载图像

如果你的网页要使用大量开始不可见的（例如，悬停的）图像，那么可以预加载这些图像：

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

你也可以用ID或类替换<img>标签来检查某个特定的图像是否被加载。

自动修复破坏的图像

逐个替换已经破坏的图像链接是非常痛苦的。不过，下面这段简单的代码可以帮助你：

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

即使没有任何断掉的链接，加上这一段代码也不会让你有任何损失。

悬停切换类

假设你希望当用户将鼠标悬停在可点击的元素上时，它会改变颜色。那么你可以在用户悬停的时候添加类到元素中，反之则删除类：

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

你只需要添加必要的CSS即可。更简单的方法是使用toggleClass 方法：

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