[Javascript] 新手的困擾，Javascript 跟 JQuery 傻傻分不清楚

2014-07-21

30356
0
4. JS / JQuery
2014-07-25

在工作上發現 Javascript 的新手，要是觀念不清楚會常常卡關，原因就在於 Javascript DOM 跟 JQuery 分不清楚，
當同事找我求救時，我很常反問幾個問題：
1.這個變數的型態是什麼? Javascript DOM 物件 (Object) ? JQuery 物件 (Object) ?
2.呼叫後回傳值型態是什麼? String? Number ? Object ? 什麼型態的Object?
3.這個 this 代表的是什麼?

/* Maple 2014.7.21 */

在工作上發現 Javascript 的新手，要是 Javascript 跟 JQuery 都會一點點，

當觀念不清楚就會常常卡關，而同事找我求救時我很常反問幾個問題：

這個變數的型態是什麼? Javascript DOM 物件 (Object) ? JQuery 物件 (Object) ?
呼叫後回傳值型態是什麼? String? Number ? Object ? 什麼型態的Object?
這個 this 代表的是什麼?

JQuery 雖然是 Javascript 的延伸，但不代表方法 (function) 或屬性(attribute) 可以亂用，

每一個方法或屬性可能是屬於某一種資料型態下才能使用，

因此第一個問題，這個變數的資料型態是什麼? 要先搞清楚

JQuery 的方法只有 JQuery 的物件認識它，

就像 String 才能呼叫切割字串的方法，用 Number 呼叫就會出錯，

舉個例子，透過 ID 要撈取 input 這個元素


<input type='text' name='demo' id='demo1' value='1' />

Javascript 的 DOM 撈取方式


var demo = document.getElementById('demo1');   // 得到 DOM 物件
demo.val(); //錯誤，對 DOM 物件沒有 val() 這個方法可以呼叫
demo.value;  // 正確，要利用 .value 取得 input 值

JQuery 用 selector 撈取方式


var $demo =  $("#demo1"); //得到 JQuery 物件
$demo.value; //錯誤，對 JQuery 物件並沒有 .value 這個屬性
$demo.val();  //正確，利用 .val() 抓到 input 值

這也是為什麼儲存 JQuery 物件的變數常會多加一個錢字號，取名為 var $xxx

因為之後只要使用到 $xxx 可以一目了然這是 JQuery 的物件，不會跟 var xxx 搞混。

這時有人可能就會有個困惑，

若 JQuery 的物件就只能用JQuery 的方法，為什麼會看到混合著 Javascript 的語法?

例如切割字串的 substr()


document.getElementById('demo1').value.substr(0,1);  //正確
$("#demo1").val().substr(0,1);  //正確

以上都可以正常運作，又是為什麼呢?

這是第二個問題 .val() 及 .value 回傳的資料型態是什麼?

答案都是 String 而不是 Object ，String 當然能使用 substr()

千萬不要只看 $ 開頭就誤以為一直是 JQuery 的物件，經過每一層的 . 運算後回傳，資料型態有可能會被改變。

就像 ((1+2)+5)+6 這條算式，最後與 6 相加的數字是什麼?

逐步慢慢加上去，1 + 2 變成 3 ，3 再與 5 相加，最後變成 8 + 6，因此與 6 相加的數字是 8 ，而不是 1

最後就是常常踩雷的 this ，這個很深奧我就不解釋怎麼看了(解釋不完，google 大概也可以看得頭昏眼花)

當搞不清楚 this 是 JQuery 物件還是 Javascript DOM 物件 (還是 String / Number ...) 時，亂接 .value / .val() / .substr()...之類的當然就掛了

例如


$("input").each(function(){
  //這裡面的 this 是什麼?
});

這裡的 this 不是 JQuery 物件，而是 input 的 DOM 物件，

想要用 JQuery 的方法只要 $(this) 就會轉換成 JQuery 的物件就行了


$("input").each(function(){
  this.value; //正確，因為 this 是 DOM 的物件，擁有 value 這個屬性
  $(this).val();  //正確，因為 $(this) 是 JQuery 的物件，可使用 val()
});

----------------

寫到結尾想到一個傻傻分不清楚的情況，


var text1 = '指定值';   //正確
document.getElementById('demo1').value = '指定值';  //正確
//我猜大概是被理解成 String = String 之類的

但不要寫成


$("#demo1").val() = '指定值';  //這不正確阿!! 而且不會報錯誤

這不是同理可證...而且等號不是萬能的 Orz

實際上的確是可執行，但無法達到修改 value 的目的，JQuery 指定 value 的方式是


$("#demo1").val('指定值'); //這才是正確的寫法

總之要把 Javascript 的 DOM 物件跟 JQuery 物件搞清楚，可以少繞很多路、少找很多Bug！

回首頁