# jQuery那些经典方法，还值得学吗？优势与式微的真相一次讲透

**URL:** <https://www.shiqidu.com/t/topic/876>\
**Category:** 开发调优\
**Tags:** jQuery\
**Created:** [2025 年11 月 8 日 16:49 UTC](https://www.shiqidu.com/t/topic/876 "2025-11-08T16:49:11Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

作者： ![shiqidu\_editor](https://www.shiqidu.com/user_avatar/www.shiqidu.com/shiqidu_editor/32/528_2.png) [@shiqidu\_editor](https://www.shiqidu.com/u/shiqidu_editor)\
发布日期： [2025 年11 月 8 日 16:49 UTC](https://www.shiqidu.com/t/topic/876/1 "2025-11-08T16:49:11Z")

</div>

> 🎯 **学习目标** ：系统回顾 jQuery 的经典方法与优势，理解它为何式微，并掌握在现代项目中用原生 API/Vue3 组合式 API 替代的实战路径。
> 
> 📊 **难度等级** ：初级-中级  
> 🏷 **技术标签** ：`#jQuery` `#DOM` `#事件委托` `#AJAX` `#现代替代方案`  
> ⏱ **阅读时间** ：约12-15分钟

* * *

## 🌟 引言

从 2006 年诞生到 2015 年前后，jQuery 一直是前端开发的“瑞士军刀”：一次写好，处处运行，轻松抹平浏览器差异。但随着浏览器统一支持现代标准、框架崛起（Vue/React）、ES6+ 普及，jQuery 不再是默认选择。老项目还在用，新项目多选择原生 API + 框架。

今天，我们用五个核心场景，讲透 jQuery 的经典方法、优势与为什么现在用得少，并给出现代替代方案（含可运行代码与测试）。

* * *

## 💡 核心技巧详解

### 1. 选择器与链式操作：快速上手、表达力强

#### 🔍 应用场景

批量选中元素、增删样式、操作文本与属性，链式语法一次搞定。

#### ❌ 常见问题

新项目直接引入 jQuery 只为“选元素+改样式”，会引入额外体积，并与框架的状态管理脱节。

```javascript
// ❌ 仅为基础 DOM 操作而引入 jQuery，增加体积与心智负担
// $('#title').addClass('active').text('Hello');

```

#### ✅ 推荐方案

```javascript
/**
 * 批量为元素添加类名（原生替代）
 * @description 使用 querySelectorAll + classList 替代 jQuery 选择器与 addClass
 * @param {string} selector - CSS选择器
 * @param {string} className - 需要添加的类名
 * @returns {number} 受影响的元素数量
 */
const addClassBatch = (selector, className) => {
  const nodes = document.querySelectorAll(selector); // 选中所有匹配元素
  nodes.forEach(node => node.classList.add(className)); // 逐个添加类名
  return nodes.length; // 返回处理数量
};

```

#### 💡 核心要点

- jQuery 的链式语法表达力强，但原生 API + NodeList.forEach 足以覆盖大多数场景。
- 在框架中（如 Vue3），推荐通过响应式状态驱动样式，而非直接 DOM 操作。

#### 🎯 实际应用（Vue3 风格提示）

- 在 Vue3 中通过 `:class` 绑定与 `ref` 访问元素，再用组合式 API 管理状态。

```javascript
/**
 * Vue3 组合式API中使用事件委托示例
 * @description 在组件挂载时绑定委托，卸载时移除，避免为大量子项单独绑定
 * @returns {void} 无返回值
 */
const setupEventDelegation = () => {
  // 使用箭头函数和JSDoc，符合项目规范
  const { onMounted, onUnmounted, ref } = require('vue');
  const listRef = ref(null); // 列表容器

  // 委托处理函数（避免过长，专注核心逻辑）
  /**
   * 点击项处理
   * @param {Event} e - 点击事件对象
   * @param {Element} target - 触发的目标元素
   * @returns {void}
   */
  const onItemClick = (e, target) => {
    // 业务逻辑：例如切换选中态
    target.classList.toggle('selected');
  };

  // 绑定与解绑
  let unbind = null;
  onMounted(() => {
    if (listRef.value) {
      unbind = delegateClick(listRef.value, '.item', onItemClick); // 绑定委托
    }
  });

  onUnmounted(() => {
    if (unbind) unbind(); // 组件卸载时清理监听
  });

  return; // 无返回
};

```

* * *

### 2. 事件委托：大列表性能更稳

#### 🔍 应用场景

列表项动态增删时，通过父级绑定一次事件，避免为每项单独绑定。

#### ❌ 常见问题

滥用“直接绑定”导致内存占用高、解绑复杂。

```javascript
// ❌ 为每个项绑定 click，动态增删会造成管理困难
// document.querySelectorAll('.item').forEach(el => el.addEventListener('click', onClick));

```

#### ✅ 推荐方案

```javascript
/**
 * 事件委托（原生替代 jQuery 的 .on('click', '.item', handler)）
 * @description 只在容器上绑定一次，通过事件冒泡捕获目标元素
 * @param {Element} container - 容器元素
 * @param {string} itemSelector - 子项选择器，如 .item
 * @param {(event: Event, target: Element) => void} handler - 处理函数
 * @returns {() => void} 取消绑定函数
 */
const delegateClick = (container, itemSelector, handler) => {
  const listener = (event) => {
    const target = event.target.closest(itemSelector); // 就近匹配子项
    if (target && container.contains(target)) handler(event, target); // 命中时调用
  };
  container.addEventListener('click', listener);
  return () => container.removeEventListener('click', listener); // 返回解绑函数
};

```

#### 💡 核心要点

- `closest` + `contains` 是委托匹配的关键。
- 大量动态子节点场景下显著降低绑定数量与内存占用。

#### 🎯 实际应用

- 评论列表、虚拟滚动列表、级联菜单等动态结构。

* * *

### 3. DOM属性与类名操作：更语义、更安全

#### 🔍 应用场景

控制元素的 `data-*` 属性、类名增删切换。

#### ❌ 常见问题

字符串拼接类名易错，不便审查。

```javascript
// ❌ 使用字符串拼接容易遗漏空格或重复
// el.className = el.className + ' active';

```

#### ✅ 推荐方案

```javascript
/**
 * 切换元素的激活态（原生替代 jQuery 的 toggleClass）
 * @description 使用 classList.toggle 控制显示与状态
 * @param {Element} el - 目标元素
 * @param {string} className - 切换的类名
 * @returns {boolean} 当前是否处于激活态
 */
const toggleActive = (el, className) => {
  return el.classList.toggle(className); // 返回切换后的布尔状态
};

```

#### 💡 核心要点

- `classList` 比字符串更安全、可读性更强。
- 与 `dataset` 结合可存储状态信息。

* * *

### 4. 遍历与集合操作：用 Array 原生方法更直观

#### 🔍 应用场景

批量处理节点或数据集合。

#### ❌ 常见问题

将 jQuery 对象当数组用，容易混淆 `.map` 行为（jQuery 的 `$.map` 与 Array.prototype.map 行为有差异）。

```javascript
// ❌ jQuery 的 map 会自动扁平化并过滤 null，行为与原生不同
// const result = $.map($('li'), el => el.textContent);

```

#### ✅ 推荐方案

```javascript
/**
 * 提取节点文本集合（原生替代 jQuery 的 $.map）
 * @description 使用 Array.from + map 获得更直观的行为
 * @param {NodeListOf<Element>} nodeList - 节点集合
 * @returns {string[]} 文本内容数组
 */
const extractTexts = (nodeList) => {
  return Array.from(nodeList).map(el => el.textContent || '');
};

```

#### 💡 核心要点

- `Array.from` 与原生 `map/filter/reduce` 行为一致，可读性强。
- 避免将 jQuery 与原生集合方法混用导致预期不一致。

* * *

### 5. Ajax 与现代替代：fetch 更轻更标准

#### 🔍 应用场景

网络请求、加载数据、提交表单。

#### ❌ 常见问题

在现代浏览器/Node 中仍用 `$.ajax`，增加体积且与异步链写法混乱。

```javascript
// ❌ 老式 $.ajax 写法心智负担大
// $.ajax({ url: '/api', method: 'GET', success: (res) => {}, error: () => {} });

```

#### ✅ 推荐方案

```javascript
/**
 * 获取文本数据（现代替代 $.ajax）
 * @description 使用 fetch + async/await，结构更简洁
 * @param {string} url - 请求地址（支持 data: 协议用于示例）
 * @returns {Promise<string>} 文本内容
 */
const fetchText = async (url) => {
  const res = await fetch(url); // 标准 Fetch API
  return res.text(); // 返回文本
};

```

#### 💡 核心要点

- `fetch` 原生支持 Promise，配合 `async/await` 更清晰。
- 可搭配 `AbortController` 做超时与取消（生产场景建议封装）。

* * *

## 📊 技巧对比总结

| 技巧 | 使用场景 | 优势 | 注意事项 |
| --- | --- | --- | --- |
| 选择器与链式 | 快速批量操作 | 表达力强、上手快 | 新项目建议用原生或框架状态驱动 |
| 事件委托 | 动态列表 | 减少绑定、性能更稳 | 注意 `closest` 与作用域 |
| 类名/属性 | 视觉状态 | 语义清晰、安全 | 搭配 dataset 存储状态 |
| 遍历与集合 | 批量处理 | 原生行为直观 | 避免混用 map 行为差异 |
| Ajax | 网络请求 | fetch 更轻更标准 | 增强错误处理与取消 |

* * *

## 🎯 实战应用建议

### 最佳实践

1. 老项目保留 jQuery：稳定为先，但逐步在新模块使用原生 API。
2. 新项目不引入 jQuery：Vue3 + 原生即可覆盖，体积更小、心智更清晰。
3. 事件委托与虚拟列表结合：减少绑定、提升性能。
4. 封装请求层：统一 `fetch` 错误处理与重试逻辑。
5. 样式统一：Less 全局变量集中管理颜色、字体、间距。

### 性能考虑

- 少量 DOM 操作直接用原生，批量操作结合 `documentFragment`。
- 事件委托优先于逐项绑定，结合节流/防抖。
- 请求层考虑超时、缓存策略与重试。

* * *

## 💡 总结

jQuery 在“统一兼容、快速 DOM 操作、链式表达”上贡献巨大，但现代浏览器与框架时代，它的核心优势不再突出。掌握原生替代与迁移策略，能让你的代码更轻、更现代、更易维护：

1. 选择器与链式：原生已足够；
2. 事件委托：`closest` 加容器一次绑定；
3. 类名与属性：用 `classList` 与 `dataset` 更语义；
4. 集合操作：`Array.from` + `map` 行为直观；
5. Ajax：`fetch` 是更优选。

* * *

## 🔗 相关资源

- jQuery 官方文档：[api.jquery.com/](https://link.juejin.cn?target=https%3A%2F%2Fapi.jquery.com%2F "https://api.jquery.com/")
- MDN Web Docs：DOM、事件、Fetch API
- Vue3 官方文档：组合式 API、模板绑定

* * *

> 💡 **今日收获** ：理解 jQuery 的历史价值与现代替代方案，既能维护老项目，也能写出现代、可维护的代码。

> 本文转自 [https://juejin.cn/post/7560314773598896182](https://juejin.cn/post/7560314773598896182)，如有侵权，请联系删除。