HTML + CSS + JavaScript 快速入门（三）：JavaScript 与 jQuery 实战（2026 年视角）
这是系列第三讲，我们进入 JavaScript（简称 JS）核心内容，并对比经典的 jQuery。
2026 年的现实情况是：
- 原生 JS（尤其是 ES6+）已成为主流，几乎所有新项目都优先用原生。
- jQuery 仍然大量存在（据 W3Techs 2026 年 3 月数据，约 70% 的网站在使用某种 JS 库的情况下 jQuery 占比 ~88%，整体网站约 70% 仍在跑 jQuery，主要因为 WordPress、Bootstrap 遗留、大量维护中的老项目）。
- jQuery 4.0 已于 2026 年初正式发布，体积更小、现代化更好，但新项目极少从零引入。
因此本讲的策略是：先掌握原生 JS 核心（必须），再理解 jQuery 能做什么 + 怎么快速迁移/维护。
1. JavaScript 核心基础（零基础到能写小交互）
1.1 变量与数据类型（ES6+ 写法）
// 优先用 const，需改值才用 let，永远别用 var（除非维护 2015 年前代码）
const name = "重阳"; // 字符串
let age = 30; // 数字（number）
const isDev = true; // 布尔
const skills = ["HTML", "CSS", "JS"]; // 数组
const person = { name, age, isDev }; // 对象（简写属性）
console.log(typeof person); // "object"
console.log(Array.isArray(skills)); // true
1.2 函数（现代写法）
// 箭头函数（最常用）
const greet = (name = "访客") => `你好，${name}！`; // 模板字符串
// 普通函数（需要 this 绑定时用）
function add(a, b) {
return a + b;
}
// 立即执行函数（IIFE，少用但偶尔有用）
(() => {
console.log("页面加载就执行");
})();
1.3 数组与对象常用操作（高频实战）
const nums = [10, 5, 8, 3, 12];
// 增删改查
nums.push(99); // 尾加
nums.unshift(1); // 头加
nums.pop(); // 尾删
nums.shift(); // 头删
nums.splice(2, 1, 88); // 从索引2删1个，插入88
// 遍历（优先 for...of）
for (const num of nums) {
console.log(num);
}
// 高级操作（map / filter / reduce 最常用）
const doubled = nums.map(n => n * 2);
const evens = nums.filter(n => n % 2 === 0);
const sum = nums.reduce((acc, n) => acc + n, 0);
// 对象解构 + 展开
const { name, age: userAge } = person;
const updated = { ...person, city: "Meppel" };
1.4 DOM 操作基础（原生 vs jQuery 对比表）
| 需求 | 原生 JavaScript (2026 推荐) | jQuery (经典写法) | 备注 |
|---|---|---|---|
| 获取元素 | document.querySelector(".box") | $(".box") | 原生更精确 |
| 获取多个 | document.querySelectorAll(".item") | $(".item") | 原生返回 NodeList |
| 修改文本 | el.textContent = "新内容" | el.text("新内容") | textContent 更安全 |
| 修改 HTML | el.innerHTML = "<strong>粗体</strong>" | el.html("<strong>粗体</strong>") | 警惕 XSS |
| 添加类 | el.classList.add("active") | el.addClass("active") | 原生更轻量 |
| 事件绑定 | btn.addEventListener("click", () => {...}) | btn.click(() => {...}) | 原生支持移除更方便 |
| AJAX / fetch | fetch("/api").then(r => r.json()) | $.get("/api", data => {...}) | fetch 内置 Promise |
| 隐藏/显示 | el.style.display = "none" / "block" | el.hide() / el.show() | — |
现代结论：凡是 jQuery 能做的，原生 JS 都能做，而且性能更好、体积更小。
但在维护 WordPress 主题、老后台管理系统、Bootstrap 3/4 项目时，jQuery 仍然是最快上手的方式。
2. 实战小案例：Todo List（原生 JS 版 vs jQuery 版）
HTML 骨架（共用）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>我的待办事项</h1>
<input type="text" id="taskInput" placeholder="输入新任务...">
<button id="addBtn">添加</button>
<ul id="taskList"></ul>
</div>
<!-- 两种版本都可切换使用 -->
<!-- <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> -->
<script src="app.js"></script>
</body>
</html>
原生 JS 版本（推荐学习 & 新项目）
// app.js - Vanilla JS
const input = document.getElementById("taskInput");
const addBtn = document.getElementById("addBtn");
const list = document.getElementById("taskList");
function addTask() {
const text = input.value.trim();
if (!text) return;
const li = document.createElement("li");
li.innerHTML = `
<span>${text}</span>
<button class="delete">×</button>
`;
li.querySelector(".delete").addEventListener("click", () => {
li.remove();
});
list.appendChild(li);
input.value = "";
input.focus();
}
addBtn.addEventListener("click", addTask);
input.addEventListener("keydown", e => {
if (e.key === "Enter") addTask();
});
jQuery 版本（维护老项目或快速原型时用）
// app.js - jQuery 版
$(function() { // 等价于 DOMContentLoaded
const $input = $("#taskInput");
const $addBtn = $("#addBtn");
const $list = $("#taskList");
$addBtn.on("click", function() {
const text = $input.val().trim();
if (!text) return;
const $li = $(`
<li>
<span>${text}</span>
<button class="delete">×</button>
</li>
`);
$li.find(".delete").on("click", function() {
$(this).parent().remove();
});
$list.append($li);
$input.val("").focus();
});
$input.on("keydown", function(e) {
if (e.key === "Enter") $addBtn.trigger("click");
});
});
3. 2026 年学习路径建议（实战导向）
- 必须精通（80% 时间）：
- DOM 操作（querySelector / addEventListener / classList / dataset）
- 数组方法（map/filter/reduce/find/forEach）
- 事件委托（event delegation）
- async/await + fetch
- 模块化（import/export 或 type=”module”）
- 了解 & 能读懂（20% 时间）：
- jQuery 基本语法（$() / .on() / .html() / .ajax() / .fadeIn() 等）
- 如何把 jQuery 代码改写成原生（常见面试题）
- 为什么很多老项目还在用 jQuery（WordPress、遗留系统、团队熟悉度）
- 小项目练习推荐（由简到难）：
- 动态待办列表（上面例子）
- Tabs 切换 / 手风琴菜单
- 图片懒加载 + 无限滚动
- 简单表单验证 + AJAX 提交
- Dark Mode 切换（localStorage 保存）
4. 一句话总结（2026 心态）
“原生 JS 是未来，jQuery 是过去和现在的大量遗产。”
先用原生把能力练扎实，再遇到老项目时看一眼 jQuery 文档就能快速维护。
下一讲预告（如果继续）：
- 事件机制深入 + 事件委托实战
- 模块化开发（ES modules vs bundler）
- 简单状态管理（不依赖框架）
- 常见面试 JS 题解析
你现在想重点练哪个部分？
- 更多原生 DOM 小案例
- jQuery → 原生 迁移对比
- 事件冒泡/委托的完整解释
- 用 fetch 做真实 API 交互
告诉我，我可以直接给对应代码 + 详细步骤。
