HTML + CSS + JavaScript 快速入门（三）：JS 与 jQuery 实战
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 年前代码）constname="重阳";// 字符串letage=30;// 数字（number）constisDev=true;// 布尔constskills=["HTML","CSS","JS"];// 数组constperson={name,age,isDev};// 对象（简写属性）console.log(typeofperson);// "object"console.log(Array.isArray(skills));// true1.2 函数（现代写法）
// 箭头函数（最常用）constgreet=(name="访客")=>`你好，${name}！`;// 模板字符串// 普通函数（需要 this 绑定时用）functionadd(a,b){returna+b;}// 立即执行函数（IIFE，少用但偶尔有用）(()=>{console.log("页面加载就执行");})();1.3 数组与对象常用操作（高频实战）
constnums=[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(constnumofnums){console.log(num);}// 高级操作（map / filter / reduce 最常用）constdoubled=nums.map(n=>n*2);constevens=nums.filter(n=>n%2===0);constsum=nums.reduce((acc,n)=>acc+n,0);// 对象解构 + 展开const{name,age:userAge}=person;constupdated={...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 骨架（共用）
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Todo List</title><linkrel="stylesheet"href="style.css"></head><body><divclass="container"><h1>我的待办事项</h1><inputtype="text"id="taskInput"placeholder="输入新任务..."><buttonid="addBtn">添加</button><ulid="taskList"></ul></div><!-- 两种版本都可切换使用 --><!-- <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> --><scriptsrc="app.js"></script></body></html>原生 JS 版本（推荐学习 & 新项目）
// app.js - Vanilla JSconstinput=document.getElementById("taskInput");constaddBtn=document.getElementById("addBtn");constlist=document.getElementById("taskList");functionaddTask(){consttext=input.value.trim();if(!text)return;constli=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(){// 等价于 DOMContentLoadedconst$input=$("#taskInput");const$addBtn=$("#addBtn");const$list=$("#taskList");$addBtn.on("click",function(){consttext=$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 交互
告诉我，我可以直接给对应代码 + 详细步骤。