Visual Studio下使用jQuery的10個(gè)技巧
原創(chuàng)【51CTO經(jīng)典譯文】廣泛流行的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類(lèi)
在jQuery中添加和刪除CSS類(lèi)非常簡(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檢查瀏覽器類(lèi)型
不同的瀏覽器執(zhí)行腳本的方法有點(diǎn)不一樣，但你可以使用jQuery輕松識(shí)別瀏覽器的類(lèi)型，然后執(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)畫(huà)，DOM遍歷和Ajax開(kāi)發(fā)工作，本文呈現(xiàn)的這10個(gè)jQuery相關(guān)的技巧可以幫助你用好它，歡迎你也共享一些有用的jQuery使用技巧。
原文標(biāo)題：10 jQuery Tips and Tricks for Visual Studio
【編輯推薦】
