18个非常棒的jQuery代码片段
1、jQuery实现的内链接平滑滚动
不需要使用太复杂的插件,只要使用下载这段代码即可实现基于内部链接的平滑滚动
$('a[href^="#"]').bind('click.smoothscroll',function(e){ e.preventDefault(); varanchor=this.hash, $target=$(target); $('html,body').stop().animate({ 'scrollTop':$target.offset().top },500,'swing',function(){ window.location.hash=anchor; }); });
2、使用jQuery获取所有节点
var$element=$('#gbtags'); var$nodes=$element.contents(); $nodes.each(function(){ if(this.nodeType===3&&$.trim($(this).text())){ $(this).wrap(''); } });
3、限制选择框选择个数
$("#categoriesoption").click(function(e){ if($(this).parent().val().length<2){ $(this).removeAttr("selected"); } });
4、jQuery使用通配符来删除class
var_c='your-icon-class' $('.currency').removeClass(function(index,css){ return(css.match(/\bicon-\S+/g)||[]).join(''); }).addClass('icon-'+_c);
5、切换启用和禁用
/*HTML | | <inputtype="text"value="欢迎访问www.admin10000.com"/><inputtype="button"value="禁用按钮"/> | | */ //Plugin (function($){ $.fn.toggleDisabled=function(){ returnthis.each(function(){ var$this=$(this); if($this.attr('disabled'))$this.removeAttr('disabled'); else$this.attr('disabled','disabled'); }); }; })(jQuery); //TEST $(function(){ $('input:button').click(function(){ $('input:text').toggleDisabled(); }); });
6、平滑滚动返回顶端
<h1id="anchor">admin10000.com</h1> <aclass="topLink"href="#anchor">返回顶端</a> $(document).ready(function(){ $("a.topLink").click(function(){ $("html,body").animate({ scrollTop:$($(this).attr("href")).offset().top+"px" },{ duration:500, easing:"swing" }); returnfalse; }); });
7、使用jQuery和GoogleAnalytics来跟踪表单
vararray1=[]; $(document).ready(function(){ $('input').change(function(){ varformbox=$(this).attr('id'); array1.push(formbox); console.log("youfilledoutbox"+array1); }); $('#submit').click(function(){ console.log('tracked'+array1); //alert('thisistheorderofboxesyoufilledout:'+array1); _gaq.push(['_trackEvent','Form','completed','"'+array1+'"']); }); });
8、超简单的密码强度提示
$('#pass').keyup(function(e){ varstrongRegex=newRegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$","g"); varmediumRegex=newRegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$","g"); varenoughRegex=newRegExp("(?=.{6,}).*","g"); if(false==enoughRegex.test($(this).val())){ $('#passstrength').html('MoreCharacters'); }elseif(strongRegex.test($(this).val())){ $('#passstrength').className='ok'; $('#passstrength').html('Strong!'); }elseif(mediumRegex.test($(this).val())){ $('#passstrength').className='alert'; $('#passstrength').html('Medium!'); }else{ $('#passstrength').className='error'; $('#passstrength').html('Weak!'); } returntrue; });
9、jQuery生成一个自动停靠页尾效果
//Windowloadeventusedjustincasewindowheightisdependantuponimages $(window).bind("load",function(){ varfooterHeight=0, footerTop=0, $footer=$("#footer"); positionFooter(); functionpositionFooter(){ footerHeight=$footer.height(); footerTop=($(window).scrollTop()+$(window).height()-footerHeight)+"px"; /*DEBUGGING console.log("Documentheight:",$(document.body).height()); console.log("Windowheight:",$(window).height()); console.log("Windowscroll:",$(window).scrollTop()); console.log("Footerheight:",footerHeight); console.log("Footertop:",footerTop); */ if(($(document.body).height()+footerHeight)<$(window).height()){ $footer.css({ position:"absolute" }).stop().animate({ top:footerTop }); }else{ $footer.css({ position:"static" }); } } $(window) .scroll(positionFooter) .resize(positionFooter); });
10、预防对表单进行多次提交
$(document).ready(function(){ $('form').submit(function(){ if(typeofjQuery.data(this,"disabledOnSubmit")=='undefined'){ jQuery.data(this,"disabledOnSubmit",{submited:true}); $('input[type=submit],input[type=button]',this).each(function(){ $(this).attr("disabled","disabled"); }); returntrue; } else { returnfalse; } }); });
11、图像等比例缩放
$(window).bind("load",function(){ //IMAGERESIZE $('#product_cat_listimg').each(function(){ varmaxWidth=120; varmaxHeight=120; varratio=0; varwidth=$(this).width(); varheight=$(this).height(); if(width>maxWidth){ ratio=maxWidth/width; $(this).css("width",maxWidth); $(this).css("height",height*ratio); height=height*ratio; } varwidth=$(this).width(); varheight=$(this).height(); if(height>maxHeight){ ratio=maxHeight/height; $(this).css("height",maxHeight); $(this).css("width",width*ratio); width=width*ratio; } }); //$("#contentpageimg").show(); //IMAGERESIZE });
12、鼠标滑动时的渐入和渐出
$(document).ready(function(){ $(".thumbsimg").fadeTo("slow",0.6);//Thissetstheopacityofthethumbstofadedownto60%whenthepageloads $(".thumbsimg").hover(function(){ $(this).fadeTo("slow",1.0);//Thisshouldsettheopacityto100%onhover },function(){ $(this).fadeTo("slow",0.6);//Thisshouldsettheopacitybackto60%onmouseout }); });
13、制作等高的列
varmax_height=0; $("div.col").each(function(){ if($(this).height()>max_height){max_height=$(this).height();} }); $("div.col").height(max_height);
14、图片预加载
(function($){ varcache=[]; //Argumentsareimagepathsrelativetothecurrentpage. $.preLoadImages=function(){ varargs_len=arguments.length; for(vari=args_len;i--;){ varcacheImage=document.createElement('img'); cacheImage.src=arguments[i]; cache.push(cacheImage); } } jQuery.preLoadImages("image1.gif","/path/to/image2.png");
15、获取URL中传递的参数
$.urlParam=function(name){ varresults=newRegExp('[\\?&]'+name+'=([^&#]*)').exec(window.location.href); if(!results){return0;} returnresults[1]||0; }
16、禁用表单的回车键提交
$("#form").keypress(function(e){ if(e.which==13){ returnfalse; } });
17、让整个DIV可以被点击
<divclass="myBox"> <ahref="https://www.nhooo.com">www.nhooo.com</a> </div> $(".myBox").click(function(){ window.location=$(this).find("a").attr("href"); returnfalse; });
18、在新窗口打开链接(target=”blank”)
$('a[@rel$='external']').click(function(){ this.target="_blank"; });
大家可以结合之前小编整理的文章进行学习,把实用的jQuery代码片段进行汇总,以便日后学习使用。