目 录

第Ⅰ部分 jQuery API

第1章 jQuery简介 3

1.1 jQuery的功能 5

1.2 jQuery的创造者 6

1.3 获取jQuery 7

1.4 安装jQuery 7

1.5 编程惯例 9

1.5.1 标记和CSS惯例 10

1.5.2 javaScript惯例 14

1.6 小结 24

第2章 选择和筛选 27

2.1 选择器API的起源 28

2.2 使用选择器API 29

2.3 筛选选择集 34

2.3.1 使用选择上下文 34

2.3.2 处理元素关系 45

2.4 从选择集中提取片段 58

2.5 向选择集添加元素 59

2.6 小结 60

2.7 练习 60

第3章 事件 63

3.1 各种事件封装方法 63

3.2 挂钩其他事件 68

3.3 挂钩持久事件处理器 69

3.4 删除事件处理器 75

3.5 创建自定义事件 80

3.6 小结 86

3.7 练习 87

第4章 操纵内容和特性 89

4.1 设置、检索和删除特性 89

4.2 设置多个特性 96

4.3 操纵类名 96

4.4 操纵HTML和文本内容 102

4.4.1 获取、设置或删除内容 103

4.4.2 将内容追加到当前元素之前或之后 108

4.4.3 在元素之前或之后插入内容 111

4.4.4 插入选择的内容 112

4.4.5 封装内容 117

4.5 替换元素 123

4.6 删除内容 126

4.7 克隆内容 129

4.8 小结 133

4.9 练习 133

第5章 数组和对象的迭代 135

5.1 遍历数组 135

5.1.1 遍历对象 139

5.1.2 迭代选择集中的元素 141

5.2 对选择集和数组进行筛选 143

5.2.1 筛选选择集 143

5.2.2 使用回调函数来筛选选择集 145

5.2.3 筛选数组 147

5.3 映射选择集或数组 151

5.3.1 映射选择集 151

5.3.2 映射数组 154

5.4 数组实用方法 156

5.4.1 生成数组 157

5.4.2 在数组中查找值 159

5.4.3 合并两个数组 160

5.5 小结 162

5.6 练习 163

第6章 CSS 165

6.1 使用CSS属性 165

6.2 jQuery的伪类 167

6.3 获取外部尺寸 167

6.4 小结 175

6.5 练习 175

第7章 ajax 177

7.1 向服务器发起请求 178

7.1.1 GET方法和POST方法的区别 179

7.1.2 REST风格的请求 180

7.1.3 AJAX请求中所传递数据的格式 180

7.1.4 使用jQuery发起GET请求 181

7.2 从服务器加载HTML片段 195

7.3 动态加载Javascript 202

7.4 AJAX事件 206

7.4.1 使用AJAX事件方法 211

7.4.2 将AJAX挂钩到单独请求 213

7.4.3 发送REST请求 215

7.5 小结 222

7.6 练习 222

第8章 动画和缓动效果 225

8.1 显示和隐藏元素 225

8.2 滑入或滑出元素 233

8.3 淡入和淡出元素 236

8.4 自定义动画 240

8.5 动画选项 243

8.6 小结 244

8.7 练习 245

第9章 插件 247

9.1 编写插件 247

9.1.1 编写简单的jQuery插件 247

9.1.2 检查文档对象模型 252

9.1.3 编写上下文菜单jQuery插件 254

9.2 开发jQuery插件的正确做法 269

9.3 小结 270

9.4 练习 270

第10章 滚动条 271

10.1 获取滚动条的位置 271

10.2 滚动到可滚动

10.3 滚动到顶部 280

10.4 小结 281

10.5 练习 281

第11章 HTML5拖放 283

11.1 实现拖放功能 283

11.1.1 预先准备的插件 290

11.1.2 事件设置 293

11.2 以拖放方式上传文件 298

11.2.1 添加文件信息数据对象 314

11.2.2 使用自定义XMLHttpRequest对象 317

11.2.3 其他实用工具 321

11.3 小结 325

11.4 练习 325

第Ⅱ部分 jQuery UI

第12章 实现拖放 329

12.1 使元素成为可拖动元素 330

