Visual Studio下使用jQuery的10個技巧

　　普遍流行的jQuery是一個開源的，跨瀏覽器和兼容CSS 3的JavaScript庫，你能夠用它簡化你的JavaScript編碼任務和操做（添加，編輯和刪除）HTML內容中的DOM元素，本文介紹10個在Visual Studio下使用jQuery的10個有用的技巧，但願對你有所幫助。

　　你須要準備些什麼

　　爲了在Visual Studio中順利使用jQuery，你須要安裝下面這些軟件：

　　Visual Studio 2008

　　Visual Studio 2008 SP1

　　jQuery庫

　　Visual Studio 2008 jQuery插件

　　或者直接使用Visual Studio 2010，由於它已經內置支持jQuery了，若是你剛好在使用Visual Studio 2010，那麼恭喜你，默認已經安裝有jQuery庫了。

　　在深刻了解使用jQuery操做網頁中的DOM元素以前，咱們先來看看jQuery的介紹和它的好處。

　　一些有用的jQuery技巧

　　jQuery最顯著的特色包括支持：

　　瀏覽器無關：jQuery支持絕大多數瀏覽器；

　　簡化的事件處理模型：jQuery支持優秀的，易於使用的，範式化的事件處理模型，大大減小了代碼量，jQuery事件處理模型在全部瀏覽器中都是一致的，事件對象是一個跨瀏覽器的標準化對象，事件對象老是做爲一個參數傳遞給事件處理程序；

　　無縫擴展：jQuery經過易於使用的插件API提供了擴展支持，能夠無縫擴展jQuery核心庫。

　　下面開始介紹使用jQuery的一些技巧

　　一、使用jQuery預加載圖像

　　預加載圖像被認爲是一個最佳實踐，由於它提升了網頁的渲染速度，下面的代碼顯示了jQuery預加載圖像的代碼片斷：

1. jQuery.preloadImages =function()  
   2. {  
   3.   for(var x =0; x").attr("src", arguments[x]);  
   4. }}; 

　　二、使用jQuery禁用上下文菜單

　　下面的代碼舉例說明了如何使用jQuery禁用上下文菜單：

1. $(document).ready(function(){  
   2.     $(document).bind("contextmenu",function(e){  
   3.         returnfalse;  
   4.     });  
   5. }); 

　　三、在jQuery中添加和刪除CSS類

　　在jQuery中添加和刪除CSS類很是簡單：

1. //To add a css class, you can use the following piece of code  
2. if($(id).hasClass('testClass'))  
   3. {  
   4.  $('#div1').addClass('testclass');    
   5. }  
   6.  
   7. //To remove a css class, you can use the following piece of code  
8. if($(id).hasClass('testClass'))  
   9. {  
  10.  $('#div1').removeClass('testclass');    
  11. } 

　　四、檢查某個元素是否可用

　　你可使用jQuery檢查網頁中的某個元素是否存在，下面是一個例子：

1. if ($('img').length)   
   2. {    
   3.     alert('Image elements available');    
   4. }   
   5. else   
   6. {    
   7.     alert('Image elements not available');    
   8. } 

　　五、使用jQuery檢查瀏覽器類型

　　不一樣的瀏覽器執行腳本的方法有點不同，但你可使用jQuery輕鬆識別瀏覽器的類型，而後執行相應的自定義代碼，下面是用jQuery檢查瀏覽器的代碼片斷：

1. if (jQuery.browser.mozilla)   
   2. {  
   3.     // Code to execute if browser is Mozilla  
4. }  
   5. if (jQuery.browser.msie)   
   6. {  
   7.     // Code to execute if browser is IE  
8. }  
   9.    
  10. if (jQuery.browser.safari)   
  11. {  
  12.     // Code to execute if browser is Safari  
13. }  
  14. if (jQuery.browser.opera)   
  15. {  
  16.     // Code to execute if browser is Opera  
17. } 

　　六、使用jQuery發現隱藏的元素

　　你可使用size()檢查隱藏的DOM元素，下面是一個例子：

1. if( $("div.hidden").size)  
   2. {  
   3.   alert('One or more divs are hidden');  
   4. } 

　　你也可使用length()函數實現相同的結果，其實size()函數也調用的是length()函數，所以length()函數更快。

1. if( $("div.hidden").length )  
   2. {  
   3.   alert('One or more divs are hidden');  
   4. } 

　　七、在DOM中保存數據

　　你可使用Data()函數在DOM元素中保存數據，下面的代碼片斷顯示瞭如何使用jQuery給一個DOM元素賦值：

1. $('#div1').data ('Key', 'Value'); 

　　若是要檢索保存在DOM元素中的數據，你可使用下面的代碼：

$('#div1').data ('Key'); 

　　八、檢索某個元素的父元素

　　使用jQuery檢查某個元素的父元素很是簡單，你須要作的就是像下面這樣調用closest()函數：

1. var id = $("btnHello").closest("div").attr("id"); 

　　九、正確使用jQuery中的鏈表

　　鏈表（Chaining）是jQuery中的一個偉大功能，它促使鏈表中的行爲被陸續執行，你可使用鏈表方法來用它，下面的代碼就是一個例子：

1. $('div1').removeClass('color').addClass('no-color'); 

　　十、使用jQuery操做選擇列表

　　jQuery讓使用選擇列表變得更容易，你能夠從選擇列表中輕鬆地刪除一個列表項，具體方法以下：

1. $("#employeeList option[value='9']").remove(); 

　　下面的代碼舉例說明了如何從選擇列表中以文本形式檢索一個選擇項：

1. $('#employeeList :selected').text(); 

　　小結

　　jQuery是一個強大的JavaScript庫，簡化了跨瀏覽器，客戶端腳本，事件處理，動畫，DOM遍歷和Ajax開發工做，本文呈現的這10個jQuery相關的技巧能夠幫助你用好它，歡迎你也共享一些有用的jQuery使用技巧。

聲明：此博有部份內容爲轉載，版權歸原做者全部～