# 迁移原生 JS

URL: https://caijiao.org/jquery/09-advanced/04-migrate-native
Source: docs/jquery/09-advanced/04-migrate-native.md
Description: 本文介绍如何将 jQuery 代码迁移为原生 JavaScript 实现，涵盖选择器、事件绑定、DOM 操作、样式处理等，帮助开发者逐步摆脱对 jQuery 的依赖。

随着浏览器兼容性的提升和现代开发框架的普及，越来越多项目开始去除对 jQuery 的依赖。本文将手把手教你将常见的 jQuery 用法迁移为原生 [JavaScript](/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));
```

## 示例：迁移小模块

[在线代码演示](/jquery/demos/33.html)