12.2 为可拖动元素指定投放区域 337

12.3 小结 343

12.4 练习 344

第13章 Sortable插件 345

13.1 使列表成为可排序列表 345

13.2 自定义可排序列表 354

13.3 保存可排序列表的状态 360

13.4 小结 365

13.5 练习 366

第14章 Selectable插件 367

14.1 Selectable插件简介 367

14.2 小结 378

14.3 练习 379

第15章 Accordion插件 381

15.1 创建Accordion UI 381

15.2 改变默认窗格 384

15.3 更改Accordion事件 387

15.4 设置标题元素 388

15.5 小结 390

15.6 练习 390

第16章 Datepicker插件 393

16.1 实现Datepicker插件 393

16.1.1 自定义Datepicker的

样式 395

16.1.2 设置允许的日期范围 403

16.2 Datepicker的本地化 405

16.2.1 设置日期格式 405

16.2.2 本地化Datepicker中的文本 406

16.2.3 设置一周从哪一天开始 407

16.3 小结 408

16.4 练习 409

第17章 Dialog插件 411

17.1 实现对话框 411

17.2 设置对话框的样式 413

17.3 创建模态对话框 419

17.4 自动打开对话框 421

17.5 控制对话框的动态交互行为 423

17.6 对话框的动画效果 424

17.7 使用对话框的事件 425

17.8 小结 426

17.9 练习 427

第18章 Tabs插件 429

18.1 实现Tabs 429

18.2 设置选项卡用户界面的样式 432

18.3 通过AJAX加载远程内容 437

18.4 为选项卡添加动画效果 441

18.5 小结 441

18.6 练习 442

第Ⅲ部分 流行的第三方jQuery插件

第19章 Tablesorter插件 445

19.1 表格排序 445

19.2 小结 453

19.3 练习 454

第20章 创建交互式幻灯片放映效果 455

20.1 创建幻灯片放映效果 455

20.2 小结 470

20.2 练习 470

第21章 使用HTML5音频和视频 471

21.1 下载MediaElement插件 471

21.2 配置MediaElement插件 471

21.3 创建HTML结构，使其支持针对较旧浏览器的回退视频/音频插件 473

21.4 实现h.264视频内容 474

21.4.1 使用Handbrake或QuickTime编码 474

21.4.2 使用HTML5

元素 474

21.4.3 使用Flash播放器插件 475

21.4.4 使用Microsoft的Silverlight插件 475

21.5 自定义播放器控件 475

21.6 控制何时开始下载媒体 476

21.7 小结 476

21.8 练习 476

第22章 创建简单的WYSIWYG编辑器 477

22.1 使用contenteditable特性使一个元素成为可编辑元素 477

22.2 创建按钮来应用粗体、斜体、下划线、字体和字号等格式 479

22.3 创建选区 482

22.4 存储选区 487

22.5 恢复选区 488

22.6 小结 489

22.7 练习 489

第Ⅳ部分 附 录

附录A 练习题答案 493

附录B jQuery选择器 503

附录C 选择、遍历和筛选 509

附录D 事件 515

附录E 操纵内容、特性和自定义数据 527

附录F 操纵内容的更多方法 531

附录G AJAX方法 535

附录H CSS 543

附录I 实用工具 547

附录J draggable和droppable 551

附录K Sortable插件 559

附录L Selectable插件 565

附录M 动画和缓动效果 569

附录N Accordion插件 581

附录O Datepicker插件 585

附录P Dialog插件 595

附录Q Tabs插件 601

附录R Resizable(可调整尺寸) 607

附录S Slider(滑动条) 611

附录T Tablesorter插件 615

附录U MediaElement 617

jQuery已经成为Web开发领域的核心要素。作为一个JavaScript库，jQuery的使命非常简单——致力于极大地简化诸多任务，从而减轻Web开发人员的工作负担。jQuery的初衷是提供一个库来消弥浏览器之间的不一致性，简化JavaScript开发，为跨浏览器开发提供诸多规范。随着浏览器技术的进步，浏览器之间的不兼容问题逐渐消除，jQuery的量级更轻了，效率却更高，能更好地完成自己的任务：提供API，使JavaScript开发变得更简单。

