JavaScript DOM高级程序设计

第一部分　深入理解DOM脚本编程

第1章　遵循最佳实践　2

1.1　不唐突和渐进增强　2

1.2　让JavaScript运行起来　4

1.2.1　把行为从结构中分离出来　4

1.2.2　不要版本检测　11

1.2.3　通过平稳退化保证可访问性　13

1.2.4　为重用命名空间而进行规划　14

1.2.5　通过可重用的对象把事情简化　17

1.2.6　一定要自己动手写代码　26

1.3　JavaScript语法中常见的陷阱　27

1.3.1　区分大小写　27

1.3.2　单引号与双引号　　27

1.3.3　换行　28

1.3.4　可选的分号和花括号　28

1.3.5　重载(并非真正的重载)　29

1.3.6　匿名函数　30

1.3.7　作用域解析和闭包　30

1.3.8　迭代对象　35

1.3.9　函数的调用和引用(不带括号)　36

1.4　实例：WYSIWYGJavaScript翻转图　36

1.5　小结　43

第2章　创建可重用的对象　44

2.1　对象中包含什么　44

2.1.1　继承　45

2.1.2　理解对象成员　46

2.1.3　window对象中的一切　48

2.1.4　理解作用域和闭包是根本　51

2.2　创建你自己的对象　52

2.2.1　一变多：创建构造函数　53

2.2.2　添加静态方法　54

2.2.3　向原型中添加公有方法　55

2.2.4　公有、私有、特权和静态成员真那么重要吗　58

2.2.5　对象字面量　59

2.3　this是什么　61

2.4　try{}、catch{}和异常处理　66

2.5　实例：你自己的调试日志　67

2.5.1　为什么需要JavaScript日志对象　68

2.5.2　myLogger()对象　68

2.6　小结　76

第3章　DOM2核心和DOM2 HTML　77

3.1　DOM不是JavaScript，它是文档　77

3.2　DOM的级别　78

3.2.1　DOM 0 级　78

3.2.2　DOM 1 级　78

3.2.3　DOM 2 级　79

3.2.4　DOM 3 级　79

3.2.5　哪个级别适合你　81

3.3　创建示例文档　82

3.3.1　创建DOM文件　83

3.3.2　选择一个浏览器　84

3.4　DOM核心　86

3.4.1　继承在DOM中的重要性　88

3.4.2　核心Node对象　89

3.4.3　核心Element对象　102

3.4.4　核心Document对象　104

3.4.5　遍历和迭代DOM树　106

3.5　DOM HTML　108

3.5.1　DOM2 HTML 的HTMLDocument对象　108

3.5.2　DOM2 HTML 的HTMLElement对象　109

3.6　实例：将手工HTML代码转换为DOM代码　110

3.6.1　DOM生成工具的HTML文件　111

3.6.2　使用示例HTML片段进行测试　112

3.6.3　扩充ADS库　113

3.6.4　generateDOM对象的框架　115

3.7　小结　127

第4章　响应用户操作和事件　128

4.1　DOM2级事件　129

4.2　事件的类型　130

4.2.1　对象事件　130

4.2.2　鼠标移动事件　132

4.2.3　鼠标单击事件　134

4.2.4　键盘事件　136

4.2.5　表单相关的事件　136

4.2.6　针对W3C DOM的事件　142

4.2.7　自定义事件　143

4.3　控制事件流和注册事件侦听器　143

4.3.1　事件流　143

4.3.2　注册事件　151

4.3.3　在事件侦听器中访问事件对象　159

4.3.4　跨浏览器的事件属性和方法　160

4.4　小结　170

第5章　动态修改样式和层叠样式表　171

5.1　W3CDOM2样式规范　171

5.1.1　CSSStyleSheet对象　171

5.1.2　CSSStyleRule对象　172

5.1.3　CSSStyleDeclaration对象　173

5.1.4　支持的匮乏　173

5.2　当DOM　脚本遇到样式　173

5.3　把样式置于DOM脚本之外　179

5.3.1　style属性　179

5.3.2　基于className切换样式　182

