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(){

　　//

　　主體代碼

　　});