// 关闭所有面板 $('#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 中用以简化和优化代码的最佳实践。
这里收集了一些简单的窍门，助你玩转 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 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