5.3.3　切换样式表　185

5.3.4　修改CSS规则　192

5.4　访问计算样式　200

5.5　Microsoft的filter属性　201

5.6　实例：简单的渐变效果　204

5.7　小结　207

第6章　案例研究：图像裁剪和缩放工具　208

6.1　测试文件　208

6.2　imageEditor对象　212

6.2.1　调用imageEditor工具　216

6.2.2　imageEditor载入事件　217

6.2.3　创建编辑器标记和对象　218

6.2.4　向imageEditor对象添加事件侦听器　224

6.2.5　缩放图像　227

6.2.6　裁剪图像　230

6.2.7　未完成的图像编辑器　234

6.3　小结　234

第二部分　浏览器外部通信

第7章　向应用程序中加入Ajax　236

7.1　组合的技术　236

7.1.1　语义化XHTML和DOM　237

7.1.2　JavaScript和XMLHttpRequest对象　237

7.1.3　XML　244

7.1.4　一个可重用的对象　248

7.1.5　Ajax是正确的选择吗　253

7.2　为什么Ajax会破坏网站及如何解决　253

7.2.1　依赖JavaScript生成内容　253

7.2.2　通过script标签绕过跨站点限制　254

7.2.3　后退按钮和书签功能　260

7.2.4　完成请求的赛跑　270

7.2.5　增加资源占用　278

7.2.6　问题解决了吗　278

7.3　实例：Ajax增强的相册　278

7.4　小结　285

第8章　案例研究：实现带进度条的异步文件上传功能　286

8.1　信息载入时的小生命　288

8.2　起点　291

8.3　完成整合：上传进度指示器　292

8.3.1　addProgressBar()对象的结构　294

8.3.2　载入事件　296

8.3.3　addProgressBar()对象　296

8.4　小结　308

第三部分　部分高级脚本编程资源

第9章　通过库来提高生产力　310

9.1　选择合适的库　311

9.2　增强DOM操作能力　314

9.2.1　连缀语法　314

9.2.2　通过回调函数进行过滤　321

9.2.3　操纵DOM文档　322

9.3　处理事件　324

9.3.1　注册事件　325

9.3.2　自定义事件　327

9.4　访问和操纵样式　329

9.5　通信　329

9.6　小结　334

第10章　添加效果增强用户体验　335

10.1　自己动手实现效果　335

10.1.1　让我看到内容　336

10.1.2　提供反馈　340

10.2　几个视觉效果库简介　342

10.3　视觉盛宴　343

10.3.1　MOO式的CSS属性修改　344

10.3.2　通过Script.aculo.us实现视觉效果　353

10.3.3　通过Moo.fx实现逼真的运动效果　356

10.3.4　圆角效果　360

10.3.5　其他库　362

10.4　行为增强　362

10.5　小结　374

第11章　丰富的Mashup!运用API添加地图、搜索及更多功能　375

11.1　API密钥　376

11.2　客户端API：离不开JavaScript　377

11.2.1　地图中的Mashup应用　377

11.2.2　Ajax搜索请求　388

11.2.3　地图与搜索的Mashup应用　397

11.3　服务器端API：需要代理脚本　400

11.3.1　通过Basecamp构建集成的To-Do列表　403

11.3.2　通过Flickr取得个性头像　412

11.4　小结　416

第12章　案例研究：用DOM设计选择列表　417

12.1　经典的感觉　417

12.2　构建更好的选择列表　418

12.3　策略？我们不需要臭哄哄的策略　420

12.3.1　相关的文件　420

12.3.2　FauxSelect对象　421

12.3.3　开始创建人造select元素　423

12.3.4　查找select元素　425

12.3.5　构建DOM元素　427

12.4　添加事件——为人造select赋予生命　431

12.5　让表单绽放光彩　435

12.6　行为修正　445

12.6.1　z-index来救急　447

12.6.2　键盘控制及其他细节　449

12.6.3　select太大了吗　454

12.7　最后的细节　455

12.8　继续替换select的冒险　456

12.9　小结　457