[2023 15th鐵人賽] Day17 - 告別 jQuery：現代開發不可或缺的 JavaScript 方法

原文連結：jQuery への別れ：現代的な開発のための必須 JavaScript メソッド - Qiita

有時在工作上，需要維護一些比較早期的專案，或開發小型不需使用到框架的案子，jQuery 提供的功能與便利性，通常能快速滿足各種需求。但自從 ES6 的出現，引入箭頭函數、模組化、非同步操作等語法功能，考慮到性能優化、行動裝置開發、可維護性等因素，原生 JavaScript 已逐漸取代 jQuery 。

透過這篇文章，除了複習 jQuery 中常用的方法，同時對照原生 JavaScript 對應的方法，以達成相同目的。

以下正文開始。

前言#

長期以來，我一直與遺留程式碼（Legacy Code）共事，但 jQuery 的重要性仍是經常被討論的話題之一。雖然這個 Library 本身依舊方便，完美地滿足不同時代的需求。現今大多在談論的是 ES2023，但過去 jQuery 所涵蓋的大部分功能，早已被納入 2015 年發布的 ES6 版本中。

ES6 的標準已經得到廣泛支援，支援度達到 96％（來源：caniuse.com）。因此，針對像是元素選擇、樣式設定、動畫和數據取得等的基本任務，現在或許是重新審視使用這個 Library 的好時機。

以下主題將舉出一些標準的 jQuery 使用模式，以及相對應的原生 JavaScript 方法，希望能作為參考資料。

元素選取#

透過 CSS Selector，能夠選取一個或多個 DOM 元素。

在 JavaScript 中，有許多方法可以用於選擇元素，其中一個常用的方法是 Query Selector。透過 Query Selector，可基於 CSS Selector 模式選取 Document 中的特定元素。

已複製！
// jQuery 和原生 JavaScript: 選擇所有具有 .item 的實例
$('.item');
document.querySelectorAll('.item');

上方程式碼，展示使用 jQuery 和原生 JavaScript 方法，選取具有 .item 類別的所有元素。在 jQuery 中，使用 $ 函數並將 CSS Selector 作為參數。在原生 JavaScript 中，使用 document.querySelectorAll 方法，返回與指定 Selector 匹配的元素集合。

以下是使用不同 Selector 來選取元素的範例：

已複製！
// 基於類別查詢
$('.item');
document.querySelectorAll('.item');
document.getElementsByClassName('item');

// 基於 ID 查詢
$('#item');
document.querySelector('#item');
document.getElementById('item');

// 基於屬性查詢
$('a[target=_blank]');
document.querySelectorAll('a[target=_blank]');

上述範例中，透過不同的 Selector，基於類別、ID 和屬性條件來選取元素。使用 jQuery 和原生 JavaScript 提供的方法，均得到相同的結果。

透過這些選取元素的技巧，能夠有效選取 DOM 中所需的元素，並進行更進一步操作和互動。

對元素執行函數的方法#

在 jQuery 中，可以很容易對選取的所有元素執行某個函數，但原生 JavaScript 的步驟則略有不同。在原生 JavaScript 中，為了迭代處理 NodeList 中的元素，需要使用 NodeList.forEach() 方法。

以下程式碼，是使用 jQuery 和原生 JavaScript 來隱藏元素的範例：

已複製！
// jQuery: 隱藏所有 .item 的實例
$('.item').hide();

// JavaScript: 迭代處理 NodeList 中的元素，隱藏所有 .item 的實例
document.querySelectorAll('.item').forEach((item) => {
  item.style.display = 'none';
});

上述程式碼中，在 jQuery 使用 hide() 方法來隱藏所有 .item 的實例。另一方面，在原生 JavaScript 使用 document.querySelectorAll(".item") 來選取所有 .item 的實例，接著使用NodeList.forEach() 方法，在每個元素加上隱藏的樣式。

