如果你希望在用户将鼠标悬停在某个可点击元素上时改变它的视觉效果，你可以在该元素被悬停时给它添加一个 class，当鼠标不再悬停时，移除这个 class：
$('.btn').hover(function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); });
如果你还寻求更简单的途径，可以使用 toggleClass 方法，仅需添加必要的 CSS：
$('.btn').hover(function () { $(this).toggleClass('hover'); });
注：在这种情况下，使用 CSS 或许是一个更快速的解决方案，但这种方法仍然值得稍作了解。
禁用输入字段
有时，你可能希望在用户完成特定操作（例如，勾选“我已阅读条例”的确认框）前禁用表单的提交按钮或禁用其中某个输入框。你可以在你的输入字段上添加disabled 属性，而后你能在需要时启用它：
$('input[type="submit"]').prop('disabled', true);
你只需在输入字段上再次运行 prop 方法, 但是这一次把 disabled 值改为 false：
$('input[type="submit"]').prop('disabled', false);
阻止链接加载
有时你不希望链接到指定页面或者重载当前页面，而是想让它们干些别的，例如触发其它脚本。这需要在阻止默认动作上做些文章：
$('a.no-link').click(function (e) { e.preventDefault(); });
缓存 jQuery 选择器
想想你在项目中一次又一次地写了多少相同的选择器吧。每个 $('.element') 都必须查询一次整个 DOM,不管它是否曾这样执行过。作为代替，我们只运行一次选择器，并把结果储存在一个变量中：
var blocks = $('#blocks').find('li');
现在你能在任何地方使用 blocks 变量而无需每次查询 DOM 了:
$('#hideBlocks').click(function () { blocks.fadeOut(); }); $('#showBlocks').click(function () { blocks.fadeIn(); });
缓存 jQuery 的选择器是种简单的性能提升。
切换淡出 / 滑动
淡出和滑动都是我们在 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：