产品特色
内容简介 jQuery是当今应用比较广泛的一个JavaScript框架。它简化了HTML文件的遍历、事件处理、动画、Ajax互动等操作,从而使开发人员可以更加容易、便捷地开发出强大的静态和动态网页。 《扩展jQuery》分为4部分,共14章,讲解了为jQuery库创建自定义扩展的方法,从zui大可重用性的角度来设计和编写插件的方法,以及为jQuery UI编写小部件和特效的方法。此外,《扩展jQuery》还讲解了另外一些关键主题,如Ajax、事件处理、动画和Validation插件等的扩展。 《扩展jQuery》适合具有一定jQuery和JavaScript知识的前端开发人员阅读。
作者简介 Keith Wood有超过30年的开发经验,他从2007年初开始对jQuery做出贡献。他已经写了超过20个插件——包括最初的Datepicker、World Calendar和Datepicker、Countdown和SVG,并且把它们发布到了jQuery社区。他也经常在jQuery论坛上回答问题,并且成为了2012前五名的贡献者。
在日常工作中,他是一个网站开发者,使用Java/J2EE开发后端,以及使用jQuery开发前端。他生活在澳大利亚的悉尼,与他的搭档Trecialee一起利用业余时间书写了本书。
内页插图 目录 第1部分 简单的扩展
第1章 jQuery扩展 1
1.1 jQuery的背景 3
1.1.1 起源 4
1.1.2 发展 5
1.1.3 现状 6
1.2 扩展jQuery 7
1.2.1 开发者可以扩展什么 7
1.3 扩展的示例 10
1.3.1 jQuery UI 10
1.3.2 验证 11
1.3.3 图形幻灯片 12
1.3.4 集成谷歌地图 13
1.3.5 Cookies 13
1.3.6 颜色动画 14
1.4 总结 14
第2章 第一个插件 16
2.1 jQuery的架构 16
2.1.1 jQuery的扩展点 18
2.1.2 选择器 19
2.1.3 集合插件 19
2.1.4 工具函数 20
2.1.5 jQuery UI小部件 20
2.1.6 jQuery UI特效 20
2.1.7 动画属性 21
2.1.8 Ajax处理 21
2.1.9 事件处理 22
2.1.10 验证规则 22
2.2 一个简单的插件 22
2.2.1 占位文字 23
2.2.2 水印插件的代码 23
2.2.3 清除水印 25
2.2.4 使用水印插件 25
2.3 总结 27
第3章 选择器和过滤器 28
3.1 什么是选择器和过滤器 29
3.1.1 为什么要添加新的选择器 29
3.1.2 基本选择器 29
3.1.3 伪类选择器 31
3.2 添加一个伪类选择器 33
3.2.1 一个伪类选择器的结构 34
3.2.2 添加一个精确内容匹配选择器 35
3.2.3 添加一个内容模式匹配选择器 37
3.2.4 添加元素类型选择器 38
3.2.5 添加一个外语选择器 39
3.2.6 “验证插件”中的选择器 40
3.3 添加一个集合过滤器 41
3.3.1 一个集合选择器的结构 41
3.3.2 添加一个中间元素集合选择器 42
3.3.3 增强索引选择器 44
3.4 总结 45
第2部分 插件和函数
第4章 插件开发原则 49
4.1 插件设计 49
4.1.1 插件的好处 50
4.1.2 规划设计 50
4.1.3 插件模块化 51
4.2 指导原则 52
4.2.1 提供渐进增强 52
4.2.2 在所有地方使用唯一的名字 52
4.2.3 把一切都放在jQuery对象中 53
4.2.4 不要依赖$与jQuery的等同性 53
4.2.5 利用作用域隐藏实现细节 54
4.2.6 用“方法”调用附加功能 55
4.2.7 尽可能返回jQuery对象以便链式调用 55
4.2.8 使用data函数来存储实例详细信息 56
4.2.9 预估定制点 56
4.2.10 使用合理的默认值 57
4.2.11 允许本地化/地方化 58
4.2.12 用CSS控制插件样式 59
4.2.13 在主流浏览器中测试 61
4.2.14 创建可重复的测试用例集 61
4.2.15 提供示例和文档 62
4.3 总结 64
第5章 集合插件 65
5.1 什么是集合插件 65
5.2 一个插件框架 66
5.2.1 MaxLength插件 66
5.2.2 MaxLength插件的操作 67
5.3 定义插件 68
5.3.1 声明一个命名空间 68
5.3.2 封装 69
5.3.3 使用单例 69
5.4 附加到元素 71
5.4.1 基本的附加 71
5.4.2 插件初始化 72
5.4.3 调用方法 73
5.4.4 取值方法 74
5.5 设置选项 76
5.5.1 插件默认值 76
5.5.2 本地化/地方化 77
5.5.3 响应选项的变化 79
5.5.4 实现 MaxLength 的选项 80
5.5.5 启用和禁用小部件 82
5.6 添加事件处理器 83
5.6.1 注册一个事件处理器 83
5.6.2 触发一个事件处理器 84
5.7 添加方法 84
5.8 移除插件 85
5.9 收尾工作 86
5.9.1 插件的主要部分 86
5.9.2 设置插件样式 88
5.10 完整的插件 89
5.11 总结 91
第6章 函数插件 92
6.1 定义插件 93
6.1.1 本地化插件 93
6.1.2 框架代码 94
6.1.3 加载本地化文件 94
6.2 jQuery Cookie插件 97
6.2.1 Cookie的交互 97
6.2.2 读写cookie 98
6.3 总结 100
第7章 插件的测试、打包和文档 102
7.1 测试插件 103
7.1.1 测试什么 103
7.1.2 使用QUnit 104
7.1.3 测试MaxLength插件 105
7.1.4 测试选项的设置和获取 108
7.1.5 模拟用户动作 109
7.1.6 测试事件回调 111
7.2 打包插件 112
7.2.1 整理所有文件 112
7.2.2 最小化插件 113
7.2.3 提供一个基本示例 116
7.3 为插件编写文档 118
7.3.1 选项文档 118
7.3.2 方法和工具函数的文档 119
7.3.3 演示插件的功能 120
7.4 总结 121
第3部分 扩展jQuery UI
第8章 jQuery UI小部件 125
8.1 小部件框架 126
8.1.1 jQuery UI的模块 126
8.1.2 小部件模块 128
8.1.3 MaxLength插件 128
8.1.4 MaxLength插件的操作 129
8.2 定义小部件 130
8.2.1 声明一个名字 130
8.2.2 封装插件 131
8.2.3 声明这个小部件 131
8.3 把插件附加到一个元素 133
8.4 处理插件选项 134
8.4.1 小部件默认值 134
8.4.2 响应选项变化 135
8.4.3 实现MaxLength的选项 137
8.4.4 启用和禁用小部件 140
8.5 添加事件处理器 140
8.5.1 注册一个事件处理器 140
8.5.2 触发一个事件处理器 141
8.6 添加方法 142
8.7 移除小部件 143
8.8 收尾 145
8.8.1 小部件主体 145
8.8.2 设置小部件样式 147
8.9 完整的插件 148
8.10 总结 150
第9章 jQuery UI的鼠标交互 151
9.1 jQuery UI Mouse(鼠标)模块 151
9.1.1 鼠标拖动操作 152
9.1.2 鼠标选项 153
9.2 定义小部件 153
9.2.1 签名功能 153
9.2.2 Signature插件的操作 154
9.2.3 声明这个小部件 156
9.3 把插件附加到一个元素上 157
9.3.1 框架初始化 157
9.3.2 自定义初始化 157
9.4 处理插件选项 159
9.4.1 小部件默认值 159
9.4.2 设置选项 161
9.4.3 实现Signature选项 162
9.4.4 启用和禁用小部件 162
9.5 添加事件处理器 163
9.5.1 注册一个事件处理器 163
9.5.2 触发一个事件处理器 164
9.6 与鼠标交互 164
9.6.1 是否可以开始一个拖动 165
9.6.2 开始一个拖动 165
9.6.3 跟踪一个拖动 166
9.6.4 结束一个拖动 166
9.7 添加方法 167
9.7.1 清除签名 167
9.7.2 转换为JSON 168
9.7.3 重新绘制签名 169
9.7.4 检查签名是否存在 170
9.8 移除小部件 171
9.9 完整的插件 172
9.10 总结 173
第10章 jQuery UI特效 174
10.1 jQuery UI特效框架 175
10.1.1 Effects Core模块 175
10.1.2 公共特效函数 176
10.1.3 已有特效 178
10.2 添加一个新特效 180
10.2.1 内爆一个元素 180
10.2.2 初始化特效 181
10.2.3 实现特效 183
10.2.4 在jQuery UI 1.9之前实现特效 184
10.2.5 完整的特效 185
10.3 缓动动画 185
10.3.1 什么是缓动 185
10.3.2 已有的缓动 187
10.3.3 添加一个新缓动 189
10.4 总结 191
第4部分 其他扩展
第11章 属性的动画 195
11.1 动画框架 196
11.1.1 动画功能 196
11.1.2 步进一个动画 198
11.2 添加一个自定义属性的动画 200
11.2.1 background-position的动画 200
11.2.2 声明和获取这个属性值 201
11.2.3 更新属性值 203
11.2.4 background-position在jQuery 1.7中的动画 204
11.2.5 完整的插件 205
11.3 总结 206
第12章 扩展Ajax 207
12.1 Ajax框架 208
12.1.1 预过滤器 209
12.1.2 传输器 209
12.1.3 转换器 210
12.2 添加一个Ajax预过滤器 210
12.2.1 改变数据类型 211
12.2.2 禁用Ajax处理 211
12.3 添加一个Ajax传输器 212
12.3.1 加载图像数据 212
12.3.2 为测试模拟HTML数据 214
12.4 添加一个Ajax转换器 217
12.4.1 逗号分隔值(CSV)格式 217
12.4.2 把文本转换为CSV 218
12.4.3 把CSV转换为表格 220
12.5 Ajax插件 222
12.6 总结 222
第13章 扩展事件 224
13.1 特殊事件框架 225
13.1.1 绑定事件处理器 225
13.1.2 触发事件 226
13.2 添加一个特殊事件 227
13.2.1 添加一个右键单击事件 227
13.2.2 禁用右击事件 229
13.2.3 多个右击事件 230
13.2.4 事件的集合函数 233
13.3 增强一个已有事件 234
13.4 事件的其他功能 236
13.4.1 事件的默认动作 236
13.4.2 派发前和派发后回调 237
13.4.3 阻止事件冒泡 238
13.4.4 自动绑定和代理 238
13.5 总结 239
第14章 创建验证规则 241
14.1 Validation插件 242
14.2 添加一个验证规则 244
14.2.1 添加一个模式匹配规则 245
14.2.2 生成模式匹配规则 247
14.3 添加一个多字段验证规则 248
14.3.1 分组验证 249
14.3.2 定义一个多字段规则 249
14.4 总结 251
附录A 正则表达式 253
词汇表 261
前言/序言
《前端开发精要:解锁现代Web构建的奥秘》 一、 现代Web开发的基石:HTML5与CSS3的深度解析 在信息爆炸的时代,Web应用程序已成为我们生活和工作中不可或缺的一部分。而构建这些丰富、交互式Web体验的基石,无疑是HTML5和CSS3。本书并非浅尝辄止,而是致力于深入挖掘这两种核心技术的精髓,帮助开发者构建出既美观又功能强大的现代Web界面。 HTML5:语义化构建与高效结构 超越标签的理解: 我们将详细剖析HTML5引入的语义化标签(如`
`, ``, ``, ``等)的真正意义,以及它们如何在提升内容可访问性、搜索引擎优化(SEO)和代码可读性方面发挥关键作用。理解这些标签的意图,能够帮助你构建出更具结构性和逻辑性的Web页面。 多媒体的革新: ``和``标签的引入极大地简化了多媒体内容的嵌入和控制。本书将深入探讨它们的属性、事件以及如何在不同浏览器环境中实现兼容性播放,甚至结合JavaScript实现更高级的播放控制和用户交互。 表单元素的进化: HTML5引入了大量新的表单输入类型(如`date`, `email`, `url`, `number`等)和属性(如`required`, `placeholder`, `pattern`等),极大地增强了表单的可用性和数据验证能力。我们将逐一讲解这些新特性,并展示如何利用它们提升用户体验和数据准确性。 Web存储与离线应用: `localStorage`和`sessionStorage`提供了在客户端存储数据的便捷方式,而Service Workers则开启了构建真正的离线Web应用程序的可能性。本书将详细介绍这些API的使用方法,以及它们在提升Web应用性能和用户体验方面的潜力。 Canvas与SVG: 无论是动态图形绘制还是矢量插画,`Canvas`和`SVG`都提供了强大的解决方案。我们将深入讲解它们的API,并通过实际案例展示如何利用它们创建引人入胜的视觉效果和交互式图表。 CSS3:样式与交互的无限可能 响应式设计的实现: 媒体查询(Media Queries)是响应式设计的核心。我们将系统性地讲解如何使用媒体查询为不同设备和屏幕尺寸设计适配的布局和样式,确保Web内容在任何设备上都能获得最佳的浏览体验。 高级选择器与排版: 除了基本的类和ID选择器,CSS3引入了更多强大的选择器(如`:nth-child()`, `~`, `+`等),能够更精确地定位和控制页面元素。同时,我们将探讨字体加载、`text-overflow`、`word-wrap`等排版属性,以及如何通过它们实现美观且易读的文本呈现。 过渡与动画的魔力: CSS3的`transition`和`animation`属性赋予了网页生命力。本书将详细解析`transition`的各种属性(如`property`, `duration`, `timing-function`, `delay`)以及`keyframes`动画的创建过程,并结合实际示例,指导你如何创建流畅、吸引人的视觉效果。 Flexbox与Grid布局: Flexbox和Grid是现代CSS布局的两大基石。我们将深入理解Flexbox的轴模型和对齐方式,以及Grid布局的二维网格系统,通过丰富的实例展示如何轻松实现复杂的页面布局,摆脱传统浮动布局的束缚。 视觉增强: 渐变(Gradients)、阴影(Box Shadow)、圆角(Border Radius)、滤镜(Filters)等属性能够极大地提升网页的视觉表现力。我们将详细讲解这些属性的用法,并展示如何利用它们创建富有层次感和设计感的界面。 CSS预处理器(Sass/Less)简介: 虽然本书主要聚焦原生CSS3,但我们会简要介绍Sass和Less等CSS预处理器的优势,包括变量、嵌套、Mixin等功能,以及它们如何提升CSS代码的可维护性和开发效率。 二、 动态交互的艺术:JavaScript核心与现代API JavaScript是Web应用程序的灵魂,它赋予了静态页面以生命和智能。本书将带领读者深入理解JavaScript的核心概念,并掌握一系列现代JavaScript API,从而能够构建出复杂、高性能的交互式Web应用。 JavaScript语言精髓: 数据类型与运算符: 深入理解JavaScript的七种基本数据类型(String, Number, Boolean, Null, Undefined, Symbol, BigInt)和对象类型,以及各种运算符的优先级和行为。 控制流与函数: 掌握条件语句(if/else, switch)、循环语句(for, while, do-while)以及函数(声明函数、表达式函数、箭头函数)的定义和使用。理解作用域、闭包、原型链等核心概念,是写出高质量JavaScript代码的关键。 对象与面向对象编程: 深入理解JavaScript的面向对象特性,包括构造函数、原型链继承、类(ES6+)以及对象字面量。通过实例讲解如何构建可重用、可扩展的对象模型。 异步编程: 回调函数、Promise、async/await是处理异步操作的利器。我们将详细讲解它们的工作原理和应用场景,以及如何有效地管理异步任务,避免回调地狱。 ES6+新特性: let/const、模板字符串、解构赋值、展开/剩余运算符、模块化(import/export)等ES6+带来的强大特性,极大地提高了JavaScript的开发效率和代码的可读性。本书将系统地讲解这些新特性,并指导你如何在实际项目中使用它们。 DOM操作与事件处理: 高效的DOM查询与操作: 掌握`querySelector`、`querySelectorAll`等现代DOM查询方法,以及`createElement`、`appendChild`、`removeChild`等元素的创建与删除。学习如何高效地修改元素的属性、样式和内容。 事件模型与冒泡/捕获: 深入理解事件监听器、事件对象以及事件委托。掌握如何处理各种用户交互事件(如click, mouseover, keydown, submit),并利用事件冒泡和捕获机制优化事件处理。 表单验证与交互: 结合JavaScript,我们可以实现客户端的即时表单验证,提供即时反馈,提升用户体验。本书将展示如何使用JavaScript编写灵活的表单验证逻辑。 现代Web API的探索: Fetch API与AJAX: 告别XMLHttpRequest,学习使用更现代、更强大的Fetch API来发送HTTP请求,获取服务器数据。我们将讲解GET、POST等请求方式,以及如何处理响应数据和错误。 Web Workers: 了解Web Workers如何将JavaScript代码移至后台线程,避免阻塞主线程,从而实现更流畅的用户界面和更高效的计算密集型任务。 地理定位(Geolocation API): 学习如何获取用户的地理位置信息,并将其应用于地图应用、位置服务等场景。 本地存储(localStorage/sessionStorage): 再次强调,本书将深入讲解本地存储的API,包括数据的存取、过期策略等,并展示如何利用它们实现用户偏好设置、购物车等功能。 IndexedDB: 对于更复杂的离线存储需求,IndexedDB提供了强大的客户端数据库能力。本书将介绍IndexedDB的基本概念和操作,帮助开发者构建功能丰富的离线Web应用。 WebSocket: 实时通信是现代Web应用的重要组成部分。我们将讲解WebSocket的原理和使用方法,以及如何实现客户端与服务器的实时双向通信,构建在线聊天、实时数据更新等功能。 三、 构建健壮的Web应用:设计模式、性能优化与工具链 仅仅掌握HTML、CSS和JavaScript是不足以构建出高质量、可维护的Web应用的。本书还将带领读者进入更深层次的Web开发领域,包括常用的设计模式、性能优化策略以及现代开发工具链的使用,从而提升开发效率和应用质量。 JavaScript设计模式: 模块模式: 学习如何使用JavaScript的模块模式(包括IIFE、CommonJS、ES Modules)来组织代码,避免命名冲突,提高代码的可维护性和复用性。 工厂模式与构造函数模式: 理解如何使用这些模式来创建对象,并实现代码的抽象和复用。 观察者模式: 掌握如何实现事件驱动的松耦合设计,让组件之间能够通过事件进行通信。 单例模式: 学习如何确保一个类只有一个实例,并提供全局访问点。 装饰器模式: 探索如何动态地给对象添加新的功能。 其他实用模式: 适当介绍发布/订阅模式、外观模式等,帮助读者根据实际需求选择合适的模式。 Web应用性能优化: 代码优化: HTTP请求优化: 学习如何通过合并文件、使用雪碧图(Sprite)、懒加载等技术减少HTTP请求数量。 资源压缩与代码精简: 讲解JavaScript、CSS和HTML代码的压缩与混淆技术,减小文件体积。 图片优化: 介绍不同图片格式(JPEG, PNG, GIF, WebP)的选择,以及图片压缩、响应式图片的使用。 代码执行优化: 学习如何通过defer、async属性优化脚本加载,避免阻塞渲染。 内存管理与垃圾回收: 了解JavaScript的内存管理机制,避免内存泄漏。 渲染优化: CSS渲染树与DOM树: 理解浏览器如何解析CSS和HTML,构建渲染树。 重绘(Repaint)与重排(Reflow): 深入分析DOM操作对重绘和重排的影响,并学习如何最小化它们。 利用CSS动画与Transition: 强调使用CSS动画和Transition通常比JavaScript动画更高效。 网络优化: CDN加速: 讲解CDN(内容分发网络)的作用,以及如何利用它提升静态资源的加载速度。 HTTP/2与HTTP/3: 简要介绍新一代HTTP协议的优势,以及它们对Web性能的影响。 缓存策略: 讲解浏览器缓存、服务器端缓存以及HTTP缓存头的使用。 现代开发工具链: 版本控制(Git): 强调Git在团队协作和项目管理中的重要性,并介绍常用的Git命令。 包管理器(npm/Yarn): 学习如何使用npm或Yarn来管理项目依赖,安装和更新第三方库。 构建工具(Webpack/Vite): Webpack: 深入讲解Webpack的核心概念,包括Entry, Output, Loaders, Plugins,以及如何配置Webpack来实现模块打包、代码转换、热更新等功能。 Vite: 介绍Vite作为一种更快速、更现代的构建工具,其原生ES模块优势以及快速开发体验。 代码质量工具(ESLint/Prettier): 学习使用ESLint来规范JavaScript代码风格,发现潜在的错误,以及使用Prettier来自动格式化代码,确保代码一致性。 浏览器开发者工具: 熟练掌握Chrome、Firefox等浏览器提供的开发者工具,包括Element, Console, Network, Performance, Application等面板,用于调试、性能分析和网络监控。 四、 拥抱未来:Web组件与渐进式Web应用(PWA) 随着Web技术的不断发展,Web组件和渐进式Web应用(PWA)正成为构建下一代Web应用的重要方向。本书将引领读者探索这些前沿技术,为构建更具扩展性、更智能的Web应用做好准备。 Web Components: Custom Elements: 学习如何创建自定义的HTML标签,封装可复用的UI组件。 Shadow DOM: 理解Shadow DOM如何实现DOM和CSS的封装,避免样式污染。 HTML Templates: 掌握如何使用 `` 标签定义可复用的HTML片段。 HTML Imports(已弃用,但了解其概念仍有价值): 了解其历史演进。 Web Components与框架的结合: 探讨Web Components如何在React, Vue, Angular等主流框架中应用,实现跨框架的组件复用。 渐进式Web应用(PWA): Manifest文件: 学习如何创建`manifest.json`文件,为PWA提供应用图标、名称、启动画面等信息,使其能够被添加到主屏幕。 Service Workers: 生命周期与事件: 深入理解Service Worker的安装、激活、消息监听等生命周期。 缓存策略: 学习如何利用Service Worker实现离线缓存,包括网络优先、缓存优先、Stale-while-revalidate等策略。 后台同步与推送通知: 探讨Service Worker在实现后台同步和接收推送通知方面的能力。 PWA的优势与应用场景: 总结PWA带来的可靠性、性能和用户体验提升,并分析其在电商、新闻、社交等领域的应用潜力。 总结 《前端开发精要:解锁现代Web构建的奥秘》是一本面向有一定前端开发基础,渴望深入理解Web技术核心、掌握现代开发技巧,并展望未来发展趋势的开发者的指南。本书通过严谨的理论阐述、丰富的实战案例和对前沿技术的探索,旨在帮助读者建立起扎实的Web开发功底,成为一名更高效、更具创造力的前端工程师,自信地应对日新月异的Web开发挑战。
这本书绝对是我近期阅读过的最引人入胜的技术书籍之一,尽管它的主题是jQuery的扩展,但它展现出的深度和广度着实令人惊叹。我之前一直认为自己对jQuery的理解已经相当到位,但这本书彻底刷新了我的认知。作者以一种极其精妙的方式,将那些看似晦涩的插件开发原理、自定义选择器、以及与DOM更深层次的交互方式娓娓道来。我尤其喜欢其中关于性能优化和代码复用的章节,它们不仅仅是理论的堆砌,而是充满了实实在在的、可操作的建议,通过大量的代码示例,我能够清晰地看到如何在实际项目中应用这些技巧,从而写出更高效、更易于维护的代码。书中的案例分析也非常出色,它们涵盖了各种真实场景,让我能够将学到的知识融会贯通。例如,在处理复杂表单验证时,书中提供的自定义方法不仅简洁高效,还极大地提升了用户体验。读完这本书,我感觉自己仿佛掌握了一套全新的开发工具箱,能够轻松应对各种前端挑战。它不仅仅是关于jQuery的“扩展”,更像是打开了通往更高级前端开发的大门,让我对未来在JavaScript生态中的探索充满了期待。