在原生 JavaScript 中，使用 NodeList.forEach() 方法，可以輕鬆對 NodeList 中的元素執行函數。透過這個步驟，即使是原生 JavaScript 也能對元素執行操作和處理。

選取元素內的元素的方法#

當需要在特定範圍內選取元素時，在 jQuery 通常會使用 .find() 方法；而在 JavaScript 則可以使用 querySelector 或 querySelectorAll 方法選取元素的子元素，以達到相同的效果。

以下程式碼，示範如何在 jQuery 和 JavaScript 中選取 .container 內的第一個 .item 元素。在 jQuery 會先將 .container 元素儲存在變數中，接著使用 .find(".item") 來查找子元素。在 JavaScript 則是使用 document.querySelector(".container") 選取 .container 元素，接著使用 querySelector(".item") 來查找子元素。

已複製！
// jQuery: 選取 .container 內的第一個 .item
var container = $('.container');
container.find('.item');

// JavaScript: 選取 .container 內的第一個 .item
var container = document.querySelector('.container');
container.querySelector('.item');

// JavaScript: 選取 .container 內的所有 .link
var container = document.querySelector('.container');
container.querySelectorAll('.link');

父元素和相鄰元素的遍歷#

接著介紹如何根據元素的階層結構，從目標元素選取父元素或相鄰元素。在 JavaScript 中，可以使用以下屬性：nextElementSibling、previousElementSibling 和 parentElement。

以下程式碼，示範如何使用 jQuery 和 JavaScript 來選取元素的相鄰元素或父元素。

已複製！
// jQuery: 選取 .item 的下一個元素、前一個元素、父元素
$('.item').next();
$('.item').prev();
$('.item').parent();

// JavaScript: 選取 .item 的下一個元素、前一個元素、父元素
var item = document.querySelector('.item');
item.nextElementSibling;
item.previousElementSibling;
item.parentElement;

這個範例，是以具有 .item 類別的元素作為目標。在 jQuery 中，使用 .next() 方法選取下一個元素，使用 .prev() 方法選取前一個元素，使用 .parent() 方法選取父元素。在 JavaScript 中，使用 nextElementSibling 屬性選取下一個元素，使用 previousElementSibling 屬性選取前一個元素，使用 parentElement 屬性選取父元素。

透過這些方法，使元素之間的遍歷成為可能，實現靈活的 DOM 操作。

事件處理#

在 jQuery 可使用 .on()、.bind()、.live()、.click() 等多種方法來監聽事件，而在 JavaScript 則使用 .addEventListener() 方法來實現相同的功能。

已複製！
// jQuery: 處理 click、moustenter 和 keyup 事件
$('.button').click(function (e) {
  /* 處理 click 事件 */
});
$('.button').mouseenter(function (e) {
  /* 處理 mouseenter 事件 */
});
$(document).keyup(function (e) {
  /* 處理 keyup 事件 */
});

// JavaScript: 處理 click、moustenter 和 keyup 事件
document.querySelector('.button').addEventListener('click', (e) => {
  /* ... */
});
document.querySelector('.button').addEventListener('mouseenter', (e) => {
  /* ... */
});
document.addEventListener('keyup', (e) => {
  /* ... */
});

Click 事件#

使用 jQuery 的 .on() 方法，可以為動態新增的元素註冊事件處理（EventHandler）。在 JavaScript 中，想要實現事件委派（Delegation），可透過事件冒泡（Bubbling）在父元素上捕獲事件（Capture），並判別目標元素。

已複製！
// jQuery: 處理 .container 内 .active 元素的 click 事件
$('.container').on('click', '.active', handleClick);

// JavaScript: 處理 .container 内 .active 元素的 click 事件
document
  .querySelector('.container')
  .addEventListener('click', function (event) {
    if (event.target.matches('.active')) {
      handleClick(event);
    }
  });

動態新增元素的監聽事件#

使用 jQuery 的 .on() 方法，可以為動態新增到 DOM 的元素進行事件處理。即使不使用 jQuery，也可以在將元素新增到 DOM 時，將事件處理新增到元素，以實現相同的功能。

