26 个 jQuery使用技巧

最新推荐文章于 2025-08-09 20:51:19 发布

iteye_3606

最新推荐文章于 2025-08-09 20:51:19 发布

阅读量80

点赞数

文章标签： javascript ui ViewUI

本文提供26个实用的jQuery技巧，涵盖从基本操作到高级应用的各种场景，包括禁用右键点击、预加载图片、平滑滚动等功能，帮助开发者提高网页交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

The use of the jQuery library is growing and growing(just released jQuery 1.4), more and more people are using this useful javascript library. This means that more and more useful jQuery tips, tricks and solutions are coming available. That’s why i created a small list of 26 cool and useful jQuery tips, tricks and solutions.

1. 禁用右键点击（Disable right-click）

[javascript]view plaincopyprint? 
   
 $(document).ready(function(){ 
 $(document).bind("contextmenu",function(e){ 
 returnfalse; 
 }); 
 }); 

2. 禁用搜索文本框（Disappearing search field text）

[javascript]view plaincopyprint? 
   
 $(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. 新窗口打开链接（Opening links in a new window）

[javascript]view plaincopyprint? 
   
 $(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. 检测浏览器（Detect browser）

[javascript]view plaincopyprint? 
   
 $(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. 预加载图片（Preloading images）

[javascript]view plaincopyprint? 
   
 $(document).ready(function(){ 
 jQuery.preloadImages=function() 
 { 
 for(vari=0;i<arguments.length;i++)=""{=""jquery("<img="">").attr("src",arguments[i]); 
 } 
 } 
 //howtouse 
 $.preloadImages("image1.jpg"); 
 }); 
 </arguments.length;> 

6. 样式筛选（CSS Style switcher）

[javascript]view plaincopyprint? 
   
 $(document).ready(function(){ 
 $("a.Styleswitcher").click(function(){ 
 //swicththeLINKRELattributewiththevalueinARELattribute 
 $('link[rel=stylesheet]').attr('href',$(this).attr('rel')); 
 }); 
 //howtouse 
 //placethisinyourheader 
 <linkrel="stylesheet"href="default.css"type="text/css"> 
 //thelinks 
 <ahref="#"class="Styleswitcher"rel="default.css">DefaultTheme</a> 
 <ahref="#"class="Styleswitcher"rel="red.css">RedTheme</a> 
 <ahref="#"class="Styleswitcher"rel="blue.css">BlueTheme</a> 
 }); 

7. 列高度相同（Columns of equal height）

[javascript]view plaincopyprint? 
   
 $(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. 字体大小调整（Font resizing）

[javascript]view plaincopyprint? 
   
 $(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. 返回页面顶部（Smooth(animated) page scroll）

[javascript]view plaincopyprint? 
   
 $(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="#top">gototop</a> 
 }); 

11. 获取鼠标的xy坐标（Get the mouse cursor x and y axis）

[javascript]view plaincopyprint? 
   
 $(document).ready(function(){ 
 $().mousemove(function(e){ 
 //displaythexandyaxisvaluesinsidethedivwiththeidXY 
 $('#XY').html("XAxis:"+e.pageX+"|YAxis"+e.pageY); 
 }); 
 //howtouse 
 <divid="XY"></div> 
  
 }); 

12. 验证元素是否为空（Verify if an Element is empty）

[javascript]view plaincopyprint? 
   
 $(document).ready(function(){ 
 if($('#id').html()){ 
 //dosomething 
 } 
 }); 

13. 替换元素（Replace a element）

[javascript]view plaincopyprint? 
   
 $(document).ready(function(){ 
 $('#id').replaceWith(' 
 <div>Ihavebeenreplaced</div> 
  
 '); 
 }); 

14. 延迟加载（jQuery timer callback functions）

[javascript]view plaincopyprint? 
   
 $(document).ready(function(){ 
 window.setTimeout(function(){ 
 //dosomething 
 },1000); 
 }); 

15. 移除单词（Remove a word）

[javascript]view plaincopyprint? 
   
 $(document).ready(function(){ 
 varel=$('#id'); 
 el.html(el.html().replace(/word/ig,"")); 
 }); 

16. 验证元素是否存在（Verify that an element exists in jQuery）

[javascript]view plaincopyprint? 
   
 $(document).ready(function(){ 
 if($('#id').length){ 
 //dosomething 
 } 
 }); 

17. 使整个DIV可点击（Make the entire DIV clickable）

[javascript]view plaincopyprint? 
   
 $(document).ready(function(){ 
 $("div").click(function(){ 
 //gettheurlfromhrefattributeandlaunchtheurl 
 window.location=$(this).find("a").attr("href");returnfalse; 
 }); 
 //howtouse 
 <div><ahref="index.html">home</a></div> 
  
 }); 

18. id和class切换（Switch between classes or id’s when resizing the window）

[javascript]view plaincopyprint? 
   
 $(document).ready(function(){ 
 functioncheckWindowSize(){ 
 if($(window).width()>1200){ 
 $('body').addClass('large'); 
 } 
 else{ 
 $('body').removeClass('large'); 
 } 
 } 
 $(window).resize(checkWindowSize); 
 }); 

19. 克隆对象（Clone a object）

[javascript]view plaincopyprint? 
   
 $(document).ready(function(){ 
 varcloned=$('#id').clone(); 
 //howtouse 
 <divid="id"></div> 
  
 }); 

20. 使元素居中屏幕（Center an element on the screen）

[javascript]view plaincopyprint? 
   
 $(document).ready(function(){ 
 jQuery.fn.center=function(){ 
 this.css("position","absolute"); 
 this.css("top",($(window).height()-this.height())/2+$(window).scrollTop()+"px"); 
 this.css("left",($(window).width()-this.width())/2+$(window).scrollLeft()+"px"); 
 returnthis; 
 } 
 $("#id").center(); 
 }); 

21. 自定义选择器（Write our own selector）

[javascript]view plaincopyprint? 
   
 $(document).ready(function(){ 
 $.extend($.expr[':'],{ 
 moreThen1000px:function(a){ 
 return$(a).width()>1000; 
 } 
 }); 
 $('.box:moreThen1000px').click(function(){ 
 //creatingasimplejsalertbox 
 alert('Theelementthatyouhaveclickedisover1000pixelswide'); 
 }); 
 }); 

22. 统计元素个数（Count a element）

[javascript]view plaincopyprint? 
   
 $(document).ready(function(){ 
 $("p").size(); 
 }); 

23. 自定义Bullets（Use Your Own Bullets）

[javascript]view plaincopyprint? 
   
 $(document).ready(function(){ 
 $("ul").addClass("Replaced"); 
 $("ul>li").prepend("‒"); 
 //howtouse 
 ul.Replaced{list-style:none;} 
 }); 

24. 引用google分发的jQuery（Let Google host jQuery for you）

[javascript]view plaincopyprint? 
   
 //Example1 
 <scriptsrc="http://www.google.com/jsapi"></script> 
 <scripttype="text/javascript"> 
 google.load("jquery","1.2.6"); 
 google.setOnLoadCallback(function(){ 
 //dosomething 
 }); 
 </script><scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"type="text/javascript"></script> 
  
 //Example2:(thebestandfastestway) 
 <scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 

25. 禁用jQuery动画（Disable jQuery animations）

[javascript]view plaincopyprint? 
   
 $(document).ready(function(){ 
 jQuery.fx.off=true; 
 }); 

26. 防止不兼容冲突（No conflict-mode）

[javascript]view plaincopyprint? 
   
 $(document).ready(function(){ 
 var$jq=jQuery.noConflict(); 
 $jq('#id').show(); 
 }); 

jquery 速查表：

参考推荐：
jQuery
jQuery UI
14 days of jQuery
Learning jQuery
Cheatsheet jQuery 1.1.3
Improve your jQuery – 25 excellent tips