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重阳;// 字符串letage30;// 数字numberconstisDevtrue;// 布尔constskills[HTML,CSS,JS];// 数组constperson{name,age,isDev};// 对象简写属性console.log(typeofperson);// objectconsole.log(Array.isArray(skills));// true1.2 函数现代写法// 箭头函数最常用constgreet(name访客)你好${name};// 模板字符串// 普通函数需要 this 绑定时用functionadd(a,b){returnab;}// 立即执行函数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...offor(constnumofnums){console.log(num);}// 高级操作map / filter / reduce 最常用constdoublednums.map(nn*2);constevensnums.filter(nn%20);constsumnums.reduce((acc,n)accn,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 更安全修改 HTMLel.innerHTML strong粗体/strongel.html(strong粗体/strong)警惕 XSS添加类el.classList.add(active)el.addClass(active)原生更轻量事件绑定btn.addEventListener(click, () {...})btn.click(() {...})原生支持移除更方便AJAX / fetchfetch(/api).then(r r.json())$.get(/api, data {...})fetch 内置 Promise隐藏/显示el.style.display none/blockel.hide()/el.show()—现代结论凡是 jQuery 能做的原生 JS 都能做而且性能更好、体积更小。但在维护 WordPress 主题、老后台管理系统、Bootstrap 3/4 项目时jQuery 仍然是最快上手的方式。2. 实战小案例Todo List原生 JS 版 vs jQuery 版HTML 骨架共用!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleTodo List/titlelinkrelstylesheethrefstyle.css/headbodydivclasscontainerh1我的待办事项/h1inputtypetextidtaskInputplaceholder输入新任务...buttonidaddBtn添加/buttonulidtaskList/ul/div!-- 两种版本都可切换使用 --!-- script srchttps://code.jquery.com/jquery-3.7.1.min.js/script --scriptsrcapp.js/script/body/html原生 JS 版本推荐学习 新项目// app.js - Vanilla JSconstinputdocument.getElementById(taskInput);constaddBtndocument.getElementById(addBtn);constlistdocument.getElementById(taskList);functionaddTask(){consttextinput.value.trim();if(!text)return;constlidocument.createElement(li);li.innerHTMLspan${text}/span button classdelete×/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.keyEnter)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 classdelete×/button /li);$li.find(.delete).on(click,function(){$(this).parent().remove();});$list.append($li);$input.val().focus();});$input.on(keydown,function(e){if(e.keyEnter)$addBtn.trigger(click);});});3. 2026 年学习路径建议实战导向必须精通80% 时间DOM 操作querySelector / addEventListener / classList / dataset数组方法map/filter/reduce/find/forEach事件委托event delegationasync/await fetch模块化import/export 或 type“module”了解 能读懂20% 时间jQuery 基本语法$() / .on() / .html() / .ajax() / .fadeIn() 等如何把 jQuery 代码改写成原生常见面试题为什么很多老项目还在用 jQueryWordPress、遗留系统、团队熟悉度小项目练习推荐由简到难动态待办列表上面例子Tabs 切换 / 手风琴菜单图片懒加载 无限滚动简单表单验证 AJAX 提交Dark Mode 切换localStorage 保存4. 一句话总结2026 心态“原生 JS 是未来jQuery 是过去和现在的大量遗产。”先用原生把能力练扎实再遇到老项目时看一眼 jQuery 文档就能快速维护。下一讲预告如果继续事件机制深入 事件委托实战模块化开发ES modules vs bundler简单状态管理不依赖框架常见面试 JS 题解析你现在想重点练哪个部分更多原生 DOM 小案例jQuery → 原生 迁移对比事件冒泡/委托的完整解释用 fetch 做真实 API 交互告诉我我可以直接给对应代码 详细步骤。