jquery是一個非常優(yōu)秀的js框架,相信大部分人都用過,也都非常熟悉它的應(yīng)用,用起來也非常簡單,基本的操作也都不用說了。這里不在羅列jquery的api,總結(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ù)值為特殊情況時(值本身含有字符'&'): 例如 name=John&John2, data就變成了'name=John&John2&location=china' ,這時數(shù)據(jù)傳到后臺可能會得到不可預(yù)知的結(jié)果。
②正常情況下,也就是參數(shù)的值不帶有特殊字符 ‘&’,有時也會出現(xiàn)“參數(shù)接收不到或不完整”的情況,具體原因我也清楚,這個確實親身經(jīng)歷過,代碼什么的都沒有問題,到了后臺有個參數(shù)就是傳不過去,所以結(jié)論就是使用第二種寫法較好:data : {name:John, location:china},從來沒有出現(xiàn)過參數(shù)丟失的情況,而且容錯性也強(qiáng)。
2.async同步方式:true or false ?
①如果需要等待ajax的執(zhí)行結(jié)果,用false,否則永遠(yuǎn)得不到正確的結(jié)果。原因很簡單,如果不用false,代碼會直接往下執(zhí)行,這時ajax的值還沒返回過來,程序沒有按照想象的順序執(zhí)行,結(jié)果也就可想而知了。
②如果不需要等待ajax的執(zhí)行結(jié)果最好用true,因為采用“同步的方式”(async=false)時頁面會處于“假死”狀態(tài),用戶看起來就是“卡住”了, 特別是假死次數(shù)太多時,體驗不佳(ajax不要濫用,能在后臺做的工作就在后臺做,特別是一些初始化的工作)。
3.dataType:一般我們的返回值類型都是“json”,這個一定要寫,并且寫正確,(即便后臺指定了HTTP包MIME類型) 曾經(jīng)犯過一個錯誤,將返回值錯寫成“html”,結(jié)果總是取不到自己想要的值,最后將返回值一打印,發(fā)現(xiàn)是包含 HTTP信息的一大堆信息,好像就是一個頁面HTML代碼,這時想到(ajax本就是一個HTTP請求)。
4.總結(jié),要養(yǎng)成良好習(xí)慣,不管你的ajax多么簡單,這個5個最基本的參數(shù)都帶上,并且根據(jù)自己的情況將參數(shù)值寫正確。
二、小知識:
1.jquery選擇器返回的永遠(yuǎn)是個數(shù)組,也正因為如此,通過id選擇的元素不存在也不會報錯,但我們不能因為不報錯寫代碼時就可以隨意寫,如果不確定元素是否存在,取時最好還是要做“非空”判斷,示例:
if ($("#btn1").length > 0) {
//主體代碼
}
2.頁面上有多個id或者name一樣的元素時,如果取?一般是通過“相對路徑”來取,因為如果要取值,總要由一些“事件”觸發(fā),如果點擊了某個按鈕,那么就以此按鈕為出發(fā)點往上找或者往下找,常用的函數(shù):
parent : 取父節(jié)點元素
child : 取子節(jié)點元素
prev : 取兄弟節(jié)點(同級)的前一個
next : 取兄弟節(jié)點(同級)的前一個
一個例子:購物車展示頁面,一個table里很多組商品,每組可以單獨結(jié)算,也就是都有結(jié)算“按鈕”,而本組商品的某個位置度有個隱藏的元素,他們的name是一樣的,這時可以這么取值:
$(this).parents("tr").prev().find("td").find("input[name='activecode']").val();
意思為從結(jié)算按鈕前一行的某列中找到名字為activecode的元素的值,這里的“td”如果能確定的話后面還可以加上eq(索引值)。
3.取沒有id的元素(有時候有些元素是沒有id的,往往都是些list,如果自己的不好加或者不想加id,又或者不能加) 我遇到過這樣一種情況,頁面上有一個li集合,他們的值都來自定義好的集合A,手里有些數(shù)據(jù)A1也來自A,A1中的數(shù)據(jù)也能在頁面li中出現(xiàn),也可能沒有。需求是A1中的值,li集合中也同時出現(xiàn)的做些樣式調(diào)整,li中的任何元素都沒有id,只有外面的ul有id。在這種“極端條件下”,還有
最后的辦法,就是循環(huán)li,然后通過值相等判斷。(也就說只要遇到取值,就要有循環(huán),代碼寫出來非常臃腫,不過真沒有辦法了,也只能這樣)
$(li集合).each(function(){
//
主體代碼
});
更多信息請查看IT技術(shù)專欄