【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預加載圖像的代碼片段：

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

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

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

$(document).ready(function(){  
    $(document).bind("contextmenu",function(e){  
        return false;  
    });  
}); 

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

在jQuery中添加和刪除CSS類非常簡單：

//To add a css class, you can use the following piece of code  
if($(id).hasClass('testClass'))  
{  
 $('#div1').addClass('testclass');    
}  
 
//To remove a css class, you can use the following piece of code  
if($(id).hasClass('testClass'))  
{  
 $('#div1').removeClass('testclass');    
} 

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

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

if ($('img').length)   
{    
    alert('Image elements available');    
}   
else   
{    
    alert('Image elements not available');    
} 

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

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

if (jQuery.browser.mozilla)   
{  
    // Code to execute if browser is Mozilla  
}  
if (jQuery.browser.msie)   
{  
    // Code to execute if browser is IE  
}  
   
if (jQuery.browser.safari)   
{  
    // Code to execute if browser is Safari  
}  
if (jQuery.browser.opera)   
{  
    // Code to execute if browser is Opera  
} 

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

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

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

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

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

7、在DOM中保存數據

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

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

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

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

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

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

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

9、正確使用jQuery中的鏈表

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

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

10、使用jQuery操作選擇列表

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

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

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

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

小結

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

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

【編輯推薦】 

1. Visual Studio自定義調整窗體的兩個小技巧
2. Visual Studio 2010中關于C#的幾點改進
3. Visual Studio 2010及.Net 4新功能一覽
4. 提高效率 用好Visual Studio 2010自定義代碼段