当前位置: 首页 > 科技观察

十个jQuery代码片段助力提升Web开发效率

时间:2023-03-14 12:44:55 科技观察

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]

猜你喜欢