你应该知道的jQuery技巧 [转]

回到顶部按钮

利用jQuery里的animate和scrollTop方法，你便不需要使用插件创建简单的滚动到顶部动画。

$('.top').click(function (e) {
  e.preventDefault();
  $('html, body').animate({scrollTop: 0}, 800);
});
<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');
});

自动修补破损图像

如果你碰巧发现在你的网站上发现破损的图像链接，一个个去替代他们是痛苦的。这个简单的代码可以节省很多的麻烦：

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

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

停止正在加载的链接

有时你不想链接到特定的网页或者重新载入页面；你可能想让他们做一些其他事情，如触发一些其他的脚本。这是防止违约行动的技巧：

$('a.no-link').click(function (e) {
  e.preventDefault();
});

toggle fade/slide

滑动和淡入/淡出是我们在jQuery中经常大量使用的动画。你可能仅仅想在用户做某些点击事件的时候显示一个元素，这时候需要淡入/淡出或者滑动方法。但是如果你需要那个元素在你第一次点击的时候出现，在第二次点击的时候消失，代码如下：

$('.btn').click(function () {
  $('.element').fadeToggle('slow');
});
$('.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;
});

文章转载自：http://www.cnblogs.com/whitewolf/p/4982425.html

秒客网