实践已经证明，jQuery可将多行普通的JavaScript代码简化为区区几行jQuery代码，甚至在很多情况下简化为一行支持jQuery的JavaScript代码。使用jQuery时，代价是为了使用你的网站和应用程序，用户需要获取jQuery库(可能还需要获取其他相关的下载资料)，这会增加应用的大小，也额外增加了复杂性。在当今，这种代价已经变小了，因为越来越多的人可以访问高速Internet。因此，从宏观角度看，额外的下载并不那么费事。

jQuery致力于尽可能消除冗余现象，从而清除JavaScript开发中的道道樊篱。jQuery 1.9及更早版本更多聚焦于在各个浏览器存在差异的关键区域(例如Microsoft的事件API和W3C的事件API之间，以及其他更需要补救的任务，例如获取事件发生时用户鼠标指针的位置等)实现跨浏览器JavaScript开发的标准化。随着浏览器的规范化，jQuery 2.0已甩掉了大多数历史包袱，即不再重点考虑如何发挥桥梁作用(例如，实现Internet Explorer与其他浏览器的事件一致性)。现在，最新的Internet Explorer版本的标准事件API严格遵循标准呈现模式，因此，在添加有效的文档类型声明时，已不需要桥梁性的事件支持。

如果必须使用较旧的Internet Explorer版本(如IE8)，则需要jQuery 1.9。jQuery 1.9和jQuery 2.0都可以用在所有现代浏览器上，包括最新版本的Safari、Firefox、Google Chrome和Internet Explorer。

入手使用jQuery十分简单，只需要在HTML或XHTML文档中添加简单脚本，将基本的jQuery JavaScript库纳入即可。本书详细介绍jQuery的API组件，说明如何将该框架中的组件结合在一起来快速开发Web应用程序。

本书还介绍jQuery UI库的用法。创建客户端用户界面(UI)曾是一项非常烦琐的任务，而如果使用jQuery UI库，这些任务则变得出奇简单。即使没有丰富JavaScript编程经验的普通开发者，也可以用jQuery UI库创建出专业的用户界面。jQuery UI库包括对话框、选项卡、Accordion和日期选择器等小组件；要观看完整演示，请参阅http://www.jqueryui.com中的示例。

一个蓬勃发展的大型jQuery插件社区提供了免费插件，本书介绍其中最流行的一些插件，还讲述如何自行创建简单乃至复杂的jQuery插件。

读者对象

本书面向任何希望使用更少代码实现更多功能的Web开发人员。在阅读本书之前，应该基本了解JavaScript，因为本书并不详细介绍JavaScript语言本身。读者需要了解DOM(Document Object Model，文档对象模型)和JavaScript编程语法，还需要对CSS以及HTML5或XHTML5有所了解，本书假定你已经掌握了这些知识。本书将重点介绍如何使用jQuery编写JavaScript程序。

对于初学者来说，也许虽然能领会本书示例中代码的含义，但可能无法理解某些技术术语和编程概念，这些内容通常是在JavaScript入门书籍中介绍的。因此，如果你是一名想努力掌握jQuery的初学者，建议在阅读本书的同时也阅读一本JavaScript入门书籍。确切地讲，笔者建议阅读下列Wrox书籍(它们均已由清华大学出版社引进并出版)，以帮助初学者掌握相应的基础知识：

● 《HTML、XHTML、CSS与JavaScript入门经典》

● 《CSS入门经典(第3版)》

● 《JavaScript入门经典(第4版)》

要获得JavaScript方面比较深入的知识，笔者建议参阅由Nicholas C. Zakas所著的《JavaScript高级程序设计(第3版)》。

内容概要

本书介绍jQuery JavaScript框架和jQuery UI JavaScript框架，列出一些流行的第三方插件，讲述如何自行编写和使用第三方插件。本书还介绍jQuery的API公开的每个方法，使用这些API包含的方法，可用最少的代码来更快地完成常见的繁杂任务。例如，jQuery的一些方法用于通过DOM从标记文档中选取元素，一些方法则用于遍历选择集或使用jQuery所提供的精确控制来过滤选择集。使用jQuery所提供的方法操作DOM将变得更加简单和轻松。本书还介绍jQuery的事件模型，该模型打包普通的W3C事件API，如能正确使用该模型提供的API，将能极大地优化应用程序并降低复杂度。

