淡出和滑动都是我们在 jQuery 中大量使用的效果。你可能只想在用户点击后展现某个元素，此时用 fadeIn 和 slideDown 方法就很完美。但是如果你希望这个元素在首次点击时出现，在再次点击时消失，这段代码就很有用了：

// 淡出

$('.btn').click(function () {

  $('.element').fadeToggle('slow');

});

// 切换

$('.btn').click(function () {

  $('.element').slideToggle('slow');

});

简单的手风琴效果

这是一个快速实现手风琴效果的简单方法:

// 关闭所有面板

$('#accordion').find('.content').hide();

// 手风琴效果

$('#accordion').find('.accordion-header').click(function () {

  var next = $(this).next();

  next.slideToggle('fast');

  $('.content').not(next).slideUp('fast');

  return false;

});

通过添加这段脚本，你实际要做的只是提供必要的 HTML 元素以便它正常运行。

使两个 div 等高

有时你希望无论两个 div 各自包含什么内容，它们总有相同的高度：

$('.div').css('min-height', $('.main-div').height());

这个例子设置了 min-height，意味着高度可以大于主 div 而不能小于它。然而，更灵活的方法是遍历一组元素，然后将高度设置为最高元素的高度：

var $columns = $('.column');

var height = 0;

$columns.each(function () {

  if ($(this).height() > height) {

    height = $(this).height();

  }

});

$columns.height(height);

如果你希望所有列高度相同：

var $rows = $('.same-height-columns');

$rows.each(function () {

  $(this).find('.column').height($(this).height());

});

在新标签页 / 新窗口打开外部链接

在一个新的浏览器标签页或窗口中打开外部链接，并确保相同来源的链接在同一个标签页或者窗口中打开：

$('a[href^="http"]').attr('target', '_blank');

$('a[href^="//"]').attr('target', '_blank');

$('a[href^="'   window.location.origin   '"]').attr('target', '_self');

注： window.location.origin 在 IE10 中不可用. 这个修复方案 正是关注于该问题。

通过文本查找元素

通过使用 jQuery 的 contains() 选择器，你能够查找元素内容中的文本。若文本不存在，该元素将被隐藏：

var search = $('#search').val();

$('div:not(:contains("'   search   '"))').hide();

在 visibility 属性变化时触发

当用户的焦点离开或者重新回到某个标签页时，触发 Javasrcipt：

$(document).on('visibilitychange', function (e) {

  if (e.target.visibilityState === "visible") {

    console.log('Tab is now in view!');

  } else if (e.target.visibilityState === "hidden") {

    console.log('Tab is now hidden!');

  }

});

Ajax 调用错误处理

当一个 Ajax 调用返回 404 或 500 错误时，错误处理程序将被执行。若错误处理未被定义，其它 jQuery 代码可能不再有效。所以定义一个全局的 Ajax 错误处理：

$(document).ajaxError(function (e, xhr, settings, error) {

  console.log(error);

});

链式插件调用

jQuery 允许通过“链式”插件调用的方法，来缓解反复查询 DOM 和创建多个 jQuery 对象的过程。例如，下面的代码代表着你的插件调用：

$('#elem').show();

$('#elem').html('bla');

$('#elem').otherStuff();

通过使用链式操作，有了显著的改善:

$('#elem')

  .show()

  .html('bla')

  .otherStuff();

另一种方法是在变量（以 $ 为前缀）中，对元素进行缓存：

var $elem = $('#elem');

$elem.hide();

$elem.html('bla');

$elem.otherStuff();

无论是链式操作，还是缓存元素，都是 jQuery 中用以简化和优化代码的最佳实践。