jquery常用小功能总结讲解.docx

jquery常用小功能总结讲解.docx

《jquery常用小功能总结讲解.docx》由会员分享，可在线阅读，更多相关《jquery常用小功能总结讲解.docx（5页珍藏版）》请在冰豆网上搜索。

jquery常用小功能总结讲解

1.禁止右键点击

$（document）.ready（function（）{$（document）.bind（"contextmenu",function（e）{returnfalse;}）;}）;

 2.隐藏搜索文本框文字

点击时隐藏搜索栏中的文字

$（document）.ready（function（）{$（"input.text1"）.val（"Enteryoursearchtexthere"）;textFill（$（'input.text1'））;}）;functiontextFill（input）{//inputfocustextfunctionvaroriginalvalue=input.val（）;input.focus（function（）{if（$.trim（input.val（））==originalvalue）{input.val（''）;}}）;input.blur（function（）{if（$.trim（input.val（））==''）{input.val（originalvalue）;}}）;}

 3.在新窗口中打开链接

页面中所有链接都在新窗口中打开

$（document）.ready（function（）{//Example1:

Everylinkwillopeninanewwindow$（'a[href^="http:

//"]'）.attr（"target","_blank"）;//Example2:

Linkswiththerel="external"attributewillonlyopeninanewwindow$（'a[@rel$='external']'）.click（function（）{this.target="_blank";}）;}）;//howtouseopenlink

 4.检测浏览器

检测客户端使用的什么浏览器

$（document）.ready（function（）{//TargetFirefox2andaboveif（$.browser.mozilla&&$.browser.version>="1.8"）{//dosomething}//TargetSafariif（$.browser.safari）{//dosomething}//TargetChromeif（$.browser.chrome）{//dosomething}//TargetCaminoif（$.browser.camino）{//dosomething}//TargetOperaif（$.browser.opera）{//dosomething}//TargetIE6andbelowif（$.browser.msie&&$.browser.version<=6）{//dosomething}//TargetanythingaboveIE6if（$.browser.msie&&$.browser.version>6）{//dosomething}}）;

 5.预加载图片

预加载图片，适用网站图片很多的网站

$（document）.ready（function（）{jQuery.preloadImages=function（）{for（vari=0;i

"）.attr（"src",arguments[i]）;}}//howtouse$.preloadImages（"image1.jpg"）;}）;

 6.页面样式切换

$（document）.ready（function（）{$（"a.Styleswitcher"）.click（function（）{//swicththeLINKRELattributewiththevalueinARELattribute$（'link[rel=stylesheet]'）.attr（'href',$（this）.attr（'rel'））;}）;//howtouse//placethisinyourheader//thelinksDefaultThemeRedThemeBlueTheme}）;

 7.列高度相同

如果使用了两个CSS列，使用此种方式可以是两列的高度相同。

$（document）.ready（function（）{functionequalHeight（group）{tallest=0;group.each（function（）{thisHeight=$（this）.height（）;if（thisHeight>tallest）{tallest=thisHeight;}}）;group.height（tallest）;}//howtouse$（document）.ready（function（）{equalHeight（$（".left"））;equalHeight（$（".right"））;}）;}）;

 8.动态控制页面字体大小

用户可以改变页面字体大小

$（document）.ready（function（）{//Resetthefontsize（backtodefault）varoriginalFontSize=$（'html'）.css（'font-size'）;$（".resetFont"）.click（function（）{$（'html'）.css（'font-size',originalFontSize）;}）;//Increasethefontsize（biggerfont0$（".increaseFont"）.click（function（）{varcurrentFontSize=$（'html'）.css（'font-size'）;varcurrentFontSizeNum=parseFloat（currentFontSize,10）;varnewFontSize=currentFontSizeNum*1.2;$（'html'）.css（'font-size',newFontSize）;returnfalse;}）;//Decreasethefontsize（smallerfont）$（".decreaseFont"）.click（function（）{varcurrentFontSize=$（'html'）.css（'font-size'）;varcurrentFontSizeNum=parseFloat（currentFontSize,10）;varnewFontSize=currentFontSizeNum*0.8;$（'html'）.css（'font-size',newFontSize）;returnfalse;}）;}）;

 9.返回页面顶部功能

网站很常用的功能，增强用户体验

$（document）.ready（function（）{$（'a[href*=#]'）.click（function（）{if（location.pathname.replace（/^\//,''）==this.pathname.replace（/^\//,''）&&location.hostname==this.hostname）{var$target=$（this.hash）;$target=$target.length&&$target||$（'[name='+this.hash.slice

（1）+']'）;if（$target.length）{vartargetOffset=$target.offset（）.top;$（'html,body'）.animate（{scrollTop:

targetOffset},900）;returnfalse;}}}）;//howtouse//placethiswhereyouwanttoscrollto//thelinkgototop}）;

 11.获得鼠标指针ＸＹ值

$（document）.ready（function（）{$（）.mousemove（function（e）{//displaythexandyaxisvaluesinsidethedivwiththeidXY$（'#XY'）.html（"XAxis:

"+e.pageX+"|YAxis"+e.pageY）;}）;//howtouse