迁移原生 JS

随着浏览器兼容性的提升和现代开发框架的普及，越来越多项目开始去除对 jQuery 的依赖。本文将手把手教你将常见的 jQuery 用法迁移为原生 JavaScript。

---

1. 选择器

jQuery	原生 JS
$(".box")	document.querySelectorAll(".box")
$("#id")	document.getElementById("id")

示例：

// jQuery
$(".box").hide();

// 原生 JS
document.querySelectorAll(".box").forEach(el => {
  el.style.display = "none";
});

---

2. 事件绑定

jQuery	原生 JS
$("#btn").click(fn)	document.getElementById("btn").addEventListener("click", fn)

// jQuery
$("#btn").click(function () {
  alert("Clicked");
});

// 原生 JS
document.getElementById("btn").addEventListener("click", function () {
  alert("Clicked");
});

---

3. 内容操作

jQuery	原生 JS
$("#el").text()	element.textContent
$("#el").html()	element.innerHTML
$("#el").val()	element.value（适用于表单）

---

4. 样式操作

jQuery	原生 JS
$("#el").css("color", "red")	element.style.color = "red"
$("#el").addClass("active")	element.classList.add("active")
$("#el").removeClass("active")	element.classList.remove("active")
$("#el").toggleClass("active")	element.classList.toggle("active")

---

5. 动画（替代方案）

jQuery 提供如 .fadeIn()、.slideUp() 等动画，原生 JS 可用 CSS + class 实现：

.fade {
  opacity: 0;
  transition: opacity 0.3s;
}
.fade.show {
  opacity: 1;
}

const el = document.getElementById("box");
el.classList.add("fade", "show");

---

6. Ajax 替代

jQuery:

$.get("/api/data", function (res) {
  console.log(res);
});

原生 Fetch：

fetch("/api/data")
  .then(response => response.json())
  .then(data => console.log(data));

示例：迁移小模块

loading