jquery使用注意點(diǎn)以及建議
來源:易賢網(wǎng) 閱讀:1008 次 日期:2014-10-15 16:04:20
溫馨提示:易賢網(wǎng)小編為您整理了“jquery使用注意點(diǎn)以及建議”,方便廣大網(wǎng)友查閱!

jquery是一個(gè)非常優(yōu)秀的js框架,相信大部分人都用過,也都非常熟悉它的應(yīng)用,用起來也非常簡(jiǎn)單,基本的操作也都不用說了。這里不在羅列jquery的api,總結(jié)下需要注意的點(diǎn),都是平時(shí)容易犯錯(cuò)誤的地方,分享下,感覺還有比較有價(jià)值的,具體內(nèi)容如下:

一、ajax相關(guān):

$.ajax({

type : "post",

url : "XXX.action",

//data : 'name=John&location=china'

data : {name:John, location:china},

dataType : "json",

async : false,

success : function(data) {

}

});

1.data兩種參數(shù)的用法區(qū)別

①一種時(shí)參數(shù)值為特殊情況時(shí)(值本身含有字符'&'): 例如 name=John&John2, data就變成了'name=John&John2&location=china' ,這時(shí)數(shù)據(jù)傳到后臺(tái)可能會(huì)得到不可預(yù)知的結(jié)果。

②正常情況下,也就是參數(shù)的值不帶有特殊字符 ‘&’,有時(shí)也會(huì)出現(xiàn)“參數(shù)接收不到或不完整”的情況,具體原因我也清楚,這個(gè)確實(shí)親身經(jīng)歷過,代碼什么的都沒有問題,到了后臺(tái)有個(gè)參數(shù)就是傳不過去,所以結(jié)論就是使用第二種寫法較好:data : {name:John, location:china},從來沒有出現(xiàn)過參數(shù)丟失的情況,而且容錯(cuò)性也強(qiáng)。

2.async同步方式:true or false ?

①如果需要等待ajax的執(zhí)行結(jié)果,用false,否則永遠(yuǎn)得不到正確的結(jié)果。原因很簡(jiǎn)單,如果不用false,代碼會(huì)直接往下執(zhí)行,這時(shí)ajax的值還沒返回過來,程序沒有按照想象的順序執(zhí)行,結(jié)果也就可想而知了。

②如果不需要等待ajax的執(zhí)行結(jié)果最好用true,因?yàn)椴捎谩巴降姆绞健?async=false)時(shí)頁(yè)面會(huì)處于“假死”狀態(tài),用戶看起來就是“卡住”了, 特別是假死次數(shù)太多時(shí),體驗(yàn)不佳(ajax不要濫用,能在后臺(tái)做的工作就在后臺(tái)做,特別是一些初始化的工作)。

3.dataType:一般我們的返回值類型都是“json”,這個(gè)一定要寫,并且寫正確,(即便后臺(tái)指定了HTTP包MIME類型) 曾經(jīng)犯過一個(gè)錯(cuò)誤,將返回值錯(cuò)寫成“html”,結(jié)果總是取不到自己想要的值,最后將返回值一打印,發(fā)現(xiàn)是包含 HTTP信息的一大堆信息,好像就是一個(gè)頁(yè)面HTML代碼,這時(shí)想到(ajax本就是一個(gè)HTTP請(qǐng)求)。

4.總結(jié),要養(yǎng)成良好習(xí)慣,不管你的ajax多么簡(jiǎn)單,這個(gè)5個(gè)最基本的參數(shù)都帶上,并且根據(jù)自己的情況將參數(shù)值寫正確。

二、小知識(shí):

1.jquery選擇器返回的永遠(yuǎn)是個(gè)數(shù)組,也正因?yàn)槿绱?,通過id選擇的元素不存在也不會(huì)報(bào)錯(cuò),但我們不能因?yàn)椴粓?bào)錯(cuò)寫代碼時(shí)就可以隨意寫,如果不確定元素是否存在,取時(shí)最好還是要做“非空”判斷,示例:

if ($("#btn1").length > 0) {

//主體代碼

}

2.頁(yè)面上有多個(gè)id或者name一樣的元素時(shí),如果取?一般是通過“相對(duì)路徑”來取,因?yàn)槿绻≈担傄梢恍笆录庇|發(fā),如果點(diǎn)擊了某個(gè)按鈕,那么就以此按鈕為出發(fā)點(diǎn)往上找或者往下找,常用的函數(shù):

parent : 取父節(jié)點(diǎn)元素

child : 取子節(jié)點(diǎn)元素

prev : 取兄弟節(jié)點(diǎn)(同級(jí))的前一個(gè)

next : 取兄弟節(jié)點(diǎn)(同級(jí))的前一個(gè)

一個(gè)例子:購(gòu)物車展示頁(yè)面,一個(gè)table里很多組商品,每組可以單獨(dú)結(jié)算,也就是都有結(jié)算“按鈕”,而本組商品的某個(gè)位置度有個(gè)隱藏的元素,他們的name是一樣的,這時(shí)可以這么取值:

$(this).parents("tr").prev().find("td").find("input[name='activecode']").val();

意思為從結(jié)算按鈕前一行的某列中找到名字為activecode的元素的值,這里的“td”如果能確定的話后面還可以加上eq(索引值)。

3.取沒有id的元素(有時(shí)候有些元素是沒有id的,往往都是些list,如果自己的不好加或者不想加id,又或者不能加) 我遇到過這樣一種情況,頁(yè)面上有一個(gè)li集合,他們的值都來自定義好的集合A,手里有些數(shù)據(jù)A1也來自A,A1中的數(shù)據(jù)也能在頁(yè)面li中出現(xiàn),也可能沒有。需求是A1中的值,li集合中也同時(shí)出現(xiàn)的做些樣式調(diào)整,li中的任何元素都沒有id,只有外面的ul有id。在這種“極端條件下”,還有

最后的辦法,就是循環(huán)li,然后通過值相等判斷。(也就說只要遇到取值,就要有循環(huán),代碼寫出來非常臃腫,不過真沒有辦法了,也只能這樣)

$(li集合).each(function(){

//

主體代碼

});

更多信息請(qǐng)查看IT技術(shù)專欄

更多信息請(qǐng)查看腳本欄目
易賢網(wǎng)手機(jī)網(wǎng)站地址:jquery使用注意點(diǎn)以及建議
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國(guó)考·省考課程試聽報(bào)名

  • 報(bào)班類型
  • 姓名
  • 手機(jī)號(hào)
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢 | 簡(jiǎn)要咨詢須知 | 新媒體/短視頻平臺(tái) | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號(hào):hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專用圖標(biāo)