菜鸟教程
教程 jquery tutorial

迁移原生 JS

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

1. 选择器

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

示例：

js 
// 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)
js 
// 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 实现：

css 
.fade {
  opacity: 0;
  transition: opacity 0.3s;
}
.fade.show {
  opacity: 1;
}
js 
const el = document.getElementById("box");
el.classList.add("fade", "show");

6. Ajax 替代

jQuery:

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

原生 Fetch：

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

示例：迁移小模块

在线代码演示
源码 
<button id="btn">点击切换</button>
<div id="panel">内容区域</div>

<script>
(function () {
const btn = document.getElementById("btn");
const panel = document.getElementById("panel");


btn.addEventListener(&quot;click&quot;, () =&gt; {
  panel.style.display = panel.style.display === &quot;none&quot; ? &quot;block&quot; : &quot;none&quot;;
});



})();
</script>

相关内容