[指南] 你真的需要 jQuery 嘛？ jQuery 和 Vanilla JavaScript 轉換對照表 @地瓜大的飛翔旅程

章節連結

比較表

jQuery 的誕生至今也超過 10 年了，而瀏覽器彼此間語法不相通的狀況也日漸削減，究竟有無需要再使用 jQuery 呢？jQuery 當初設立的目的除了解決跨瀏覽器的語法問題外，也替原生的 JavaScript (暱稱為 vanilla JS) 需要撰寫多行式才能達成的情境，提供一個快速的解決方案。如今，原生 JavaScript 已經擴充不少內建方法，寫起來跟 jQuery 其實差不了多少了。
jquery

比較表

詳情可以上 “You might not need jQuery” 這個 Github 專案來看。以下舉幾個 jQuery 和原生 JS 差不多的 & jQuery 較簡潔的。

// jQuery 寫法近似於 原生 JS
// Map 方法 (jQuery)
$.map(array, function(value, index){

});

// Map 方法 (原生)
array.map(function(value, index){

});

// 取DOM (jQuery)
$(".class")
$("#id")

// 取DOM (原生)
document.querySelector(".class")
document.querySelector("#id")

// ajax (jQuery)
$.ajax({
  type: 'POST',
  url: '/my/url',
  data: data
});

// ajax (原生 JS)
let request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

// jQuery 寫法近似於原生 JS

// Map 方法 (jQuery)

$.map(array, function(value, index){

});

// Map 方法 (原生)

array.map(function(value, index){

});

// 取DOM (jQuery)

$(".class")

$("#id")

// 取DOM (原生)

document.querySelector(".class")

document.querySelector("#id")

// ajax (jQuery)

$.ajax({

type: 'POST',

url: '/my/url',

data: data

});

// ajax (原生 JS)

let request = new XMLHttpRequest();

request.open('POST', '/my/url', true);

request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

request.send(data);

按讚加入粉絲團

比較表

延伸閱讀