廣泛流行的jQuery是一個(gè)開(kāi)源的，跨瀏覽器和兼容CSS 3的JavaScript庫(kù)，你可以用它簡(jiǎn)化你的JavaScript編碼任務(wù)和操作（添加，編輯和刪除）HTML內(nèi)容中的DOM元素，本文介紹10個(gè)在 Visual Studio下使用jQuery的10個(gè)有用的技巧，希望對(duì)你有所幫助。

你需要準(zhǔn)備些什么

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

● Visual Studio 2008

● Visual Studio 2008 SP1

● jQuery庫(kù)

● Visual Studio 2008 jQuery插件

或者直接使用Visual Studio 2010，因?yàn)樗呀?jīng)內(nèi)置支持jQuery了，如果你恰好在使用Visual Studio 2010，那么恭喜你，默認(rèn)已經(jīng)安裝有jQuery庫(kù)了。

在深入了解使用jQuery操作網(wǎng)頁(yè)中的DOM元素之前，我們先來(lái)看看jQuery的介紹和它的好處。

一些有用的jQuery技巧

jQuery最顯著的特點(diǎn)包括支持：

● 瀏覽器無(wú)關(guān)：jQuery支持絕大多數(shù)瀏覽器；

● 簡(jiǎn)化的事件處理模型：jQuery支持優(yōu)秀的，易于使用的，范式化的事件處理模型，大大減少了代碼量，jQuery事件處理模型在所有瀏覽器中都是一致的，事件對(duì)象是一個(gè)跨瀏覽器的標(biāo)準(zhǔn)化對(duì)象，事件對(duì)象總是作為一個(gè)參數(shù)傳遞給事件處理程序；

● 無(wú)縫擴(kuò)展：jQuery通過(guò)易于使用的插件API提供了擴(kuò)展支持，可以無(wú)縫擴(kuò)展jQuery核心庫(kù)。

下面開(kāi)始介紹使用jQuery的一些技巧

1. 使用jQuery預(yù)加載圖像

預(yù)加載圖像被認(rèn)為是一個(gè)最佳實(shí)踐，因?yàn)樗岣吡司W(wǎng)頁(yè)的渲染速度，下面的代碼顯示了jQuery預(yù)加載圖像的代碼片段：

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

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

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

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

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

在jQuery中添加和刪除CSS類非常簡(jiǎn)單：

    
//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、檢查某個(gè)元素是否可用

你可以使用jQuery檢查網(wǎng)頁(yè)中的某個(gè)元素是否存在，下面是一個(gè)例子：

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

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

不同的瀏覽器執(zhí)行腳本的方法有點(diǎn)不一樣，但你可以使用jQuery輕松識(shí)別瀏覽器的類型，然后執(zhí)行相應(yīng)的自定義代碼，下面是用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發(fā)現(xiàn)隱藏的元素

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

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

你也可以使用length()函數(shù)實(shí)現(xiàn)相同的結(jié)果，其實(shí)size()函數(shù)也調(diào)用的是length()函數(shù)，因此length()函數(shù)更快。

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

7、在DOM中保存數(shù)據(jù)

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

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

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

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

8. 檢索某個(gè)元素的父元素

使用jQuery檢查某個(gè)元素的父元素非常簡(jiǎn)單，你需要做的就是像下面這樣調(diào)用closest()函數(shù)：

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

9、正確使用jQuery中的鏈表

鏈表（Chaining）是jQuery中的一個(gè)偉大功能，它促使鏈表中的行為被陸續(xù)執(zhí)行，你可以使用鏈表方法來(lái)用它，下面的代碼就是一個(gè)例子：

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

10、使用jQuery操作選擇列表

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

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

下面的代碼舉例說(shuō)明了如何從選擇列表中以文本形式檢索一個(gè)選擇項(xiàng)：

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

小結(jié)

jQuery是一個(gè)強(qiáng)大的JavaScript庫(kù)，簡(jiǎn)化了跨瀏覽器，客戶端腳本，事件處理，動(dòng)畫，DOM遍歷和Ajax開(kāi)發(fā)工作，本文呈現(xiàn)的這10個(gè)jQuery相關(guān)的技巧可以幫助你用好它，歡迎你也共享一些有用的jQuery使用技巧。

原文鏈接：10 jQuery Tips and Tricks for Visual Studio

譯文鏈接：http://developer.51cto.com/art/201011/235795.htm