前    言

　　　　　

　　　jQuery JavaScript框架是Web开发领域一颗冉冉升起的新星。在最近几年，随着Java Script驱动的、被称为Web 2.0的网站如雨后春笋般地不断增长，JavaScript框架已经变得非常流行。这些Web 2.0网站通常会大量使用诸如AJAX和JavaScript的技术来实现平滑的图形增强效果，如果不使用JavaScript，这些Web 2.0功能将难以甚至根本无法合并进来。

　　　作为一个JavaScript库，jQuery的任务是非常简单的——它致力于减轻Web开发人员的工作负担，消除跨浏览器开发中的一些困难，并使Web开发人员需要完成的常见任务变得简单了很多。实践一再证明，jQuery确实可以将多行纯JavaScript代码简化为区区几行jQuery代码，甚至在很多情况下简化为一行jQuery代码。jQuery致力于消除JavaScript开发中的道道樊篱，它尽可能地消除了JavaScript开发的冗余现象，在各个浏览器存在差异的关键区域(例如Microsoft的事件API和W3C的事件API之间，以及其他一些关键任务，例如获取事件发生时用户鼠标指针的位置等)，jQuery为这些跨浏览器开发工作提供了统一的代码。

　　　jQuery是一个简洁的、轻量级的JavaScript库，它可以工作在Microsoft的6.0版本及以上的IE浏览器、1.5版本及以上的Firefox浏览器、2.0.2版本及以上的Safari浏览器、9.0版本及以上的Opera浏览器以及Google新的0.2版本及以上的Chrome浏览器上。jQuery的使用方法是非常简单的——只需在HTML或XHTML文档中添加一个包含jQuery库文件的标记链接即可。本书详细介绍了jQuery的API(Application Programming Interface，应用程序编程接口)组件，并详细介绍了如何结合使用jQuery框架的所有基本要点来快速开发客户端应用程序。

　　　本书还介绍了jQuery UI库的用法。创建客户端用户界面曾是一项非常繁琐的任务，而如果使用jQuery UI库，这些任务则变得出奇简单，即使没用丰富JavaScript编程经验的普通开发者，也可以使用jQuery UI库创建出专业的用户界面。在苹果公司的Mac主页www.apple.com/mac?上，可以看到一个以动画方式展开或折叠的手风琴(accordion)效果，难道你不想创建这样的特效吗？使用jQuery，不仅仅可以创建类似的效果，还可以方便地自定义其外观。

　　　也许你想知道，如何在网站中使用JavaScript、HTML和CSS来创建虚拟的弹出窗口呢？jQuery UI库不但提供了对创建虚拟弹出窗口的支持，此外还允许启用或关闭淡入或淡出动画效果，或者将尺寸从小到大的动画效果应用于弹出窗口。jQuery UI库还可以让开发人员通过使用JavaScript、标记代码和CSS来创建动画和渐变的效果。在使用jQuery UI库之前，你可能会认为这些动画效果只有在Adobe的Flash player中才能实现。

　　　jQuery框架本身已经赢得得了大量主流网站的青睐。jQuery已经被应用于Google,、Dell、Digg、NBC、CBS和Netfli等重要网站，并获得了Mozilla基金会和流行的WordPress和Drupal PHP框架的支持。

　　　jQuery的运行速度很快——甚至是非常快——但它的体积非常小。如果使用压缩或gzip压缩的版本，jQuery库仅仅有15KB大小。

　　　使用jQuery，只需少量的几行代码，就可以创建复杂的而专业的、视觉驱动的用户界面和各种特效。那些曾经需要开发人员花费数天、甚至数周才能完成的任务，现在使用jQuery仅仅只需几个小时即可实现。

读者对象

　　　本书适合于任何希望使用更少代码实现更多功能的Web开发人员。在阅读本书之前，应该基本了解JavaScript。本书将复习一些基本的JavaScript编程概念，如事件API，但不详细介绍JavaScript语言本身。读者还需要对DOM(Document Object Model，文档对象模型)和基本的JavaScript程序设计语法有一个简单的理解。另外，读者还需要对HTML和CSS有所了解，本书假定你已经具备了这些知识。对于一个初学的读者来说，也许虽然能领会本书示例中代码的含义，但是可能无法理解某些技术术语和程序设计的概念，这些内容通常是在JavaScript入门书籍中介绍的。因此，如果你是一个想努力掌握jQuery的初学者，建议你在阅读本书的同时也阅读一本JavaScript的入门书籍。笔者建议阅读下列由清华大学出版社引进并出版的JavaScript入门书籍，以帮助初学者掌握相应的基础知识：

