常见26个jquery运用技巧详

本文列出jquery一些应用小技巧，比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他 Javascript类库冲突问题。

请看下文jquery技巧：

1. 禁止右键点击
1.       $(document).ready(function(){  
2.           $(document).bind("contextmenu",function(e){  
3.               return false;  
4.           });  
5.       }); 
2. 隐藏搜索文本框文字
1.       $(document).ready(function() {  
2.       $("input.text1").val("Enter your search text here");  
3.          textFill($('input.text1'));  
4.       });  
5.        
6.           function textFill(input){ //input focus text function  
7.           var originalvalue = input.val();  
8.           input.focus( function(){  
9.               if( $.trim(input.val()) == originalvalue ){ input.val(''); }  
10.       });  
11.       input.blur( function(){  
12.           if( $.trim(input.val()) == '' ){ input.val(originalvalue); }  
13.       });  
14.   } 
3. 在新窗口中打开链接
1.       $(document).ready(function() {  
2.          //Example 1: Every link will open in a new window  
3.          $('a[href^="http://"]').attr("target", "_blank");  
4.        
5.          //Example 2: Links with the rel="external" attribute will only open in a new window  
6.          $('a[@rel$='external']').click(function(){  
7.             this.target = "_blank";  
8.          });  
9.       });  
10.   // how to use  
11.   open link 

4. 检测浏览器注: 在版本jQuery 1.4中，$.support 替换掉了$.browser 变量。

1.       $(document).ready(function() {  
2.       // Target Firefox 2 and above  
3.       if ($.browser.mozilla && $.browser.version >= "1.8" ){  
4.           // do something  
5.       }  
6.        
7.       // Target Safari  
8.       if( $.browser.safari ){  
9.           // do something  
10.   }  
11.    
12.   // Target Chrome  
13.   if( $.browser.chrome){  
14.       // do something  
15.   }  
16.    
17.   // Target Camino  
18.   if( $.browser.camino){  
19.       // do something  
20.   }  
21.    
22.   // Target Opera  
23.   if( $.browser.opera){  
24.       // do something  
25.   }  
26.    
27.   // Target IE6 and below  
28.   if ($.browser.msie && $.browser.version <= 6 ){  
29.       // do something  
30.   }  
31.    
32.   // Target anything above IE6  
33.   if ($.browser.msie && $.browser.version > 6){  
34.       // do something  
35.   }  
36.   }); 
5. 预加载图片
1.       $(document).ready(function() {  
2.          jQuery.preloadImages = function()  
3.         {  
4.            for(var i = 0; i").attr("src", arguments[i]); 
5.         } 
6.       }; 
7.       // how to use 
8.       $.preloadImages("image1.jpg");  
9.       }); 
6. 页面样式切换
1.       $(document).ready(function() {  
2.           $("a.Styleswitcher").click(function() {  
3.               //swicth the LINK REL attribute with the value in A REL attribute  
4.               $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));  
5.           });  
6.       // how to use  
7.       // place this in your header  
8.         
9.       // the links  
10.   Default Theme  
11.   Red Theme  
12.   Blue Theme  
13.   }); 
7. 列高度相同如果使用了两个CSS列，使用此种方式可以是两列的高度相同。

1.       $(document).ready(function() {  
2.       function equalHeight(group) {  
3.           tallest = 0;  
4.           group.each(function() {  
5.               thisHeight = $(this).height();  
6.               if(thisHeight > tallest) {  
7.                   tallest = thisHeight;  
8.               }  
9.           });  
10.       group.height(tallest);  
11.   }  
12.   // how to use  
13.   $(document).ready(function() {  
14.       equalHeight($(".left"));  
15.       equalHeight($(".right"));  
16.   });  
17.   }); 
8. 动态控制页面字体大小用户可以改变页面字体大小

1.       $(document).ready(function() {  
2.         // Reset the font size(back to default)  
3.         var originalFontSize = $('html').css('font-size');  
4.           $(".resetFont").click(function(){  
5.           $('html').css('font-size', originalFontSize);  
6.         });  
7.         // Increase the font size(bigger font0  
8.         $(".increaseFont").click(function(){  
9.           var currentFontSize = $('html').css('font-size');  
10.       var currentFontSizeNum = parseFloat(currentFontSize, 10);  
11.       var newFontSize = currentFontSizeNum*1.2;  
12.       $('html').css('font-size', newFontSize);  
13.       return false;  
14.     });  
15.     // Decrease the font size(smaller font)  
16.     $(".decreaseFont").click(function(){  
17.       var currentFontSize = $('html').css('font-size');  
18.       var currentFontSizeNum = parseFloat(currentFontSize, 10);  
19.       var newFontSize = currentFontSizeNum*0.8;  
20.       $('html').css('font-size', newFontSize);  
21.       return false;  
22.     });  
23.   }); 

