移除jQuery好像也没那么难
jQuery 是一个非常实用且实用的库，但随着浏览器对 ES6 的广泛支持（截至撰写本文时超过 96%），现在可能是时候从 jQuery 过渡到原生 JavaScript 了。我最近从我的博客中移除了 jQuery，并发现自己不断地在谷歌上搜索一些模式。为了节省大家的时间，我编写了这个实用的参考指南，列出了一些最常见的 jQuery 模式及其在 JavaScript 中的等价物。我们将涵盖如何从这些概念和函数迁移到纯 JavaScript。
选择元素
选择一个或多个 DOM 元素是 jQuery 最基本的功能之一。在 JavaScript 中，$() 或 jQuery() 的等价物是 querySelector() 或 querySelectorAll()，它们同样可以使用 CSS 选择器。
// jQuery，选择所有 .box 的实例
$(".box");
// JavaScript，选择第一个 .box 的实例
document.querySelector(".box");
// 或者选择所有 .box 的实例
document.querySelectorAll(".box");
在选择中的所有元素上运行函数
querySelectorAll() 返回一个包含所有匹配查询元素的 NodeList。与 jQuery 可以直接对选择的所有元素调用方法不同，在纯 JavaScript 中，你需要使用 NodeList.forEach() 遍历这个 NodeList。
// jQuery
// 隐藏所有 .box 的实例
$(".box").hide();
// JavaScript
// 遍历元素列表以隐藏所有 .box 的实例
document.querySelectorAll(".box").forEach(box => { box.style.display = "none" });
在一个元素内找到另一个元素
一个常见的 jQuery 模式是使用 .find() 选择一个元素内的另一个元素。你可以通过在一个元素上调用 querySelector 或 querySelectorAll 来实现相同的效果，从而将选择范围限制在元素的子元素中。
// jQuery
// 选择 .container 内的第一个 .box 实例
var container = $(".container");
// 稍后...
container.find(".box");
// JavaScript
// 选择 .container 内的第一个 .box 实例
var container = document.querySelector(".container");
// 稍后...
container.querySelector(".box");
使用 parent(), next(), 和 prev() 遍历树
如果你希望遍历 DOM 来选择相对于另一个元素的兄弟或父元素，可以通过在该元素上访问 nextElementSibling，previousElementSibling 和 parentElement 来实现。
// jQuery
// 返回 .box 的下一个、上一个和父元素
$(".box").next();
$(".box").prev();
$(".box").parent();
// JavaScript
// 返回 .box 的下一个、上一个和父元素
var box = document.querySelector(".box");
box.nextElementSibling;
box.previousElementSibling;
box.parentElement;
事件处理
无论你使用 .on()，.bind()，.live 还是 .click()，在 JavaScript 中的等价物是 .addEventListener。
// jQuery
$(".button").click(function(e) { /* 处理点击事件 */ });
$(".button").mouseenter(function(e) { /* 处理鼠标进入事件 */ });
$(document).keyup(function(e) { /* 处理键盘松开事件 */ });
// JavaScript
document.querySelector(".button").addEventListener("click", (e) => { /* ... */ });
document.querySelector(".button").addEventListener("mouseenter", (e) => { /* ... */ });
document.addEventListener("keyup", (e) => { /* ... */ });
动态添加元素的事件监听
jQuery 的 .on() 方法使你可以处理动态添加到 DOM 中的元素的事件。要在没有 jQuery 的情况下实现类似功能，你可以在将元素添加到 DOM 时附加事件处理程序。
// jQuery
// 处理 .search-result 元素的点击事件，即使它们是通过编程动态添加到 DOM 中的
$(".search-container").on("click", ".search-result", handleClick);
// JavaScript
// 创建并添加一个元素到 DOM
var searchElement = document.createElement("div");
document.querySelector(".search-container").appendChild(searchElement);
// 添加一个事件监听到元素
searchElement.addEventListener("click", handleClick);
触发和创建事件
通过调用 dispatchEvent() 可以实现手动触发事件。dispatchEvent() 方法可以在任何元素上调用，并将一个 Event 作为第一个参数。
// jQuery
// 在 document 和 .box 上触发 myEvent
$(document).trigger("myEvent");
$(".box").trigger("myEvent");
// JavaScript
// 创建并分发 myEvent
document.dispatchEvent(new Event("myEvent"));
document.querySelector(".box").dispatchEvent(new Event("myEvent"));
元素样式处理
如果你使用 .css() 来更改元素的内联 CSS，通过 JavaScript 的 .style 属性设置不同属性的值来实现相同的效果。
// jQuery
// 选择 .box 并将文本颜色更改为 #000
$(".box").css("color", "#000");
// JavaScript
// 选择第一个 .box 并将文本颜色更改为 #000
document.querySelector(".box").style.color = "#000";
使用 jQuery，你可以通过传递一个包含键值对的对象一次性设置多个样式。在 JavaScript 中，你可以一个一个地设置值，或设置整个样式字符串。
// jQuery
// 传递多个样式
$(".box").css({
"color": "#000",
"background-color": "red"
});
// JavaScript
// 设置颜色为 #000 和背景为红色
var box = document.querySelector(".box");
box.style.color = "#000";
box.style.backgroundColor = "red";
// 一次性设置所有样式（并覆盖任何现有样式）
box.style.cssText = "color: #000; background-color: red";
hide() 和 show()
.hide() 和 .show() 方法等同于访问 .style 属性并将 display 设置为 none 和 block。
// jQuery
// 隐藏和显示元素
$(".box").hide();
$(".box").show();
// JavaScript
// 通过将 "display" 更改为 "none" 和 "block" 来隐藏和显示元素
document.querySelector(".box").style.display = "none";
document.querySelector(".box").style.display = "block";
文档就绪
如果你需要在 DOM 完全加载后再附加事件到 DOM 对象，通常会使用 (document).ready() 或常用的简写 ()。我们可以通过监听 DOMContentLoaded 来轻松构造一个类似的函数来替代它。
// jQuery
$(document).ready(function() {
/* 在 DOM 完全加载后执行操作 */
});
// JavaScript
// 定义一个方便的方法并使用它
var ready = (callback) => {
if (document.readyState != "loading") callback();
else document.addEventListener("DOMContentLoaded", callback);
}
ready(() => {
/* 在 DOM 完全加载后执行操作 */
});
切换元素类名
通过 classList 属性，您可以方便地在 JavaScript 中添加、删除或切换类名。这些方法包括 add(), remove() 和 toggle()：
// 使用 jQuery
$(".box").addClass("focus");
$(".box").removeClass("focus");
$(".box").toggleClass("focus");
// 使用 JavaScript
var box = document.querySelector(".box");
box.classList.add("focus");
box.classList.remove("focus");
box.classList.toggle("focus");
如果需要同时添加或删除多个类，可以传入多个参数：
// 添加 "focus" 和 "highlighted" 类，然后移除它们
var box = document.querySelector(".box");
box.classList.add("focus", "highlighted");
box.classList.remove("focus", "highlighted");
对于两个互斥的类，可以使用 classList.replace() 来替换类名：
// 删除 "focus" 类并添加 "blurred"
document.querySelector(".box").classList.replace("focus", "blurred");
检查元素是否具有指定类
如果您只想在元素具有某个类时执行某些操作，可以使用 .classList.contains() 来代替 jQuery 的 .hasClass()：
// 使用 jQuery
if ($(".box").hasClass("focus")) {
// 执行操作
}
// 使用 JavaScript
if (document.querySelector(".box").classList.contains("focus")) {
// 执行操作
}
使用 .get() 或 .ajax() 进行网络请求
JavaScript 的 fetch() 方法可以用来进行网络请求，类似于 jQuery 的 ajax() 和 get() 方法。fetch() 方法接收一个 URL 作为参数，并返回一个 Promise 对象，用于处理响应：
// 使用 jQuery
$.ajax({
url: "data.json"
}).done(function(data) {
// 处理数据
}).fail(function() {
// 处理错误
});
// 使用 JavaScript
fetch("data.json")
.then(response => response.json())
.then(data => {
// 处理数据
})
.catch(error => {
// 处理错误
});
创建元素
在 JavaScript 中，您可以使用 createElement() 方法动态创建一个元素，并传入标签名来指定要创建的元素类型：
// 创建 div 和 span 元素
$("<div/>");
$("<span/>");
// 使用 JavaScript 创建 div 和 span 元素
document.createElement("div");
document.createElement("span");
要为这些元素添加内容，可以设置 textContent 属性，或者使用 createTextNode 创建文本节点并将其附加到元素上：
var element = document.createElement("div");
element.textContent = "文本内容";
// 或者创建一个文本节点并附加到元素上
var text = document.createTextNode("文本内容");
element.appendChild(text);
更新 DOM
如果要更改元素的文本或向 DOM 中添加新元素，可以使用 textContent 属性来读取或更新文本内容：
// 使用 jQuery
$(".button").text("新文本");
$(".button").text(); // 返回 "新文本"
// 使用 JavaScript
document.querySelector(".button").textContent = "新文本";
document.querySelector(".button").textContent; // 返回 "新文本"
要创建一个新元素并将其添加到另一个元素中，可以使用 appendChild() 方法：
// 创建 div 元素并附加到 .container
$(".container").append($("<div/>"));
// 创建一个 div 并附加到 .container
var element = document.createElement("div");
document.querySelector(".container").appendChild(element);
综合起来，下面是如何创建一个 div 元素，更新其文本和类名，并将其添加到 DOM 中的示例：
// 创建一个 div 元素
var element = document.createElement("div");
// 更新其类名
element.classList.add("box");
// 设置其文本内容
element.textContent = "框内文本";
// 将元素附加到 .container 中
document.querySelector(".container").appendChild(element);
总结
以上内容并不是对所有原生 JavaScript 方法的详尽指南，但希望这些实用示例能帮助您更轻松地从 jQuery 过渡到纯 JavaScript。总而言之，我们讨论了以下方法：
- 使用
querySelector和querySelectorAll选择元素 - 使用
addEventListener监听事件 - 通过
style属性更新 CSS 和样式 - 通过
classList属性操作类名 - 使用
fetch进行 AJAX 请求 - 通过
dispatchEvent触发事件 - 使用
createElement创建元素 - 通过
textContent更新文本 - 使用
appendChild向 DOM 中添加元素
本文译自：https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/
腾讯云开发者