《Web编程入门经典——应用HTML XHML CSS》，2008年第2版，Jon Duckett著。

《CSS入门经典(第2版)》，2007年，笔者所著。

《JavaScript入门经典(第3版)》，2007年，Paul Wilton和Jeremy McPeak著。

　　　要想获得JavaScript方面比较深入的知识，笔者建议参考由Nicholas C. Zakas所著的Professional JavaScript for Web Developers，2009年第2版。

内容概要

　　　本书介绍了jQuery框架和jQuery UI JavaScript框架，并通过详细的示例演示了如何使用jQuery框架，从而实现比使用纯JavaScript更快的速度和更丰富的功能。本书介绍了jQuery的API公开的每个方法，使用这些API所包含的方法，可以用最少的代码来更快地完成繁琐的任务。jQuery的一些方法用于通过DOM从标记文档中选取元素，一些方法则用于遍历选择集或者使用jQuery所提供的精确控制来过滤选择集。使用jQuery所提供的方法操作DOM将变得更加简单和轻松。jQuery还消除了跨浏览器、跨平台开发过程中那些令人头疼的问题，如不同浏览器在事件模型上的差异。jQuery不仅消除了这些令人头疼的差异，还大大减少了挂钩事件所需编写的代码量，在jQuery中使用事件将变得更加简单。jQuery甚至还提供了模拟事件的功能。

　　　本书的第Ⅱ部分介绍了如何利用jQuery UI库来创建图形化驱动的UI部件(widget)。jQuery可以将某些内容拆分为多个部分，用同一页面上的多个选项卡(tab)来包含每一个部分的内容。jQuery还支持自定义这些选项卡的外观和效果，甚至可以在鼠标移到选项卡上或在选项卡上单击时为选项卡提供不同的特效，从而使选项卡具有更精美的外观和效果。用jQuery UI库来创建类似于苹果公司Mac网站上的手风琴(accordion)展开、折叠效果的侧边栏也非常简单。这些侧边栏包含有两个或多个内容窗格，当鼠标指针移到某一个内容窗格之上时，窗格的展开、折叠状态将通过一个平滑、无缝的动画效果来进行转换，即之前的窗格将被折叠起来，而当前窗格将被展开显示。

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

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

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

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

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

　　　如果读者对jQuery的最新信息感兴趣，如jQuery正在进行的改进，以及与Web开发相关的话题等，请参考jQuery的官方博客blog.jquery.com所提供的资料，或阅读jQuery之父John Resig的博客，网址是www.ejohn.org。

　　　如果读者在使用jQuery的过程中需要寻求帮助，可以参加p2p.wrox.com论坛上的关于程序设计方面的讨论，你可以免费加入相应的论坛，并咨询jQuery程序设计的相关问题。jQuery社区中也提供了一些程序设计方面的论坛，可以在网站http://docs.jquery.com/Discussion上学到更多知识。

　　　最后，笔者自己也建立了一个博客，网址是www.deadmarshes.com。读者也可以直接联系我，就阅读本书的感想或相关Web开发项目的内容进行交流和和讨论。

本书结构

　　　本书分为两个部分：第Ⅰ部分介绍了jQuery库支持的基本API，第Ⅱ部分则介绍了jQuery UI库的内容。

第Ⅰ部分：jQuery API

第1章：jQuery简介——第1章简要地介绍了jQuery的起源，以及为什么需要使用jQuery。本章还简要介绍了如何下载jQuery库和如何创建第一个jQuery驱动的JavaScript程序。

第2章：选择和过滤——本章简要介绍了jQuery的选择器引擎，jQuery使用类似于CSS的选择器从DOM中选择元素。本章还介绍了jQuery所支持的操作选择集的各种方法，这些方法可以用于精确地控制从DOM中选取哪些元素。本章介绍了用于选择元素、祖先元素、父元素、兄弟节点元素和后代元素的各种方法，以及如何移除选择集中的元素，如何将元素添加到选择集中，以及如何获取选择集中的一个特定子集。

第3章：事件——在本章开始，我们复习了在纯JavaScript中使用的事件模型。目前存在3种事件模型，即传统事件模型、W3C事件模型和Microsoft事件模型。本章还讨论了这些事件模型之间的差别，并讨论了为什么jQuery需要采用一种全新的事件API，以使Web开发者更加方便地处理事件。本章还介绍了jQuery所提供的事件API，以及如何使用jQuery的事件。

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

