在工作上發現 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!