jQuery 是一個非常流行的 JavaScript 庫,它簡化了許多常見的 DOM 操作、事件處理、動畫等任務。然而,隨著時間的發展,JavaScript 已經發展出了許多新特性,這使得 jQuery 在某些情況下變得不再必要或淘汰。
一些主要的 ES6 特性,它們可以替代或簡化許多常見的 jQuery 用法:
document.querySelector 和 document.querySelectorAll 用于選擇 DOM 元素,類似于 jQuery 的 $()。
Node.textContent 和 Node.innerText 用于設置或獲取文本內容,類似于 jQuery 的 .text()。
Node.getAttribute() 和 Node.setAttribute() 用于獲取或設置屬性,類似于 jQuery 的 .attr()。
Node.classList 用于添加、刪除和切換類,類似于 jQuery 的 .addClass()、.removeClass() 和 .toggleClass()。
Node.appendChild() 和 Node.removeChild() 等方法用于操作 DOM,類似于 jQuery 的 .append() 和 .remove()。
Array.from 可以將類數組對象轉換為數組,類似于 jQuery 的 .toArray()。
// 獲取元素
const $element = document.querySelector('.my-element');
// 設置文本內容
element.textContent = 'Hello, world!';
// 獲取屬性
const value = element.getAttribute('data-value');
// 切換類
element.classList.toggle('active');
// 添加事件監聽器
element.addEventListener('click', function() {
alert('Clicked!');
});
// 創建元素
const newElement = document.createElement('div');
newElement.textContent = 'New element';
// 插入元素
document.body.appendChild(newElement);
// 遍歷數組
const arr = Array.from(document.querySelectorAll('.my-elements'));
arr.forEach(el => {
// 處理每個元素
});