萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jquery使用注意點以及建議

jquery使用注意點以及建議

   jquery是一個非常優秀的js框架,相信大部分人都用過,也都非常熟悉它的應用,用起來也非常簡單,基本的操作也都不用說了。這裡不在羅列jquery的api,總結下需要注意的點,都是平時容易犯錯誤的地方,分享下,感覺還有比較有價值的,具體內容如下:

  一、ajax相關:

  復制代碼

  $.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兩種參數的用法區別

  ①一種時參數值為特殊情況時(值本身含有字符'&'): 例如 name=John&John2, data就變成了'name=John&John2&location=china' ,這時數據傳到後台可能會得到不可預知的結果。

  ②正常情況下,也就是參數的值不帶有特殊字符 ‘&’,有時也會出現“參數接收不到或不完整”的情況,具體原因我也清楚,這個確實親身經歷過,代碼什麼的都沒有問題,到了後台有個參數就是傳不過去,所以結論就是使用第二種寫法較好:data : {name:John, location:china},從來沒有出現過參數丟失的情況,而且容錯性也強。

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

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

  ②如果不需要等待ajax的執行結果最好用true,因為采用“同步的方式”(async=false)時頁面會處於“假死”狀態,用戶看起來就是“卡住”了, 特別是假死次數太多時,體驗不佳(ajax不要濫用,能在後台做的工作就在後台做,特別是一些初始化的工作)。

  3.dataType:一般我們的返回值類型都是“json”,這個一定要寫,並且寫正確,(即便後台指定了HTTP包MIME類型) 曾經犯過一個錯誤,將返回值錯寫成“html”,結果總是取不到自己想要的值,最後將返回值一打印,發現是包含 HTTP信息的一大堆信息,好像就是一個頁面HTML代碼,這時想到(ajax本就是一個HTTP請求)。

  4.總結,要養成良好習慣,不管你的ajax多麼簡單,這個5個最基本的參數都帶上,並且根據自己的情況將參數值寫正確。

  二、小知識:

  1.jquery選擇器返回的永遠是個數組,也正因為如此,通過id選擇的元素不存在也不會報錯,但我們不能因為不報錯寫代碼時就可以隨意寫,如果不確定元素是否存在,取時最好還是要做“非空”判斷,示例:

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

  //主體代碼

  }

  2.頁面上有多個id或者name一樣的元素時,如果取?一般是通過“相對路徑”來取,因為如果要取值,總要由一些“事件”觸發,如果點擊了某個按鈕,那麼就以此按鈕為出發點往上找或者往下找,常用的函數:

  parent : 取父節點元素

  child : 取子節點元素

  prev : 取兄弟節點(同級)的前一個

  next : 取兄弟節點(同級)的前一個

  一個例子:購物車展示頁面,一個table裡很多組商品,每組可以單獨結算,也就是都有結算“按鈕”,而本組商品的某個位置度有個隱藏的元素,他們的name是一樣的,這時可以這麼取值:

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

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

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

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

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

  //

  主體代碼

  });

copyright © 萬盛學電腦網 all rights reserved