░░░░░░░░░ ES6替代jQuery的几个新特性 ░░░░░░░░░

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()。

一些简单的 ES6 替代 jQuery 的例子

// 获取元素
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 => {
  // 处理每个元素
});