欢迎光临
我们一直在努力

JQuery学习文档 - 汇总篇

第一部分:基础入门与环境构建

链接:JQuery学习文档(一)-CSDN博客

1.1. 绪论:jQuery 的现代定位

1.1.1. 技术背景与设计哲学:"Write Less, Do More" 的核心价值

1.1.2. 历史贡献与现代价值:从“霸主”到“辅助库”的角色转变

1.1.3. jQuery 4.x 新时代:放弃 IE 支持、现代化构建与性能提升

1.2. 版本选型与生态现状

1.2.1. 版本演进全解:3.x (维护版) vs 4.x (现代版) vs Slim 版本差异

1.2.2. 2026 生态定位:在 SSR 水合、静态站点生成 (SSG)、WordPress 主题中的核心地位

1.2.3. 竞品对比:为什么还要学 jQuery?(与 Alpine.js, Petite-Vue, 原生 JS 的对比)

1.3. 环境搭建与工程化入门

1.3.1. 传统引入:CDN 策略与 SRI 完整性校验(安全基线)

1.3.2. 现代工程化引入:NPM/Yarn/Pnpm 安装与 ES Module import 语法

1.3.3. 构建工具配置:Vite/Webpack 处理 jQuery 依赖与全局注入优化

第二部分:核心基础与选择器引擎

链接:JQuery学习文档(二)-CSDN博客

2.1. jQuery 对象工厂:$() 的多种调用形式

2.1.1. 选择器表达式:CSS 选择器完全支持与扩展

2.1.2. 原生对象包装:$(element) 的意义与用途

2.1.3. HTML 字符串创建:动态生成 DOM 的安全风险(XSS 防护与 CSP 兼容)

2.2. 选择器引擎详解

2.2.1. 基础选择器:ID、类、元素、群组

2.2.2. 层级选择器:子代 (>)、后代、兄弟 (+, ~)

2.2.3. 过滤选择器:基本过滤、内容过滤、可见性过滤

2.2.4. 属性选择器:[attr], [attr=val] 等高级用法

2.3. jQuery 对象与原生 DOM 对象

2.3.1. 核心区别:jQuery 对象是类数组的包装层

2.3.2. 相互转化:get() vs [] 下标取值,$() 包装原生对象

2.4. 实战陷阱与最佳实践

2.4.1. 性能优化:缓存 jQuery 对象与链式调用的正确姿势

2.4.2. 伪类选择器 的性能损耗与原生 JS 替代方案

第三部分:DOM 操作与数据管理

链接:JQuery学习文档(三)-CSDN博客

3.1. DOM 节点操作实战

3.1.1. 节点创建与插入:.append(), .prepend(), .appendTo() 等方法对比

3.1.2. 外部插入与移动:.after(), .before(), .insertAfter() 的节点移动特性

3.1.3. 性能深究:DOM 操作重绘 与回流 的优化策略

3.2. 节点删除与克隆

3.2.1. 移除方法对比:.remove() (销毁数据和事件) vs .detach() (保留数据) vs .empty()

3.2.2. 深浅拷贝:.clone([withDataAndEvents]) 的深度解析与内存管理

3.3. 结构包裹与替换

3.3.1. 包裹方法:.wrap(), .wrapAll(), .wrapInner()

3.3.2. 替换与解包:.replaceWith(), .unwrap()

3.4. 属性、样式与数据缓存

3.4.1. 属性与特性操作:.attr() (HTML 属性) vs .prop() (DOM 属性) 的本质区别

3.4.2. 表单值处理:.val() 的多选与下拉框兼容处理

3.4.3. 文本与HTML:.html() vs .text() 与 XSS 防护机制

3.5. 样式操作体系

3.5.1. .css() 的原子操作与对象批量设置

3.5.2. 类名操作:.addClass(), .removeClass(), .toggleClass() 配合回调函数

3.5.3. 尺寸与位置体系:width/height vs inner/outer 尺寸计算差异

3.5.4. 偏移与滚动:.offset() vs .position() 坐标系与平滑滚动实现

3.6. 数据缓存机制

3.6.1. .data() 底层原理:jQuery.expando 与内存缓存映射

3.6.2. HTML5 data-* 属性的自动读取与类型转换

3.6.3. 避坑指南:.data() 与 .attr('data-xxx') 的不同步问题

第四部分:事件机制与动画系统

链接:JQuery学习文档(四)-CSDN博客

4.1. 事件处理深度解析

4.1.1. 事件绑定演进史:废弃的 .bind()/.live()/.delegate() 与现代标准 .on()

4.1.2. 统一接口:.on() 与 .off() 的全面解析与签名重载

4.1.3. 一次性绑定:.one() 的内存管理优势

4.2. 事件委托原理

4.2.1. 冒泡机制与事件委托的优势(动态绑定与性能优化)

4.2.2. .on(events, selector, handler) 签名深度剖析

4.3. 事件对象与交互

4.3.1. 事件对象修正:event.originalEvent 与原生事件对象

4.3.2. 冒泡与默认行为:stopPropagation() vs preventDefault()

4.3.3. 模拟触发:.trigger() (触发事件冒泡) vs .triggerHandler() (不冒泡)

