每個程式設計師都會的35個jQuery小技巧

1. 禁止右鍵點選

1. $(document).ready(function(){ 
2.     $(document).bind(“contextmenu”,function(e){ 
3.         return false; 
4.     }); 
5. }); 

2. 隱藏搜尋文字框文字

1. Hide when clicked in the search field, the value.(example can be found below in the comment fields) 
2.  
3. $(document).ready(function() { 
4. $(“input.text1”).val(“Enter your search text here”); 
5.    textFill($(`input.text1`)); 
6. }); 
7.  
8.     function textFill(input){ //input focus text function 
9.      var originalvalue = input.val(); 
10.      input.focus( function(){ 
11.           if( $.trim(input.val()) == originalvalue ){ input.val(“); } 
12.      }); 
13.      input.blur( function(){ 
14.           if( $.trim(input.val()) == “ ){ input.val(originalvalue); } 
15.      }); 
16. } 

3. 在新視窗中開啟連結

1. XHTML 1.0 Strict doesn’t allow this attribute in the code, so use this to keep the code valid. 
2.  
3. $(document).ready(function() { 
4.    //Example 1: Every link will open in a new window 
5.    $(`a[href^=”http://”]`).attr(“target”, “_blank”); 
6.  
7.    //Example 2: Links with the rel=”external” attribute will only open in a new window 
8.    $(`a[@rel$=`external`]`).click(function(){ 
9.       this.target = “_blank”; 
10.    }); 
11. }); 
12. // how to use 
13. <a href=“http://www.opensourcehunter.com” rel=external>open link</a> 

4. 檢測瀏覽器

1. 注: 在版本jQuery 1.4中，$.support 替換掉了$.browser 變數 
2.  
3. $(document).ready(function() { 
4. // Target Firefox 2 and above 
5. if ($.browser.mozilla && $.browser.version >= “1.8” ){ 
6.     // do something 
7. } 
8.  
9. // Target Safari 
10. if( $.browser.safari ){ 
11.     // do something 
12. } 
13.  
14. // Target Chrome 
15. if( $.browser.chrome){ 
16.     // do something 
17. } 
18.  
19. // Target Camino 
20. if( $.browser.camino){ 
21.     // do something 
22. } 
23.  
24. // Target Opera 
25. if( $.browser.opera){ 
26.     // do something 
27. } 
28.  
29. // Target IE6 and below 
30. if ($.browser.msie && $.browser.version <= 6 ){ 
31.     // do something 
32. } 
33.  
34. // Target anything above IE6 
35. if ($.browser.msie && $.browser.version > 6){ 
36.     // do something 
37. } 
38. }); 

5. 預載入圖片

1. This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images. 
2.  
3. $(document).ready(function() { 
4. jQuery.preloadImages = function() 
5. { 
6.   for(var i = 0; i<ARGUMENTS.LENGTH; jQuery(?<img { i++)>“).attr(“src”, arguments[i]); 
7.   } 
8. } 
9. // how to use 
10. $.preloadImages(“image1.jpg”); 
11. }); 

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. <LINK rel=stylesheet type=text/css href=“default.css”> 
9. // the links 
10. <A href=“#” rel=default.css>Default Theme</A> 
11. <A href=“#” rel=red.css>Red Theme</A> 
12. <A href=“#” rel=blue.css>Blue Theme</A> 
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. 返回頁面頂部功能

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

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. <A name=top></A> 
19. // the link 
20. <A href=“#top”>go to top</A> 
21. }); 

10. 獲得滑鼠指標XY值

Want to know where your mouse cursor is?

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. <DIV id=XY></DIV> 
8.  
9. }); 

11.返回頂部按鈕

你可以利用 animate 和 scrollTop 來實現返回頂部的動畫，而不需要使用其他外掛。

1. // Back to top 
2. $(`a.top`).click(function () { 
3.   $(document.body).animate({scrollTop: 0}, 800); 
4.   return false; 
5. }); 
6. <!– Create an anchor tag –> 
7. <a href=“#”>Back to top</a> 

改變 scrollTop 的值可以調整返回距離頂部的距離，而 animate 的第二個引數是執行返回動作需要的時間(單位：毫秒)。

12.預載入圖片

如果你的頁面中使用了很多不可見的圖片（如：hover 顯示），你可能需要預載入它們：

1. $.preloadImages = function () { 
2.   for (var i = 0; i < arguments.length; i++) { 
3.     $(`<img>`).attr(`src`, arguments[i]); 
4.   } 
5. }; 
6.  
7. $.preloadImages(`img/hover1.png`, `img/hover2.png`); 

13.檢查圖片是否載入完成

有時候你需要確保圖片完成載入完成以便執行後面的操作：

1. $(`img`).load(function () { 
2.   console.log(`image load successful`); 
3. }); 

你可以把 img 替換為其他的 ID 或者 class 來檢查指定圖片是否載入完成。

14.自動修改破損影像

如果你碰巧在你的網站上發現了破碎的影像連結，你可以用一個不易被替換的影像來代替它們。新增這個簡單的程式碼可以節省很多麻煩：

1. $(`img`).on(`error`, function () { 
2.   $(this).prop(`src`, `img/broken.png`); 
3. }); 

即使你的網站沒有破碎的影像連結，新增這段程式碼也沒有任何害處。

15.滑鼠懸停(hover)切換 class 屬性

假如當使用者滑鼠懸停在一個可點選的元素上時，你希望改變其效果，下面這段程式碼可以在其懸停在元素上時新增 class 屬性，當使用者滑鼠離開時，則自動取消該 class 屬性：

