【Web】新手的困擾,JavaScript 跟 jQuery 傻傻分不清楚

  • 408
  • 0
  • Web
  • 2022-04-12

對於初接觸前端的工程師,一定知道JavaScript 與jQuery 兩種前端語言
兩者可以做的非常類似,但有時不太清楚這兩者之前的差別
簡單來說jQuery 是JavaScript 的延伸,但兩者的操作還是有些差異,不能互相共通使用

由JavaScript 取得的物件為DOM 物件,由jQuery 取得的物件為jQuery 的物件

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

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

分別用JavaScript 與jQuery 撈

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

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

參考資料:
https://dotblogs.com.tw/maplenote/2014/07/21/146024
https://progressbar.tw/posts/6