Visual Studio下使用jQuery的10個技巧
原創(chuàng)【51CTO經(jīng)典譯文】廣泛流行的jQuery是一個開源的，跨瀏覽器和兼容CSS 3的JavaScript庫，你可以用它簡化你的JavaScript編碼任務(wù)和操作（添加，編輯和刪除）HTML內(nèi)容中的DOM元素，本文介紹10個在Visual Studio下使用jQuery的10個有用的技巧，希望對你有所幫助。
你需要準(zhǔn)備些什么
為了在Visual Studio中順利使用jQuery，你需要安裝下面這些軟件：
Visual Studio 2008
Visual Studio 2008 SP1
jQuery庫
Visual Studio 2008 jQuery插件
或者直接使用Visual Studio 2010，因為它已經(jīng)內(nèi)置支持jQuery了，如果你恰好在使用Visual Studio 2010，那么恭喜你，默認(rèn)已經(jīng)安裝有jQuery庫了。
在深入了解使用jQuery操作網(wǎng)頁中的DOM元素之前，我們先來看看jQuery的介紹和它的好處。
一些有用的jQuery技巧
jQuery最顯著的特點包括支持：
瀏覽器無關(guān)：jQuery支持絕大多數(shù)瀏覽器；
簡化的事件處理模型：jQuery支持優(yōu)秀的，易于使用的，范式化的事件處理模型，大大減少了代碼量，jQuery事件處理模型在所有瀏覽器中都是一致的，事件對象是一個跨瀏覽器的標(biāo)準(zhǔn)化對象，事件對象總是作為一個參數(shù)傳遞給事件處理程序；
無縫擴展：jQuery通過易于使用的插件API提供了擴展支持，可以無縫擴展jQuery核心庫。
下面開始介紹使用jQuery的一些技巧
1、使用jQuery預(yù)加載圖像
預(yù)加載圖像被認(rèn)為是一個最佳實踐，因為它提高了網(wǎng)頁的渲染速度，下面的代碼顯示了jQuery預(yù)加載圖像的代碼片段：
- 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檢查網(wǎng)頁中的某個元素是否存在，下面是一個例子：
- if ($('img').length)
- {
- alert('Image elements available');
- }
- else
- {
- alert('Image elements not available');
- }
5、使用jQuery檢查瀏覽器類型
不同的瀏覽器執(zhí)行腳本的方法有點不一樣，但你可以使用jQuery輕松識別瀏覽器的類型，然后執(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元素，下面是一個例子：
- if( $("div.hidden").size)
- {
- alert('One or more divs are hidden');
- }
你也可以使用length()函數(shù)實現(xiàn)相同的結(jié)果，其實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給一個DOM元素賦值：
- $('#div1').data ('Key', 'Value');
如果要檢索保存在DOM元素中的數(shù)據(jù)，你可以使用下面的代碼：
- $('#div1').data ('Key');
8、檢索某個元素的父元素
使用jQuery檢查某個元素的父元素非常簡單，你需要做的就是像下面這樣調(diào)用closest()函數(shù)：
- var id = $("btnHello").closest("div").attr("id");
9、正確使用jQuery中的鏈表
鏈表（Chaining）是jQuery中的一個偉大功能，它促使鏈表中的行為被陸續(xù)執(zhí)行，你可以使用鏈表方法來用它，下面的代碼就是一個例子：
- $('div1').removeClass('color').addClass('no-color');
10、使用jQuery操作選擇列表
jQuery讓使用選擇列表變得更容易，你可以從選擇列表中輕松地刪除一個列表項，具體方法如下：
- $("#employeeList option[value='9']").remove();
下面的代碼舉例說明了如何從選擇列表中以文本形式檢索一個選擇項：
- $('#employeeList :selected').text();
小結(jié)
jQuery是一個強大的JavaScript庫，簡化了跨瀏覽器，客戶端腳本，事件處理，動畫，DOM遍歷和Ajax開發(fā)工作，本文呈現(xiàn)的這10個jQuery相關(guān)的技巧可以幫助你用好它，歡迎你也共享一些有用的jQuery使用技巧。
原文標(biāo)題：10 jQuery Tips and Tricks for Visual Studio
【編輯推薦】