本书第Ⅱ部分介绍如何利用jQuery UI库来创建UI小组件(widget)。jQuery可将内容拆分为多个部分，用同一页面上的多个选项卡(tab)来包含每部分内容。jQuery还支持自定义这些选项卡的外观和效果，甚至可在鼠标移到选项卡上或在选项卡上单击时为选项卡提供不同的特效，从而使选项卡具有更精美的外观和效果。可以用jQuery UI库来方便地创建Accordion(手风琴)补充内容；这些补充内容有两个或更多个窗格，当鼠标指针移到某一条目时，窗格将通过平滑、无缝的动画效果进行切换，之前的窗格将折叠起来，而当前窗格将展开显示。

jQuery UI库还支持将任意元素转换为“可拖动”元素，在页面上只需单击该元素并按住鼠标进行拖动，就可以使用鼠标将元素拖动到页面中的任何地方。使用jQuery UI库来创建具有拖放功能的用户界面也变得非常容易，可使用jQuery插件来创建可投放区域，可拖动页面上的其他元素并投放到该区域中，就像在操作系统的文件管理器中移动文件夹的位置一样。另外，jQuery UI库还可将列表转换为“可排序”列表，可通过拖放方式来排序列表，列表将根据列表项投放的位置来重新排序列表项。另外，jQuery UI库还支持使用鼠标拖曳出选取框来选取元素，就像在操作系统的文件管理器中选取多个文件或文件夹那样。jQuery UI库还提供了使用鼠标来调整页面元素尺寸的插件。所有这些在计算机桌面系统中可以实现的简洁操作，都可以使用jQuery UI库在Web浏览器中实现。

jQuery UI库还提供了用于输入日期的由JavaScript驱动的、精美易用的日期选择器插件，当在输入域中单击时，将自动弹出该日期选择器。

使用jQuery UI库，还可以创建类似于虚拟弹出窗口的自定义弹出对话框，但这种弹出对话框是使用标记代码、CSS和JavaScript显示的，并且不会打开单独的浏览器窗口。

jQuery UI库还提供了图形化的滑动条(slider bar)插件，类似于媒体播放器中的音量控制条。

就像通常情况下jQuery大大简化了JavaScript编程一样，jQuery UI库也极大地简化了创建图形用户界面(GUI)的繁重工作。在jQuery UI库的支持下，只需较少的开发工作，就可以创建出非常专业的用户界面小组件。

本书分为4部分：第Ⅰ部分介绍jQuery库公开的基本API；第Ⅱ部分分析jQuery UI库的内容；第Ⅲ部分介绍一些流行的jQuery插件，并讲述如何创建更高级的jQuery插件；第Ⅳ部分是附录，列出一些有用的参考资料。

第Ⅰ部分：jQuery API

● 第1章：jQuery简介——第1章简要介绍jQuery的起源，以及为什么需要使用jQuery。该章列出一些良好的编程实践以及本书使用的特定编程惯例。该章还简要讨论如何下载jQuery库以及如何创建第一个jQuery驱动的JavaScript程序。

● 第2章：选择和筛选—— 该章简要介绍jQuery的选择器引擎，选择器引擎使用类似于CSS的选择器从DOM中选择元素。该章还介绍jQuery所支持的操作选择集的各种方法，这些方法可用于精确控制从DOM中选取哪些元素。该章介绍用于选择上级元素、父元素、同级元素和后代元素的各种方法，以及如何移除选择集中的元素，如何将元素添加到选择集中，以及如何获取选择集的特定子集。

● 第3章：事件—— 该章讨论jQuery的事件封装方法，分析如何挂钩不具有内置封装方法的事件处理器，如何删除事件处理器，如何挂钩持久化事件处理器，如何创建自定义事件，如何为事件添加命名空间以方便引用。

