jquery常用小功能总结.docx
《jquery常用小功能总结.docx》由会员分享,可在线阅读,更多相关《jquery常用小功能总结.docx(4页珍藏版)》请在冰豆网上搜索。
![jquery常用小功能总结.docx](https://file1.bdocx.com/fileroot1/2022-11/15/264a0ff5-72f5-4765-950f-2a3c025d475d/264a0ff5-72f5-4765-950f-2a3c025d475d1.gif)
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.获得鼠标指针XY值
$(document).ready(function(){$().mousemove(function(e){//displaythexandyaxisvaluesinsidethedivwiththeidXY$('#XY').html("XAxis:
"+e.pageX+"|YAxis"+e.pageY);});//howtouse
$(document).ready(function(){window.setTimeout(function(){//dosomething},1000);});
$(document).ready(function(){varel=$('#id');el.html(el.html().replace(/word/ig,""));});
$(document).ready(function(){$("div").click(function(){//gettheurlfromhrefattributeandlaunchtheurlwindow.location=$(this).find("a").attr("href");returnfalse;});//howtouse
18.ID与Class之间转换.