JQuery是继prototype之后又一个优秀的Javascript库。是一个轻量级的js库，兼容CSS3，兼容各种浏览器（IE6.0+、FF1.5+、Safari2.0+、Opera9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器.jQuery使用户能够更方便地处理HTML（标准通用标记语言下的应用程序）、事件，实现动画效果，方便地为网站提供AJAX交互。jQuery的另一大优点是它的文档非常全面，各种应用也有详细的介绍，还有很多成熟的插件可供选择。jQuery可以让用户的html页面保持代码和html内容分离，也就是说不需要在html中插入一堆js来调用命令，只需要定义id即可。下面十个jQuery实例可以帮助你的网页设计项目顺利实现效率提升。检测IE浏览器在做CSS设计的时候，IE浏览器无疑是开发者和设计者的一个烦恼。虽然IE6的黑暗时代已经过去，IE浏览器家族的热度也在下滑，但我们还是有必要对其进行检测。当然，下面的代码片段也可以用来检测其他浏览器。$(document).ready(function(){if(navigator.userAgent.match(/msie/i)){alert('IamanoldfashionedInternetExplorer');}});来源：StackOverflow平滑滚动到页面顶部下面是最常见的jQuery实现：点击链接平滑滚动到页面顶部。虽然一点新意都没有，但是几乎每个开发者都会用到它。$("a[href='#top']").click(function(){$("html,body").animate({scrollTop:0},"slow");returnfalse;});来源：StalkOverflow始终位于顶部以下代码片段允许元素始终位于页面顶部。可以想象，它非常适合处理导航菜单、工具栏或其他重要信息。$(function(){var$win=$(window)var$nav=$('.mytoolbar');varnavTop=$('.mytoolbar').length&&$('.mytoolbar').offset().top;varisFixed=0;processScroll()$win.on('scroll',processScroll)functionprocessScroll(){vari,scrollTop=$win.scrollTop()if(scrollTop>=navTop&&!isFixed){isF??ixed=1$nav.addClass('subnav-fixed')}elseif(scrollTop<=navTop&&isFixed){isF??ixed=0$nav.removeClass('subnav-fixed')}}来源：DesignBump替换html标签jQuery可以很方便的替换html标签，而这个它也会给我们带来更多新的可能。$('li').replaceWith(function(){return$("
").append($(this).contents());});来源：AllureWebSolutions检测屏幕宽度现在移动设备的普及率几乎已经超过了传统电脑，检测小屏幕的尺寸就显得尤为重要了，幸运的是我们可以使用jQuery轻松实现这个功能。/*ifisbelow481px*/if(responsive_viewport<481){alert('Viewportissmallerthan481px.');}/*endsmallestscreen*/所以urce:jQueryRain会自动修复损坏的图片，如果你的站点非常大而且已经上线好几年了，所以里面或多或少会有损坏的图片。这个功能可以检测破损的图片，并根据我们的选择进行更换。$('img').error(function(){$(this).attr('src','img/broken.png');});来源：WebDesignerDepotdetectscopy,pasteandcutoperationsusingjQuery,你可以非常容易地检测对选定元素的复制，粘贴和剪切操作。$("#textA").bind('copy',function(){$('span').text('copybehaviourdetected!')});$("#textA").bind('paste',function(){$('span').text('pastebehaviourdetected!')});$("#textA").bind('cut',function(){$('span').text('cutbehaviourdetected!')});来源：Snipplr自动为外部链接添加target="blank"属性当链接到外部站点时，您可能希望使用target="blank"属性以确保页面在新选项卡中打开。问题在于target="blank"属性未通过W3C认证。jQuery可以提供很多帮助：以下代码片段检测当前链接是否指向外部，如果是，则自动向其添加target="blank"属性。varroot=location.protocol+'//'+location.host;$('a').not(':contains(root)').click(function(){this.target="_blank";});来源：jQueryRain在悬停时淡入/淡出是另一种“经典”效果，您可以随时使用下面的代码片段。$(document).ready(function(){$(".thumbsimg").fadeTo("slow",0.6);//当页面加载$(".thumbsimg").hover(function(){$(this).fadeTo("slow",1.0);//Thisshouldsettheopacityto100%onhover},function(){$(this).fadeTo("slow",0.6);//Thisshouldsettheopacitybackto60%onmouseout});});来源：Snipplr在文本/密码输入中禁用空格无论是电子邮件、用户名还是密码，许多常用字段都不需要空格。以下代码可轻松禁用所选输入中的所有空格。$('input.nospace').keydown(function(e){if(e.keyCode==32){returnfalse;}});原标题：10jQuerySnippetsforEfficientWebDevelopment注明原文译者及出处为.com]