第5章：数组和迭代——本章介绍如何使用jQuery来遍历一个包含元素的选择集，以及如何遍历一个数组。对于DOM元素组成的数组或者选择集，jQuery提供了一个迭代机制，只需使用更少的代码就可以循环遍历数组或选择集。

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

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

第8章：特效——本章介绍jQuery所提供的一些辅助方法，这些方法可用于检测用户端浏览器的类型和版本以及当前浏览器是否支持W3C的标准CSS盒模型等。本章还介绍了关于对象、数组、函数和字符串的一些零散方法。

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

第Ⅱ部分：jQuery UI

第10章：拖放元素——本章开始将介绍jQuery的UI库。第10章介绍了如何使元素成为“可拖动”元素，并介绍了如何创建支持拖放操作的用户界面，可将一个元素拖动到另外一个元素之上并进行投放，以实现一个完整的拖放操作。

第11章：拖放排序——本章讨论如何使用Sortables插件将列表元素转换为一个可以通过拖动和投放进行排序的“可排序”列表。

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

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

第14章：日期选择器——本章介绍如何使用jQuery的Datepicker插件，为一个标准的表单输入域创建一个日期选择器。

第15章：对话框——本章介绍如何使用jQuery UI库来创建一个虚拟的弹出窗口，该虚拟的弹出窗口的外观和行为看起来就像是一个真正的弹出窗口，但实际上它包含在加载当前页面之中，并且是使用纯粹的标记代码、CSS和JavaScript来创建的。

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

附录——附录A中包含了各章习题的参考答案。附录B到附录S则列出了jQuery和jQuery UI库的相关参考资料。

所需条件

　　　为了充分发挥本书示例的作用，需要具备以下两个使用条件：

具有多个浏览器，以便测试本书示例中的Web页面。

一个文本编辑器或你最喜欢的IDE。

　　　为网站设计的页面，应该支持不同类型的客户端浏览器进行访问。某些用户可能会使用不同的操作系统或者不同的浏览器进行访问，而读者当前使用的计算机上可能并未安装这些操作系统或浏览器。本书的内容聚焦于当前最主流的浏览器。这些浏览器包括：

Windows系统上的Microsoft Internet Explorer 6，或者更高版本的IE浏览器。

Mac OS X系统上的Safari 2浏览器，或者更高版本的Safari浏览器。

Mac OS X系统、Windows系统或Linux系统中的Mozilla Firefox浏览器

Mac OS X系统、Windows系统或Linux系统中的Opera 9浏览器，或者更高版本的Opera浏览器。

本书约定

　　　为了从本书的内容中获得最圆满的学习效果，以及更好地跟踪示例代码，本书中使用了一些约定。

　　　值得注意的是，在本书内容中所引用的图例并没用完全列出来。也就是说，在某一章节中实际列出的屏幕截图并不是按照这些图例的出现顺序进行编号的。例如，当我们查看第3章中的屏幕截图，将发现第一个截图是图3-1，而在书中列出的第2个屏幕截图，其编号是图3-3。在第3章的文本内容中虽然引用了图3-2，但实际上在书中并未列出该截图。这些未列出的屏幕截图并非是真正遗漏了，实际上它们包含在本书提供的代码下载中。在书中未列出这些图例的原因，是由于无论从哪一方面看，这些图例与之前或之后的屏幕截图是相同的，因此没必要再次在书中列出这些图例。

源代码

　　　在读者学习本书中的示例时，可以手工输入所有代码，也可以使用本书附带的源代码文件。本书使用的所有源代码都可以从本书合作站点http://www.wrox.com/或www.tupwk.com.cn/downpage上下载。登录到站点http://www.wrox.com/，使用Search工具或使用书名列表可以找到本书。接着单击本书细目页面上的Download Code链接，可以获得所有源代码。

　　　提示：

　　　由于许多图书的标题都很类似，所以按ISBN搜索是最简单的，本书英文版的ISBN是978-0-470-22779-4。

　　　在下载了代码后，只需用自己喜欢的解压缩软件对它进行解压缩即可。另外，也可以进入http://www.wrox.com/dynamic/books/download.aspx上的Wrox代码下载主页，查看本书和其他Wrox图书的所有代码。

勘误表

