你应该知道的jQuery技巧
帮助提高你jQuery应用的简单小技巧。
回到顶部按钮
图片预加载
判断图片是否加载完
自动修补破损图像
Hover切换class类
禁用输入
停止正在加载的链接
toggle fade/slide
简单的手风琴
使两个DIV同等高度
在浏览器标签/新窗口打开外部链接
根据文本获取元素
可见变化的触发
Ajax调用错误处理
链式操作
回到顶部按钮
利用jQuery里的animate和scrollTop方法，你便不需要使用插件创建简单的滚动到顶部动画。
// 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>图片预加载
如果你的网页使用了很多隐藏图片文件（例如：鼠标悬停展示的图片），那么图片的预加载是有意义的：
$.preloadImages = function () {
for (var i = 0; i < arguments.length; i++) {
$('<img>').attr('src', arguments[i]);
}
};
$.preloadImages('img/hover-on.png', 'img/hover-off.png');判断图片是否加载完
有时候你可能需要检查图像是否已经加载完成，以便于可以继续执行相应的js代码：
$('img').load(function () {
console.log('image load successful');
});Hover切换class类
比方说，当用户将鼠标悬停在你页面上的元素时，你想改变其视觉效果。当用户鼠标悬停在元素上，你可以在该元素上添加一个class类，当鼠标停止悬停事件时移除此class类：
$('.btn').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});如果你想要一个更简单的方式使用toggleClass方法，则仅仅需要添加必要的CSS：
$('.btn').hover(function () {
$(this).toggleClass('hover');
});禁用输入
有时你可能需要用表单的提交按钮或者某个输入框直到用户执行了某个动作（比如：检查“我已阅读条款”复选框）。在你的输入框上设置disabled属性，然后当你需要的时候启用该属性：
$('input[type="submit"]').prop('disabled', true);你需要做的只是需要在输入框上再次运行prop方法，但设置的被禁用值是false：
$('input[type="submit"]').prop('disabled', false);toggle fade/slide
滑动和淡入/淡出 是我们在jQuery中经常大量使用的动画。你可能仅仅想在用户做某些点击事件的时候显示一个元素，这时候需要淡入/淡出或者滑动方法。但是如果你需要那个元素在你第一次点击的时候出现，在第二次点击的时候消失，代码如下：
// Fade
$('.btn').click(function () {
$('.element').fadeToggle('slow');
});
// Toggle
$('.btn').click(function () {
$('.element').slideToggle('slow');
});简单的手风琴
这是个简单快速的方法创建一个手风琴：
// Close all panels
$('#accordion').find('.content').hide();
// Accordion
$('#accordion').find('.accordion-header').click(function () {
var next = $(this).next();
next.slideToggle('fast');
$('.content').not(next).slideUp('fast');
return false;
});通过添加这个脚本，你需要做的则是必要的HTML操作在你的页面上。
在浏览器标签/新窗口打开外部链接
在新的浏览器标签或窗口中打开外部链接，并确保在同一个标签或窗口中打开的是同一个源的链接：
$('a[href^="http"]').attr('target', '_blank');
$('a[href^="//"]').attr('target', '_blank');
$('a[href^="' + window.location.origin + '"]').attr('target', '_self');备注：window.location.origin 在IE10不工作。
本文作者： Jasmine
本文链接： https://www.jianbaizhan.com/article/406
版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！