已複製！
// jQuery: 處理動態新增的 .active 元素的 click 事件
$('.search-container').on('click', '.active', handleClick);

// JavaScript: 建立元素，放入 DOM 並加上 eventListener
var searchElement = document.createElement('div');
document.querySelector('.search-container').appendChild(searchElement);
searchElement.addEventListener('click', handleClick);

觸發和建立事件#

觸發和建立事件，可使用 JavaScript 的 dispatchEvent() 方法。dispatchEvent() 方法可在任何元素上調用，並且以 Event 作為第一個參數。

已複製！
// jQuery: 在 document 以及 .item 上觸發 myEvent
$(document).trigger('myEvent');
$('.item').trigger('myEvent');

// JavaScript: 建立 myEvent 並 dispatch event
document.dispatchEvent(new Event('myEvent'));
document.querySelector('.item').dispatchEvent(new Event('myEvent'));

元素的樣式設定#

在 jQuery 中，要改變元素的 Inline CSS，可使用 .css() 方法，而在 JavaScript 中，可使用 .style 將值分配給不同的屬性，以實現相同的效果。

已複製！
// jQuery: 將 .item 的文字顏色設為 #000
$('.item').css('color', '#000');

// JavaScript: 將第一個 .item 的文字顏色設為 #000
document.querySelector('.item').style.color = '#000';

若是想要設定多個屬性的情況：

已複製！
// jQuery: 設定多個樣式
$('.item').css({
  color: '#000',
  'background-color': 'red',
});

// JavaScript: 設定 color 為 #000，background 為 red
var item = document.querySelector('.item');
item.style.color = '#000';
item.style.backgroundColor = 'red';

// 一次設定所有樣式（覆蓋現有樣式）
item.style.cssText = 'color: #000; background-color: red';

fadeIn() 與 fadeOut()#

在 jQuery 中使用 .fadeIn() 方法，能使具有 .item 類別的元素實現淡入效果。

已複製！
// jQuery: 將 .item 淡入
$('.item').fadeIn();

為了在 JavaScript 中實現相同效果，這裡建立一個名為 fadeIn() 的函數，該函數以元素作為參數，透過修改元素樣式來實現淡入效果。

在函數中，設定 transition 屬性，並將 opacity 屬性改為 1 使元素可見，透過動態調整元素的不透明度，實現淡入效果。

已複製！
// JavaScript: 透過樣式實現 .item 淡入效果
function fadeIn(element) {
  element.style.transition = 'opacity 1s';
  element.style.opacity = '1';
}

fadeIn(document.querySelector('.item'));

hide() 與 show()#

.hide() 和 .show()，可透過設定元素的 display 屬性為 none 和 block 的方法來實現。

已複製！
// jQuery: 隱藏或顯示元素
$('.item').hide();
$('.item').show();

// JavaScript: 隱藏或顯示元素（修改 display 屬性）
document.querySelector('.item').style.display = 'none';
document.querySelector('.item').style.display = 'block';

等待 DOM 完成加載#

若需要等待 DOM 完全加載的情況（例如：要附加事件到 DOM 上的對象時），通常會使用 jQuery 的 $(document).ready() 或簡寫 $()。而在 JavaScript 中，可透過監聽 DOMContentLoaded 事件來實現相同的功能。

已複製！
// jQuery: 在 DOM 完全加載後執行某些操作
$(document).ready(function () {
  /* todo... */
});

// JavaScript: 在 DOM 完全加載後執行某些操作
document.addEventListener('DOMContentLoaded', (event) => {
  /* todo... */
});

操作類別#

在 jQuery 中，可使用 .addClass()、.removeClass()、.toggleClass() 等方法來操作類別。在 JavaScript 中，可使用 classList 屬性來實現相同的功能。

已複製！
// jQuery: 新增、移除、切換 "active" 類別
$('.item').addClass('active');
$('.item').removeClass('active');
$('.item').toggleClass('active');