　　　尽管我们已经尽了各种努力来保证文章或代码中不出现错误，但是错误总是难免的，如果您在本书中找到了错误，例如拼写错误或代码错误，请告诉我们，我们将非常感激。通过勘误表，可以让其他读者避免受挫，当然，这还有助于提供更高质量的信息。

　　　请给wkservice@vip.163.com发电子邮件，我们会检查您的反馈信息，如果是正确的，我们将在本书的后续版本中采用。

　　　要在网站上找到本书英文版的勘误表，可以登录http://www.wrox.com，通过Search工具或书名列表查找本书，然后在本书的细目页面上，单击Book Errata链接。在这个页面上可以查看到Wrox编辑已提交和粘贴的所有勘误项。完整的图书列表还包括每本书的勘误表，网址是www.wrox.com/misc-pages/booklist.shtml。

P2P.WROX.COM

　　　要与作者和同行讨论，请加入p2p.wrox.com上的P2P论坛。这个论坛是一个基于Web的系统，便于您张贴与Wrox图书相关的消息和相关技术，与其他读者和技术用户交流心得。该论坛提供了订阅功能，当论坛上有新的消息时，它可以给您传送感兴趣的论题。Wrox作者、编辑和其他业界专家和读者都会到这个论坛上来探讨问题。

　　　在http://p2p.wrox.com上，有许多不同的论坛，它们不仅有助于阅读本书，还有助于开发自己的应用程序。要加入论坛，可以遵循下面的步骤：

　　　(1) 进入p2p.wrox.com，单击Register链接。

　　　(2) 阅读使用协议，并单击Agree按钮。

　　　(3) 填写加入该论坛所需要的信息和自己希望提供的其他信息，单击Submit按钮。

　　　(4) 您会收到一封电子邮件，其中的信息描述了如何验证账户，完成加入过程。

　　　提示：

　　　不加入P2P也可以阅读论坛上的消息，但要张贴自己的消息，则必须加入该论坛。

　　　加入论坛后，可以张贴新消息，响应其他用户张贴的消息。可以随时在Web上阅读消息。如果要让该网站给自己发送特定论坛中的消息，可以单击论坛列表中该论坛名旁边的Subscribe to this Forum图标。

　　　关于使用Wrox P2P的更多信息，可阅读P2P FAQ，了解论坛软件的工作情况以及P2P和Wrox图书的许多常见问题。要阅读FAQ，可以在任意P2P页面上单击FAQ链接。

　　　

目    录

第Ⅰ部分 jQuery API

第1章  jQuery简介 3

1.1  jQuery的功能 4

1.2  jQuery的创造者 4

1.3  获取jQuery 5

1.4  安装jQuery 5

1.5  程序设计规范 8

1.5.1  XHTML和CSS的规范 9

1.5.2  JavaScript规范 16

1.6  小结 26

第2章  选择和过滤 29

2.1  选择器API的来源 30

2.2  使用选择器API 31

2.3  过滤选择集 41

2.3.1  使用find()方法搜索选择集 41

2.3.2  使用siblings()方法查找元素的兄弟节点 43

2.3.3  选择特定的兄弟节点 46

2.3.4  使用parents()方法和parent()方法选取祖先元素 49

2.3.5  选取子元素 52

2.3.6  反选元素 54

2.3.7  选择结果集中的片段子集 56

2.3.8  向选择集中添加更多的元素 58

2.3.9  从结果集中选择特定元素 60

2.4  小结 71

2.5  练习 72

第3章  事件 73

3.1  使用传统的事件模型挂钩事件 73

3.2  使用W3C事件模型挂钩事件 76

3.2.1  this对象 77

3.2.2  event对象 80

3.3  Microsoft JScript的事件模型 82

3.4  创建统一的事件API 83

3.4.1  使用jQuery的bind()方法绑定事件 84

3.4.2  使用jQuery的事件方法绑定事件 86

3.4.3  触发事件 88

3.5  小结 98

3.6  练习 99

第4章  操纵内容和属性 101

4.1  设置和访问属性 101

4.2  操纵类名 112

4.3  操纵HTML和文本内容 117

4.3.1  获取、设置或移除内容 118

4.3.2  将内容追加到当前元素的子元素之前或之后 122

4.3.3  在元素之前或之后插入内容 131

4.3.4  通过选择器插入内容 133

4.3.5  包装内容 137

4.4  替换元素 155

4.5  移除内容 160

4.6  克隆内容 163

4.7  小结 172

4.8  练习 173

