建站
咨詢
售后
建站咨詢
新聞中心
【經(jīng)典譯文】廣泛流行的jQuery是一個(gè)開源的，跨瀏覽器和兼容CSS 3的JavaScript庫，你可以用它簡(jiǎn)化你的JavaScript編碼任務(wù)和操作（添加，編輯和刪除）HTML內(nèi)容中的DOM元素，本文介紹10個(gè)在Visual Studio下使用jQuery的10個(gè)有用的技巧，希望對(duì)你有所幫助。
我們是成立于2013年的成都網(wǎng)站建設(shè)公司,提供網(wǎng)站建設(shè),電商網(wǎng)站設(shè)計(jì)開發(fā),成都外貿(mào)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)頁設(shè)計(jì),小程序開發(fā)、等服務(wù)。為客戶創(chuàng)造有價(jià)值的品牌營銷體驗(yàn)，讓互聯(lián)網(wǎng)提升企業(yè)的競(jìng)爭(zhēng)力！
你需要準(zhǔn)備些什么
為了在Visual Studio中順利使用jQuery，你需要安裝下面這些軟件：
Visual Studio 2008
Visual Studio 2008 SP1
jQuery庫
Visual Studio 2008 jQuery插件
或者直接使用Visual Studio 2010，因?yàn)樗呀?jīng)內(nèi)置支持jQuery了，如果你恰好在使用Visual Studio 2010，那么恭喜你，默認(rèn)已經(jīng)安裝有jQuery庫了。
在深入了解使用jQuery操作網(wǎng)頁中的DOM元素之前，我們先來看看jQuery的介紹和它的好處。
一些有用的jQuery技巧
jQuery最顯著的特點(diǎn)包括支持：
瀏覽器無關(guān)：jQuery支持絕大多數(shù)瀏覽器；
簡(jiǎn)化的事件處理模型：jQuery支持優(yōu)秀的，易于使用的，范式化的事件處理模型，大大減少了代碼量，jQuery事件處理模型在所有瀏覽器中都是一致的，事件對(duì)象是一個(gè)跨瀏覽器的標(biāo)準(zhǔn)化對(duì)象，事件對(duì)象總是作為一個(gè)參數(shù)傳遞給事件處理程序；
無縫擴(kuò)展：jQuery通過易于使用的插件API提供了擴(kuò)展支持，可以無縫擴(kuò)展jQuery核心庫。
下面開始介紹使用jQuery的一些技巧
1、使用jQuery預(yù)加載圖像
預(yù)加載圖像被認(rèn)為是一個(gè)最佳實(shí)踐，因?yàn)樗岣吡司W(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類非常簡(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)頁中的某個(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í)行，你可以使用鏈表方法來用它，下面的代碼就是一個(gè)例子：
- $('div1').removeClass('color').addClass('no-color');
10、使用jQuery操作選擇列表
jQuery讓使用選擇列表變得更容易，你可以從選擇列表中輕松地刪除一個(gè)列表項(xiàng)，具體方法如下：
- $("#employeeList option[value='9']").remove();
下面的代碼舉例說明了如何從選擇列表中以文本形式檢索一個(gè)選擇項(xiàng)：
- $('#employeeList :selected').text();
小結(jié)
jQuery是一個(gè)強(qiáng)大的JavaScript庫，簡(jiǎn)化了跨瀏覽器，客戶端腳本，事件處理，動(dòng)畫，DOM遍歷和Ajax開發(fā)工作，本文呈現(xiàn)的這10個(gè)jQuery相關(guān)的技巧可以幫助你用好它，歡迎你也共享一些有用的jQuery使用技巧。
新聞標(biāo)題：Visual Studio下使用jQuery的10個(gè)技巧
網(wǎng)站地址：http://m.5511xx.com/article/cojpiee.html
