[Javascript] 新手的困扰,Javascript 跟 JQuery 傻傻分不清楚

在工作上发现 Javascript 的新手,要是观念不清楚会常常卡关,原因就在于 Javascript DOM 跟 JQuery 分不清楚,
当同事找我求救时,我很常反问几个问题:
1.这个变量的型态是什么? Javascript DOM 对象 (Object) ? JQuery 对象 (Object) ?
2.调用后回传值型态是什么? String? Number ? Object ? 什么型态的Object?
3.这个 this 代表的是什么?


/* Maple 2014.7.21 */

在工作上发现 Javascript 的新手,要是 Javascript 跟 JQuery 都会一点点,

当观念不清楚就会常常卡关,而同事找我求救时我很常反问几个问题:

  1. 这个变量的型态是什么? Javascript DOM 对象 (Object) ? JQuery 对象 (Object) ?
  2. 调用后回传值型态是什么? String? Number ? Object ? 什么型态的Object?
  3. 这个 this 代表的是什么?

JQuery 虽然是 Javascript 的延伸,但不代表方法 (function) 或属性(attribute) 可以乱用,

每一个方法或属性可能是属于某一种数据型态下才能使用,

因此第一个问题,这个变量的数据型态是什么? 要先搞清楚

JQuery 的方法只有 JQuery 的对象认识它,

就像 String 才能调用切割字符串的方法,用 Number 调用就会出错,

举个例子,透过 ID 要捞取 input 这个元素


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!