第5章  数组和迭代 175

5.1  基本迭代 175

5.1.1  直接调用each()方法 177

5.1.2  变量作用域 178

5.1.3  模拟break语句和continue语句 180

5.1.4  迭代选择集中的元素 182

5.2  对选择集和数组进行过滤 184

5.2.1  过滤选择集 184

5.2.2  使用回调函数来过滤选择集 186

5.2.3  过滤数组 188

5.3  映射选择集或数组 191

5.3.1  映射选择集 191

5.3.2  映射数组 194

5.4  数组实用程序方法 208

5.4.1  生成数组 208

5.4.2  在数组中查找指定的值 209

5.4.3  归并两个数组 210

5.4.4  移除重复的数据项 211

5.5  小结 216

5.6  练习 217

第6章  CSS 219

6.1  CSS()方法 219

6.2  outerWidth()和outerHeight() 方法 220

6.3  小结 229

6.4  练习 230

第7章  AJAX 231

7.1  向服务器发起请求 232

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

7.1.2  AJAX请求中所传递数据的格式 233

7.1.3  使用jQuery发起GET请求 234

7.2  从服务器加载HTML片段 254

7.3  动态加载JavaScript 282

7.4  AJAX事件 284

7.5  创建具有AJAX风格的文件上传功能 290

7.6  小结 293

7.7  练习 294

第8章  特效 295

8.1  显示和隐藏元素 295

8.2  滑入或滑出元素 297

8.3  淡入和淡出元素 298

8.4  自定义动画 299

8.5  小结 302

8.6  练习 302

第9章  插件 303

9.1  编写插件 303

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

9.3  小结 314

9.4  练习 314

　　　第Ⅱ部分 jQuery UI

第10章  实现拖放 317

10.1  使元素成为可拖动元素 317

10.2  使可拖动元素具有Ghosting效果 327

10.3  在Safari浏览器的两个窗口之间拖动元素 330

10.4  为可拖动元素指派投放区域 334

10.5  小结 346

10.6  练习 347

第11章  拖放排序 349

11.1  使一个列表成为可排序列表 349

11.2  自定义可排序列表 361

11.3  保存可排序列表在排序后的状态 371

11.4  小结 378

11.5  练习 378

第12章  选取框 379

12.1  Selectables插件简介 379

12.2  小结 397

12.3  练习 398

第13章  Accordion UI 399

13.1  创建一个Accordion UI 399

13.2  设置Auto-Height 402

13.3  改变默认的窗格 403

13.4  切换alwaysOpen选项 406

13.5  改变Accordion事件 406

13.6  填满父元素的高度 407

13.7  设置Header元素 408

13.8  定义选中窗格的样式 410

13.9  根据Location信息来选择激活的内容窗格 413

13.10  小结 416

13.11  练习 417

第14章  日期选择器 419

14.1  实现Datepicker插件 419

　14.1.1  设置Datepicker的样式 421

　14.1.2  设置允许选择的日期范围 429

　14.1.3  允许选择一个日期范围 431

14.2  本地化日期选择器 432

　14.2.1  设置日期格式 432

　14.2.2  本地化日期选择器中的文本标签 433

　14.2.3  设置一个星期从哪一天开始 434

14.3  小结 435

14.4  练习 435

第15章  对话框 437

15.1  实现对话框 437

15.2  分析对话框的标记代码 439

15.3  创建模态对话框 445

15.4  自动打开对话框 447

15.5  控制对话框的动态交互行为 448

15.6  对话框的动画效果 449

15.7  使用对话框的事件 450

15.8  小结 451

15.9  练习 452

第16章  选项卡 453

16.1  实现Tabs 453

16.2  通过AJAX远程加载选项卡内容 461

16.3  为选项卡添加渐变的动画效果 464

16.4  小结 466

16.5  下一步 466

16.6  练习 467

附录A  参考答案 469

附录B  jQuery支持的选择器 477

附录C  选择和过滤 481

附录D  事件 483

附录E  操作属性和数据存储 487

附录F  操纵内容 489

附录G  AJAX方法 491

附录H  CSS 495

附录I  实用函数 497

附录J  拖放 499

附录K  Sortables插件 503

附录L  Selectables插件 507

附录M  特效 509

附录N  Accordion 513

附录O  日期选择器 515

附录P  对话框 525

附录Q  Tab 529

附录R  Re-Sizable(尺寸改变) 533

附录S  Slider(滑动条) 537