4.4. 高级特性

4.4.1. 事件命名空间:.on('click.myPlugin') 的批量解绑与模块化管理

4.4.2. 自定义事件:发布/订阅模式的 jQuery 实现

4.5. 动画与特效系统

4.5.1. 预置动画:.show(), .hide(), .toggle() 与滑动淡入淡出

4.5.2. 自定义动画 .animate():参数详解与队列机制

4.5.3. 队列控制:.stop(), .finish(), .queue(), .dequeue() 详解

4.6. 现代视角下的动画

4.6.1. 性能对比:jQuery 动画 vs CSS3 Transition/Animation vs Web Animations API

4.6.2. 无障碍访问 (a11y):prefers-reduced-motion 媒体查询的兼容处理

4.6.3. 扩展缓动:jQuery Easing Plugin 与自定义缓动函数

第五部分:异步通信与后端交互

链接:JQuery学习文档(五)-CSDN博客

5.1. Ajax 与网络请求

5.1.1. 核心方法 $.ajax():配置项全解

5.1.2. 生命周期钩子:beforeSend, success, error, complete

5.1.3. 全局 Ajax 事件:ajaxStart, ajaxStop 与全局加载遮罩

5.2. 快捷方法与工具

5.2.1. $.get(), $.post(), $.getJSON(), $.getScript()

5.2.2. 序列化工具:$.param() 与表单序列化 .serialize()

5.3. Promise 与 Deferred 对象

5.3.1. Deferred 对象创建:$.Deferred() 与状态管理

5.3.2. Promise 风格调用:解决回调地狱

5.3.3. 并发控制:$.when(…).done() 实现多请求并行

5.3.4. jQuery Promise vs ES6 Promise 的差异与兼容性

5.4. 跨域与安全

5.4.1. CORS 跨域配置:crossDomain 参数与 withCredentials 凭证携带

5.4.2. 安全防护:XSRF/CSRF Token 处理策略与 XSS 防御

5.4.3. 历史遗留:JSONP 原理回顾(现代开发已弃用)

第六部分:底层原理与架构设计

链接:JQuery学习文档(六)-CSDN博客

6.1. jQuery 源码解析与架构思想

6.1.1. 整体架构设计:沙箱模式 (IIFE) 与变量隔离

6.1.2. 无 new 构建机制:jQuery.fn.init 的巧妙返回

6.1.3. 链式调用实现:return this 的奥秘

6.2. 原型与扩展

6.2.1. 原型链:jQuery.fn === jQuery.prototype

6.2.2. 深浅拷贝:$.extend() 源码逻辑与插件开发基础

6.2.3. 冲突处理:$.noConflict() 源码解析与多库共存

6.3. 核心引擎剖析

6.3.1. Sizzle 选择器引擎:词法分析 -> 块匹配 -> 过滤流程

6.3.2. 回溯查找:pushStack 方法维护栈结构

6.3.3. 钩子机制:jQuery.cssHooks, jQuery.valHooks 的扩展能力

6.4. 插件开发与生态

6.4.1. 插件开发规范:标准模板、闭包封装与默认配置

6.4.2. 最佳实践:链式调用保持、单例模式与数据管理

6.4.3. 经典插件生态:轮播、弹窗与表单验证的集成思路

6.5. 现代工具方法集

6.5.1. 数组与对象处理:$.map(), $.grep(), $.each(), $.merge()

6.5.2. 类型检测:$.type() 与 $.isPlainObject()

6.5.3. 函数绑定:$.proxy() 与 this 指向修正(对比 ES6 Arrow Functions)

第七部分:工程化实践与现代演进

链接:JQuery学习文档(七)-CSDN博客

7.1. 现代开发流程与工程化

7.1.1. 模块化演进:AMD/CommonJS/UMD 到 ES Module 的适配

7.1.2. 构建优化:Tree-shaking 的局限性与代码分割策略

7.1.3. TypeScript 支持:@types/jquery 与类型安全开发

7.2. 代码质量与规范

7.2.1. ESLint 规则配置:针对 jQuery 的规则优化(如禁止全局 $)

7.2.2. 调试技巧:Chrome DevTools 中的 DOM 断点与事件监听

7.2.3. 单元测试:QUnit 或 Jest 对 jQuery 逻辑的测试覆盖

7.3. 未来演进:混合开发与迁移

7.3.1. jQuery 与现代框架共存:Vue/React 中引入 jQuery 的风险与防范

7.3.2. 微前端场景:jQuery 应用的沙箱隔离与通信方案

7.4. 迁移与重构策略

7.4.1. 思维模式转变:DOM 驱动 vs 数据驱动

7.4.2. 渐进式迁移:后端渲染页面中局部引入 Petite-Vue/Alpine.js 替代 jQuery 逻辑

7.4.3. 原生替代方案速查表:querySelectorAll, fetch, classList 等原生 API 对照

7.4.4. 总结:2026 视角下的 jQuery 最佳实践定位(维护旧项目与轻量级交互首选)

赞(0)
未经允许不得转载:171主机测评 » JQuery学习文档 - 汇总篇
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址