26個Jquery使用小技巧(jQuery tips, tricks & solutions)

前段時間釋出了Jquery類庫1.4版本，使用者也越來越多，為了友善大家對Jquery的使用，下面列出了一些Jquery使用技巧。比如有禁止右鍵點選、隐藏搜尋文本框文字、在新視窗中打開連結、檢測浏覽器、預加載圖檔、頁面樣式切換、所有列等高、動态控制頁面字型大小、獲得滑鼠指針的X值Y值、驗證元素是否為空、替換元素、延遲加載、驗證元素是否存在于Jquery集合中、使DIV可點選、克隆對象、使元素居中、計算元素個數、使用Google主機上的Jquery類庫、禁用Jquery效果、解決Jquery類庫與其他Javascript類庫沖突問題。

具體如下：

<b>1. 禁止右鍵點選</b>

1.       $(document).ready(function(){   

2.           $(document).bind("contextmenu",function(e){   

3.               return false;   

4.           });   

5.       });  

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.   }  

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.   &lt;A href="http://www.opensourcehunter.com" rel=external&gt;open link&lt;/A&gt;  

<b>4. 檢測浏覽器</b>

注: 在版本jQuery 1.4中，$.support 替換掉了$.browser 變量。

2.       // Target Firefox 2 and above   

3.       if ($.browser.mozilla &amp;&amp; $.browser.version &gt;= "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 &amp;&amp; $.browser.version &lt;= 6 ){   

29.       // do something   

30.   }   

31.     

32.   // Target anything above IE6   

33.   if ($.browser.msie &amp;&amp; $.browser.version &gt; 6){   

34.       // do something   

35.   }   

36.   });  

<b>5. 預加載圖檔</b>

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.       });  

本文轉自 靈動生活 51CTO部落格，原文連結：http://blog.51cto.com/smartlife/279231，如需轉載請自行聯系原作者