1. $(`.btn`).hover(function () { 
2.   $(this).addClass(`hover`); 
3.   }, function () { 
4.     $(this).removeClass(`hover`); 
5.   }); 

你只需要新增必要的CSS程式碼即可。如果你想要更簡潔的程式碼，可以使用 toggleClass 方法：

1. $(`.btn`).hover(function () { 
2.   $(this).toggleClass(`hover`); 
3. }); 

注：直接使用CSS實現該效果可能是更好的解決方案，但你仍然有必要知道該方法。

16.禁用 input 欄位

有時你可能需要禁用表單的 submit 按鈕或者某個 input 欄位，直到使用者執行了某些操作（例如，檢查“已閱讀條款”核取方塊）。可以新增 disabled 屬性，直到你想啟用它時：

$(`input[type=”submit”]`).prop(`disabled`, true);

你要做的就是執行 removeAttr 方法，並把要移除的屬性作為引數傳入：

$(`input[type=”submit”]`).removeAttr(`disabled`);

17.阻止連結載入

有時你不希望連結到某個頁面或者重新載入它，你可能希望它來做一些其他事情或者觸發一些其他指令碼，你可以這麼做：

1. $(`a.no-link`).click(function (e) { 
2.   e.preventDefault(); 
3. }); 

18.切換 fade/slide

fade 和 slide 是我們在 jQuery 中經常使用的動畫效果，它們可以使元素顯示效果更好。但是如果你希望元素顯示時使用第一種效果，而消失時使用第二種效果，則可以這麼做：

1. // Fade 
2. $(`.btn`).click(function () { 
3.   $(`.element`).fadeToggle(`slow`); 
4. }); 
5. // Toggle 
6. $(`.btn`).click(function () { 
7.   $(`.element`).slideToggle(`slow`); 
8. }); 

19.簡單的手風琴效果

這是一個實現手風琴效果快速簡單的方法：

1. // Close all panels 
2. $(`#accordion`).find(`.content`).hide(); 
3. // Accordion 
4. $(`#accordion`).find(`.accordion-header`).click(function () { 
5.   var next = $(this).next(); 
6.   next.slideToggle(`fast`); 
7.   $(`.content`).not(next).slideUp(`fast`); 
8.   return false; 
9. }); 

20.讓兩個 DIV 高度相同

有時你需要讓兩個 div 高度相同，而不管它們裡面的內容多少。可以使用下面的程式碼片段：

1. var $columns = $(`.column`); 
2. var height = 0; 
3. $columns.each(function () { 
4.   if ($(this).height() > height) { 
5.     height = $(this).height(); 
6.   } 
7. }); 
8. $columns.height(height); 

這段程式碼會迴圈一組元素，並設定它們的高度為元素中的最大高。

21. 驗證元素是否為空

1. This will allow you to check if an element is empty. 
2.  
3. $(document).ready(function() { 
4.   if ($(`#id`).html()) { 
5.    // do something 
6.    } 
7. }); 

22. 替換元素

1. $(document).ready(function() { 
2.    $(`#id`).replaceWith(` 
3. <DIV>I have been replaced</DIV> 
4.  
5. `); 
6. }); 

23. jQuery延時載入功能

1. $(document).ready(function() { 
2.    window.setTimeout(function() { 
3.      // do something 
4.    }, 1000); 
5. }); 

24. 移除單詞功能

1. $(document).ready(function() { 
2.    var el = $(`#id`); 
3.    el.html(el.html().replace(/word/ig, “”)); 
4. }); 

25. 驗證元素是否存在於jquery物件集合中

1. $(document).ready(function() { 
2.    if ($(`#id`).length) { 
3.   // do something 
4.   } 
5. }); 

26. 使整個DIV可點選

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. <DIV><A href=“index.html”>home</A></DIV> 
8.  
9. }); 

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

28. 克隆物件

1. $(document).ready(function() { 
2.    var cloned = $(`#id`).clone(); 
3. // how to use 
4. <DIV id=id></DIV> 
5.  
6. }); 

29. 使元素居螢幕中間位置

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

30. 寫自己的選擇器

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

31. 統計元素個數

1. $(document).ready(function() { 
2.    $(“p”).size(); 
3. }); 

32. 使用自己的 Bullets

1. $(document).ready(function() { 
2.    $(“ul”).addClass(“Replaced”); 
3.    $(“ul > li”).prepend(“‒ “); 
4. // how to use 
5. ul.Replaced { list-style : none; } 
6. }); 

33. 引用Google主機上的Jquery類庫

1. //Example 1 
2. <SCRIPT src=“http://www.google.com/jsapi”></SCRIPT> 
3. <SCRIPT type=text/javascript> 
4. google.load(“jquery”, “1.2.6”); 
5. google.setOnLoadCallback(function() { 
6.     // do something 
7. }); 
8. </SCRIPT><SCRIPT type=text/javascript src=“http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js”></SCRIPT> 
9.  
10. // Example 2:(the best and fastest way) 
11. <SCRIPT type=text/javascript src=“http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js”></SCRIPT> 

34. 禁用Jquery（動畫）效果

1. $(document).ready(function() { 
2.     jQuery.fx.off = true; 
3. }); 

35. 與其他Javascript類庫衝突解決方案

1. $(document).ready(function() { 
2.    var $jq = jQuery.noConflict(); 
3.    $jq(`#id`).show(); 
4. }); 

來源：51CTO