// JavaScript: 新增、移除、切換 "active" 類別
var item = document.querySelector('.item');
item.classList.add('active');
item.classList.remove('active');
item.classList.toggle('active');

若要新增或移除多個類別的情況：

已複製！
// 新增或移除 "active" 和 "highlighted" 類別
var item = document.querySelector('.item');
item.classList.add('active', 'highlighted');
item.classList.remove('active', 'highlighted');

當需要切換兩個不同類別時，可透過 classList 屬性並調用 .replace() 方法，將一個類別替換為另一個類別。

已複製！
// 刪除 "active1" 類別，並將其替換為 "active2"
document.querySelector('.item').classList.replace('active1', 'active2');

檢查類別是否存在#

若要檢查元素是否具有特定類別，可使用 JavaScript 的 .classList.contains() 方法。

已複製！
// jQuery: 檢查 .item 是否具有 "active" 類別，並執行某些操作
if ($('.item').hasClass('active')) {
  // 執行某些操作...
}

// JavaScript: 檢查 .item 是否具有 "active" 類別，並執行某些操作
if (document.querySelector('.item').classList.contains('active')) {
  // 執行某些操作...
}

透過 .get() 或 .ajax() 進行網路請求#

在 jQuery 中，可使用 .get() 或 .ajax() 進行網路請求。在 JavaScript 中，可使用具有相似功能的 fetch()，這個方法將會返回 Promise 以處理 Response。

已複製！
// jQuery: 進行 AJAX 請求
$.ajax({
  url: 'data.json',
})
  .done(function (data) {
    // ...
  })
  .fail(function () {
    // 錯誤處理
  });

// JavaScript: 使用 fetch 進行網路請求
fetch('data.json')
  .then((data) => {
    // 資料處理
  })
  .catch((error) => {
    // 錯誤處理
  });

建立元素#

若要在 JavaScript 動態建立元素，可使用 document 物件的 createElement() 方法。

已複製！
// jQuery: 建立 div 元素和 span 元素
$('<div/>');
$('<span/>');

// JavaScript: 建立 div 元素和 span 元素
document.createElement('div');
document.createElement('span');

更新 DOM#

當需要更改元素的文字，或將新元素放到 DOM 時，通常會使用 .innerHTML 屬性，但這可能會面臨跨網站指令碼攻擊（XSS）的風險，以下介紹更安全的替代方法。

若要讀取或更新元素文字，可使用 textContent 屬性。

已複製！
// jQuery: 更新 .item 的文字
$('.item').text('新しいテキスト');
// 讀取 .item 的文字
$('.item').text(); // 返回 "新的文字"

// JavaScript: 更新 .item 的文字
document.querySelector('.item').textContent = '新しいテキスト';
// 讀取 .item 的文字
document.querySelector('.item').textContent; // 返回 "新的文字"

若要將元素新增到 DOM，可透過 appendChild：

已複製！
// jQuery: 建立 div 元素並新增到 .container
$('.container').append($('<div/>'));

// JavaScript: 建立 div 元素並新增到 .container
var element = document.createElement('div');
document.querySelector('.container').appendChild(element);

總結#

以上只是概略介紹方法，未提及 jQuery 的負面影響，或轉移到原生 JavaScript 的好處。

可將本篇文章，作為轉移到原生 JavaScript 時的參考。此外，注意這並不是全面的指南，建議參考官方文件，並搭配這裡介紹的原生 JavaScript 方法。

參考資料#

可閱讀 Mozilla Web 文檔，以更深入瞭解 JavaScript：

https://developer.mozilla.org/ja/docs/Web/JavaScript

從 jQuery 轉移到原生 JavaScript 的相關資訊，可參考下方連結：

https://youmightnotneedjquery.com/
https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/
https://dev.to/rfornal/-replacing-jquery-with-vanilla-javascript-1k2g

15th 鐵人賽目錄傳送門：https://ithelp.ithome.com.tw/users/20135558/ironman/6290