● 第4章：操纵内容和特性—— 该章介绍如何使用jQuery为操纵内容、文本、HTML和元素特性而提供的各种方法。jQuery提供了大量方法，可实现对元素的任何操作。

● 第5章：数组和对象的迭代—— 该章介绍如何使用jQuery来遍历包含元素的选择集，以及如何遍历数组。与通常一样，对于DOM元素组成的数组或选择集，jQuery提供了一个简便的迭代机制，只需使用几行代码就可以循环遍历数组或选择集的内容。

● 第6章：CSS——该章介绍jQuery为操作CSS属性和声明所提供的方法。jQuery提供了直观和具有多种功能的方法，以便采用不同的方式来操作CSS。

● 第7章：AJAX——该章详细介绍jQuery所支持的针对服务器发起AJAX请求的各种方法，jQuery的AJAX方法允许向服务器请求内容，而不必直接使用底层的XMLHttpRequest对象，还支持处理从服务器返回的不同格式的响应。

● 第8章：动画和缓动效果—— 该章介绍jQuery所提供的一些用于动态显示元素的方法，包括使用简单动画显示和隐藏元素、淡入和淡出、上滑和下滑，使用完全自定义的动画，以及可用来控制动画时间流逝的各种缓动效果。

● 第9章：插件——该章介绍如何在jQuery中创建自定义插件。

● 第10章：滚动条——解释如何使容器变得可滚动，包括获取和设置滚动位置。

● 第11章：HTML5拖放——用于在浏览器窗口中拖放元素的官方W3C拖放API。该API与Draggable和Droppable jQuery UI插件的差异极大，允许在完全不同的浏览器窗口或应用程序之间拖放元素。该章还介绍以拖放方式上传文件的W3C规范。

第Ⅱ部分：jQuery UI

● 第12章：实现拖放——该章介绍如何实现Draggable和Droppable jQuery UI插件来创建拖放API，这是第11章介绍的HTML5拖放API的备选。

● 第13章：Sortable插件——该章讨论如何使用Sortable插件将列表元素转换为可通过拖动和投放进行排序的“可排序”列表。

● 第14章：Selectable插件——该章介绍jQuery UI库中的Selectable插件，该插件允许用户通过鼠标拖曳出选取框来选择元素，就像在操作系统的文件管理程序中选取文件那样。

● 第15章：Accordion插件——该章讨论如何使用Accordion插件来创建外观简洁优美的侧边栏，侧边栏包含了多个内容窗格，各个窗格可以像手风琴一样展开和折叠。当鼠标指针移过一个元素时，当前内容窗格将通过平滑动画折叠起来，而另一个窗格则以动画方式平滑展开。

● 第16章：Datepicker插件——该章介绍如何使用jQuery的Datepicker小组件为标准的表单输入域创建日期选择器。

● 第17章：Dialog插件——该章介绍如何使用jQuery UI库来创建虚拟的弹出窗口，虚拟的弹出窗口的外观和行为看起来就像是真正的弹出窗口，但实际上完全包含在启动它们的当前页面中，而且是使用纯粹的标记代码、CSS和JavaScript构建的。

● 第18章：Tabs插件——该章介绍jQuery UI库的Tabs组件，它可将一个文档拆分到几个不同的选项卡中，在这种选项卡之间导航时，并不需要加载其他页面。

第Ⅲ部分：流行的第三方jQuery 插件

● 第19章：Tablesorter插件——简要介绍jQuery的第三方插件Tablesorter，该插件用于依据一列或多列对HTML表格进行排序。

● 第20章：创建交互式幻灯片放映效果——介绍如何设置幻灯片放映插件，列举一个创建jQuery插件的复杂例子，该例可供扩展。

● 第21章：使用HTML5音频和视频——介绍MediaElement插件，该插件在桌面和移动平台上，针对各种流行的媒体格式(如H.264和MP3音频)，架起了支持音频和视频的桥梁。

● 第22章：创建简单的WYSIWYG编辑器——讨论在浏览器中创建文本编辑器所需的contenteditable特性和各种组件。

第Ⅳ部分：附录

● 附录A——该附录包含各章练习题的答案。

● 附录B~U——这些附录包含jQuery和jQuery UI的参考资料。