jQuery技术

每个程序员都会的 35 个 jQuery 小技巧

字号+ 作者:H5之家 来源:H5之家 2015-11-11 16:23 我要评论( )

转自: http://developer.51cto.com/art/201511/496266_all.htm 收集的35个 jQuery小技巧/代码片段,可以帮你快速开发. AD: 1. 禁止右键点击 [代码片段] 2

1. 禁止右键点击

$(document).ready(function(){ $(document).bind("contextmenu",function(e){ returnfalse; }); });

2. 隐藏搜索文本框文字

Hidewhenclickedinthesearchfield,thevalue.(examplecanbefoundbelowinthecommentfields) $(document).ready(function(){ $("input.text1").val("Enteryoursearchtexthere"); textFill($('input.text1')); }); functiontextFill(input){//inputfocustextfunction varoriginalvalue=input.val(); input.focus(function(){ if($.trim(input.val())==originalvalue){input.val('');} }); input.blur(function(){ if($.trim(input.val())==''){input.val(originalvalue);} }); }

3. 在新窗口中打开链接

XHTML1.0Strictdoesn’tallowthisattributeinthecode,sousethistokeepthecodevalid. $(document).ready(function(){ //Example1:Everylinkwillopeninanewwindow $('a[href^="http://"]').attr("target","_blank"); //Example2:Linkswiththerel="external"attributewillonlyopeninanewwindow $('a[@rel$='external']').click(function(){ this.target="_blank"; }); }); //howtouse <ahref="http://www.opensourcehunter.com"rel=external>openlink</a>

4. 检测浏览器

注:在版本jQuery1.4中,$.support替换掉了$.browser变量 $(document).ready(function(){ //TargetFirefox2andabove if($.browser.mozilla&&$.browser.version>="1.8"){ //dosomething } //TargetSafari if($.browser.safari){ //dosomething } //TargetChrome if($.browser.chrome){ //dosomething } //TargetCamino if($.browser.camino){ //dosomething } //TargetOpera if($.browser.opera){ //dosomething } //TargetIE6andbelow if($.browser.msie&&$.browser.version<=6){ //dosomething } //TargetanythingaboveIE6 if($.browser.msie&&$.browser.version>6){ //dosomething } });

5. 预加载图片

Thispieceofcodewillpreventtheloadingofallimages,whichcanbeusefulifyouhaveasitewithlotsofimages. $(document).ready(function(){ jQuery.preloadImages=function() { for(vari=0;i<ARGUMENTS.LENGTH;jQuery(?<img{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 <LINKrel=stylesheettype=text/csshref="http://banu.blog.163.com/blog/static/default.css"> //thelinks <Ahref="http://banu.blog.163.com/blog/static/2314648201510108591146"rel=default.css>DefaultTheme</A> <Ahref="http://banu.blog.163.com/blog/static/2314648201510108591146"rel=red.css>RedTheme</A> <Ahref="http://banu.blog.163.com/blog/static/2314648201510108591146"rel=blue.css>BlueTheme</A> });

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. 返回页面顶部功能

For a smooth(animated) ride back to the top(or any location).

$(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 <Aname=top></A> //thelink <Ahref="http://banu.blog.163.com/blog/static/2314648201510108591146#top">gototop</A> });

10. 获得鼠标指针XY值

Want to know where your mouse cursor is?

$(document).ready(function(){ $().mousemove(function(e){ //displaythexandyaxisvaluesinsidethedivwiththeidXY $('#XY').html("XAxis:"+e.pageX+"|YAxis"+e.pageY); }); //howtouse <DIVid=XY></DIV> });

11.返回顶部按钮

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 7个有用的jQuery小技巧

    7个有用的jQuery小技巧

    2016-02-26 13:02

  • jQuery制作select双向选择列表

    jQuery制作select双向选择列表

    2016-02-26 11:00

  • 全面详细的jQuery常见开发技巧手册

    全面详细的jQuery常见开发技巧手册

    2016-02-26 10:02

  • 强大的jQuery移动插件Top 10

    强大的jQuery移动插件Top 10

    2016-02-25 09:05

网友点评
e