9. 返回页面顶部功能
1.       $(document).ready(function() {  
2.       $('a[href*=#]').click(function() {  
3.        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')  
4.        && location.hostname == this.hostname) {  
5.          var $target = $(this.hash);  
6.          $target = $target.length && $target  
7.          || $('[name=' + this.hash.slice(1) +']');  
8.          if ($target.length) {  
9.         var targetOffset = $target.offset().top;  
10.     $('html,body')  
11.     .animate({scrollTop: targetOffset}, 900);  
12.       return false;  
13.      }  
14.     }  
15.     });  
16.   // how to use  
17.   // place this where you want to scroll to  
18.     
19.   // the link  
20.   go to top  
21.   }); 
11.获得鼠标指针ＸＹ值
1.       $(document).ready(function() {  
2.          $().mousemove(function(e){  
3.            //display the x and y axis values inside the div with the id XY  
4.           $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);  
5.         });  
6.       // how to use  
7.      
  
8.        
9.       }); 
12. 验证元素是否为空
1.       $(document).ready(function() {  
2.         if ($('#id').html()) {  
3.          // do something  
4.          }  
5.       }); 
13. 替换元素
1.       $(document).ready(function() {  
2.          $('#id').replaceWith(' 
3.      
I have been replaced
 
4.       
5.       ');  
6.       }); 
14. jQuery延时加载功能
1.       $(document).ready(function() {  
2.          window.setTimeout(function() {  
3.            // do something  
4.          }, 1000);  
5.       }); 
15. 移除单词功能
1.       $(document).ready(function() {  
2.          var el = $('#id');  
3.          el.html(el.html().replace(/word/ig, ""));  
4.       }); 
16. 验证元素是否存在于Ｊｑｕｅｒｙ对象集合中
1.       $(document).ready(function() {  
2.          if ($('#id').length) {  
3.         // do something  
4.         }  
5.       }); 
17. 使整个ＤＩＶ可点击
1.       $(document).ready(function() {  
2.           $("div").click(function(){  
3.             //get the url from href attribute and launch the url  
4.             window.location=$(this).find("a").attr("href"); return false;  
5.           });  
6.       // how to use  
7.      
home
  
8.        
9.       }); 
18.ID与Class之间转换当改变Window大小时，在ID与Class之间切换
1.       $(document).ready(function() {  
2.          function checkWindowSize() {  
3.           if ( $(window).width() > 1200 ) {  
4.               $('body').addClass('large');  
5.           }  
6.           else {  
7.               $('body').removeClass('large');  
8.           }  
9.          }  
10.   $(window).resize(checkWindowSize);  
11.   }); 

19. 克隆对象
1.       $(document).ready(function() {  
2.          var cloned = $('#id').clone();  
3.       // how to use  
4.      
  
5.        
6.       }); 
20. 使元素居屏幕中间位置
1.       $(document).ready(function() {  
2.         jQuery.fn.center = function () {  
3.             this.css("position","absolute");  
4.             this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");  
5.             this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");  
6.             return this;  
7.         }  
8.         $("#id").center();  
9.       }); 
21. 写自己的选择器
1.       $(document).ready(function() {  
2.          $.extend($.expr[':'], {  
3.              moreThen1000px: function(a) {  
4.                  return $(a).width() > 1000;  
5.             }  
6.          });  
7.         $('.box:moreThen1000px').click(function() {  
8.             // creating a simple js alert box  
9.             alert('The element that you have clicked is over 1000 pixels wide');  
10.     });  
11.   }); 
22. 统计元素个数
1.       $(document).ready(function() {  
2.          $("p").size();  
3.       }); 
23. 使用自己的 Bullets
1.       $(document).ready(function() {  
2.          $("ul").addClass("Replaced");  
3.          $("ul > li").prepend("? ");  
4.        // how to use  
5.        ul.Replaced { list-style : none; }  
6.       }); 
24. 引用Google主机上的Jquery类库Let Google host the jQuery script for you. This can be done in 2 ways.


1.       //Example 1  
2.         
3.         
9.        
10.    // Example 2:(the best and fastest way)  
11.    
 25. 禁用Jquery（动画）效果
1.       $(document).ready(function() {  
2.           jQuery.fx.off = true;  
3.       }); 
26. 与其他Javascript类库冲突解决方案
1.       $(document).ready(function() {  
2.          var $jq = jQuery.noConflict();  
3.          $jq('#id').show();  
4.       });