以下简单的技巧可以帮助你玩转jQuery。返回顶部按钮预加载图像检查图像自动加载修复损坏的图像悬停切换类禁用输入字段停止加载链接切换淡入/滑动简单手风琴使两个div在新选项卡/窗口中打开相同的高度查找元素在更改可见性错误时触发AJAX调用处理链接插件调用通过使用jQuery中的animate和scrollTop方法，无需插件即可创建滚动到顶部的简单动画：//Backtotop$('.top').click(function(e){e.preventDefault();$('html,body').animate({scrollTop:0},800);});返回顶部改变scrollTop的值可以改变你想要放置滚动条的位置。您真正需要做的就是为文档主体设置800毫秒的动画，直到它滚动到文档顶部。注意：注意scrollTop的一些不当行为。预加载图像如果您的网页使用了很多最初不可见的图像（例如，悬停时），您可以预加载这些图像：$.preloadImages=function(){for(vari=0;i').attr('src',arguments[i]);}};$.preloadImages('img/hover-on.png','img/hover-off.png');检查图像是否加载有时为了继续脚本，您可能需要检查图像是否完全加载：$('img').load(function(){console.log('imageloadsuccessful');});您还可以使用ID或类来替换![]()
标签来检查是否加载了特定图像。自动修复损坏的图像一张一张地替换已经损坏的图像链接是非常痛苦的。但是，以下简单代码可以帮助您：$('img').on('error',function(){if(!$(this).hasClass('broken-image')){$(this).prop('src','img/broken.png').addClass('broken-image');}});即使没有任何损坏的链接，添加此代码也不会给您带来任何损失。HoverToggle类假定您希望可点击元素在用户将鼠标悬停在其上时改变颜色。然后您可以在用户悬停时将类添加到元素，否则删除类：$('.btn').hover(function(){$(this).addClass('hover');},function(){$(this).removeClass('悬停');});您只需要添加必要的CSS。一种更简单的方法是使用toggleClass方法：$('.btn').hover(function(){$(this).toggleClass('hover');});注意：可能在这种情况下CSS这样的解决方案更快，但是有必要了解这种方法。禁用输入字段有时，您可能希望禁用表单的提交按钮或其文本输入之一，直到用户执行特定操作（例如，选中“我已阅读相关条款”复选框）。将disabled属性添加到您的输入以在需要时启用它：$('input[type="submit"]').prop('disabled',true);那么你只需要运行inputprop方法就可以了，但是disabled的值要设置为false：$('input[type="submit"]').prop('disabled',false);停止加载链接有时，您不需要链接到某个特定的网页，并且不想重新加载该页面-您可能希望链接执行其他操作，比如触发其他脚本。这将对阻止默认操作大惊小怪：$('a.no-link').click(function(e){e.preventDefault();});淡入/滑动开关滑动和淡入是我们使用的jQuery在制作动画时经常使用。如果你只想在用户点击后显示一个元素，那么fadeIn和slideDown方法是完美的。但是，如果您希望元素在第一次单击时出现并在第二次单击时消失，请尝试以下操作：//Fade$('.btn').click(function(){$('.element').fadeToggle('slow');});//切换$('.btn').click(function(){$('.element').slideToggle('slow');});SimpleAccordion这是一种快速生成手风琴的简单方法：//Closeallpanels$('#accordion').find('.content').hide();//Accordion$('#accordion').find('.accordion-header').click(function(){varnext=$(this).next();next.slideToggle('fast');$('.content').not(next).slideUp('fast');返回假;});通过添加此脚本，您真正需要做的就是向页面添加必要的HTML元素，这样它才能正常工作。使两个div具有相同的高度有时，您需要使两个div具有相同的高度，无论它们包含什么内容：$('.div').css('min-height',$('.main-div')。高度（））;设置最小高度，这意味着它可以大于但绝不能小于主div。但是，有一种更灵活的方法可以遍历一组元素，然后将高度设置为最近元素的高度：var$columns=$('.column');varheight=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());});Openexternallinksinnewtabs/windowsOpenexternallinksinanewbrowsertaborwindow,并确保来自同一来源的链接可以在同一标签或窗口中打开：$('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()选择器查找元素内容的文本。如果文本不存在，隐藏该元素：varsearch=$('#search').val();$('div:not(:contains("'+search+'"))').hide();Visibility改变时触发当用户不再关注某个选项卡，或重新关注原始选项卡时，触发JavaScript：$(document).on('visibilitychange',function(e){if(e.target.visibilityState==="visible"){console.log('Tabisnowinview!');}elseif(e.target.visibilityState==="hidden"){console.log('Tabisnowhidden!');}});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')。其他的东西（）;可以通过使用链接得到很大的改进：$('#elem').show().html('bla').otherStuff();另一种方法是缓存在（前缀$）变量元素中：var$elem=$('#elem');$elem.hide();$elem.html('bla');$elem.otherStuff();链接和缓存方法在jQuery替代实践中可用，可以使代码更短更快。翻译链接：http://www.codeceo.com/article/15-jquery-tips.html英文原文：jQueryTipsEveryoneShouldKnow
