Visual Studio下使用jQuery的10個技巧

【51CTO經典譯文】廣泛流行的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的一些技巧

1、使用jQuery預先載入映像

預先載入映像被認為是一個最佳實務，因為它提高了網頁的渲染速度，下面的代碼顯示了jQuery預先載入映像的程式碼片段：

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

2、使用jQuery禁用操作功能表

下面的代碼舉例說明了如何使用jQuery禁用操作功能表：

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

3、在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. } 

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

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

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

5、使用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. } 

6、使用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. } 

7、在DOM中儲存資料

你可以使用Data()函數在DOM元素中儲存資料，下面的程式碼片段顯示了如何使用jQuery給一個DOM元素賦值：

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

如果要檢索儲存在DOM元素中的資料，你可以使用下面的代碼：

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

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

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

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

9、正確使用jQuery中的鏈表

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

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

10、使用jQuery操作挑選清單

jQuery讓使用挑選清單變得更容易，你可以從挑選清單中輕鬆地刪除一個清單項目，具體方法如下：

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

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

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

小結

jQuery是一個強大的JavaScript庫，簡化了跨瀏覽器，用戶端指令碼，事件處理，動畫，DOM遍曆和Ajax開發工作，本文呈現的這10個jQuery相關的技巧可以協助你用好它，歡迎你也共用一些有用的jQuery提示。

原文標題：10 jQuery Tips and Tricks for Visual Studio