文章/答案/技术大牛

发布

社区首页 >专栏 >移除jQuery好像也没那么难

移除jQuery好像也没那么难

chuckQu

发布于 2024-07-10 06:05:40

43200

代码可运行

文章被收录于专栏：前端F2E前端F2E

运行总次数：0

代码可运行

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);