雅荷心语博客下面这些简单的小技巧能够帮助你玩转jQuery。
1、返回顶部按钮
通过使用jQuery中的animate 和scrollTop 方法，不用插件就可以创建一个滚动到顶部的简单动画：
|
1 2 3 4 5 6 7 |
// Back to top $('.top').click(function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); <!-- Create an anchor tag --> <a class="top" href="#">Back to top</a> |
改变scrollTop 的值可以更改你想要放置滚动条的位置。所有你真正需要做的是在800毫秒的时间内设置文档主体的动画，直到它滚动到文档的顶部。
注：小心scrollTop的一些错误行为。
2、预加载图像
如果你的网页要使用大量开始不可见的（例如，悬停的）图像，那么可以预加载这些图像：
|
1 2 3 4 5 6 |
$.preloadImages = function () { for (var i = 0; i < arguments.length; i++) { $('<img>').attr('src', arguments[i]); } }; $.preloadImages('img/hover-on.png', 'img/hover-off.png'); |
3、检查图像是否加载
有时为了继续脚本，你可能需要检查图像是否全部加载完毕：
|
1 2 3 |
$('img').load(function () { console.log('image load successful'); }); |
你也可以用ID或类替换<img>标签来检查某个特定的图像是否被加载。
4、自动修复破坏的图像
逐个替换已经破坏的图像链接是非常痛苦的。不过，下面这段简单的代码可以帮助你：
|
1 2 3 4 5 |
$('img').on('error', function () { if(!$(this).hasClass('broken-image')) { $(this).prop('src', 'img/broken.png').addClass('broken-image'); } }); |
即使没有任何断掉的链接，加上这一段代码也不会让你有任何损失。
5、悬停切换类
假设你希望当用户将鼠标悬停在可点击的元素上时，它会改变颜色。那么你可以在用户悬停的时候添加类到元素中，反之则删除类：
|
1 2 3 4 5 |
$('.btn').hover(function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); }); |
你只需要添加必要的CSS即可。更简单的方法是使用toggleClass 方法：
|
1 2 |
$('.btn').hover(function () { $(this).toggleClass( |
来源:前端李李
