通过使用链式操作，有了显著的改善:
$('#elem')
.show()
.html('bla')
.otherStuff();另一种方法是在变量（以 $ 为前缀）中，对元素进行缓存：
var $elem = $('#elem');
$elem.hide();
$elem.html('bla');
$elem.otherStuff();无论是链式操作，还是缓存元素，都是 jQuery 中用以简化和优化代码的最佳实践。
这里收集了一些简单的窍门，助你玩转 jQuery。
检查 jQuery 是否加载
在使用 jQuery 进行任何操作之前，你需要先确认它已经加载：
if (typeof jQuery == 'undefined') {
console.log('jQuery hasn't loaded');
} else {
console.log('jQuery has loaded');
}返回顶部按钮
利用 jQuery 中的 animate 和 scrollTop 方法，你无需插件就可以创建简单的 scroll up 效果:
// 返回顶部
$('a.top').click(function (e) {
e.preventDefault();
$(document.body).animate({scrollTop: 0}, 800);
});
<!-- 设置锚 -->
<a class="top" href="#">Back to top</a>调整 scrollTop 的值即可改变滚动着陆位置。你实际所做的是在 800 毫秒内不断设置文档主体的位置，直到它滚动到顶部。
预加载图片
如果你的网页使用了大量并非立即可见的图片（例如悬停鼠标触发的图片），那么预加载这些图片就显得很有意义了:
$.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 或者 class 属性的 <img> 标签，你也可以检查特定图片是否加载完成。
自动修复失效图片
如果你在你的网站上发现了失效的图片链接，逐个去替换它们将会是个苦差。这段简单的代码可以很大程度地减轻痛苦：
$('img').on('error', function () {
if(!$(this).hasClass('broken-image')) {
$(this).prop('src', 'img/broken.png').addClass('broken-image');
}
});即使你暂无任何失效的链接，添加这段代码也不会有任何损失。
鼠标悬停切换 class
如果你希望在用户将鼠标悬停在某个可点击元素上时改变它的视觉效果，你可以在该元素被悬停时给它添加一个 class，当鼠标不再悬停时，移除这个 class：
