作者：Bear Bibeault Yehuda Katz
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
jQuery实战(第2版)试读：
前言
本书两位作者，一位是头发已经斑白的老手，早在FORTRAN盛行的年代他就专注于编程，而另一位是狂热的领域专家，聪明过人，一旦脱离因特网，他就会对外面的世界茫然若失。背景如此迥异，是什么促使他们走到一起合作项目呢？
答案很明显，jQuery。
一个非常有用的客户端工具使我们开始合作，但两人的经历却又截然不同。1
我（Bear）第一次听说jQuery是在写Ajax in Practice。的时候。图书出版流程的后期是暴风骤雨般的编校阶段，文字编辑审阅全文以确保语法正确和语句清晰，技术编辑保证技术无误。至少对我来说，这是写书过程中压力最大、最令人抓狂的阶段，我最不想听到的就是“你真应该增加一节全新的内容”。1 中文版《Ajax实战：实例详解》，人民邮电出版社，2008。——编者注
我在Ajax in Practice。中的一章论述了一些支持Ajax的客户端库，我对其中一个库（Prototype）相当熟悉，而对其他库（Dojo工具箱和DWR）只好一笔带过。
就在我忙于应付众多任务的时候（保住工作，发展副业，处理家庭琐事），技术编辑Valentin Crettaz不经意地爆出了一句：“你为什么不写一节关于jQuery的内容？”“j什么？”我问。
他立即发表长篇大论，描述了这个全新的库是如何奇妙，真应该与当前支持Ajax的其他客户端库一起进行评测。于是我问了一些人：“有没有听说过‘jQwery’库？”
我收到了很多积极回应，这些回应都很热情，一致认为jQuery非常出色。在一个细雨绵绵的周日下午，我花了大约4小时在jQuery网站阅读文档，并编写小测试程序，摸索jQuery的行事方式。然后我匆匆写出一节新的内容，并发给技术编辑看看是否达到要求。
这节内容受到热情赞扬，随后我们继续推进并最终完成了Ajax in Practice。 一书的编辑工作（关于jQuery的这节内容后来还发表在Dr. Dobb's Journal。 的网站上）。
当尘埃落定，对jQuery的狂热已经让一颗倔强的小种子在我内心深处生根发芽。我很喜欢之前在匆忙中研究jQuery所学到的知识，于是就开始进一步学习。我开始在Web项目中使用jQuery。我很喜欢我看到的效果。我开始替换以前项目中的老代码，看如何使用jQuery简化页面。我变得对它爱不释手。
这个新发现让我满腔热情并想与他人分享，我冲动地向Manning出版社递交了出版本书的提议。显然，我那时一定很有说服力。（我让引起这一切麻烦的技术编辑Valentin继续做本书的技术编辑，作为对他的惩罚。我打赌这对他来说是深刻的教训。）
就在那时，编辑Mike Stephens问我：“这个项目和Yehuda Katz合作，你觉得怎么样？”“Yehenta是谁呀？”我问道。* * *
Yehuda参与这个项目的经历和我大相径庭。早在jQuery连版本号都没有的时候，他就参与进去了。在无意中发现Selectable插件之后，他就对jQuery核心库产生了兴趣。他对于（那时）缺少在线文档多少有点失望，于是开始更新维基网页，并且建立了Visual jQuery网站（visualjquery.com）。
之后不久，他牵头完善在线文档，为jQuery做贡献，管理插件体系结构和生态系统，同时他还向Ruby社区推广jQuery。
然后有一天，Manning出版社给他打来电话（一个朋友把他的名字告知了出版社），问他是否有兴趣和一个名叫Bear的家伙合作，出一本关于jQuery的书……* * *
虽然我们的背景、经历、专长迥异，参与项目的方式也不同，但并不妨碍我们组成一个很棒的团队，并且在合作的过程中收获了许多快乐。即便是地理上的差距（我在德克萨斯州的中心，而Yehuda在加利福尼亚州的海边），也不足以形成障碍。这得感谢电子邮件和即时消息带来的便利！
把我们的知识和才华凝聚成一本很棒且有深度的好书，这正是我们所期望的。希望你阅读愉快，恰如我们创作时那样。
但同时也要保持清醒的头脑。前言
距本书第1版出版才过去了两年，有必要这么快对其进行更新吗？
当然！
与稳定的服务器端语言（例如Java）相比，Web客户端技术的更新要快速得多。jQuery不是东拼西凑的技术，而是走在趋势最前沿的技术！
jQuery团队每年都会发布一个主要的新版本（最近力争每年1月份发布）。除此之外，在一年之中还会有一些小版本更新。这意味着自本书第1版出版以来，已经有很多小版本更新以及两个基于jQuery 11.2的主要版本，也就是jQuery 1.3和1.4版本。1 在编辑本书中文版时，jQuery目前的最新版本为1.7.1。——编者注
随着每个主要版本的发布，jQuery的功能都得到了极大扩展和增强。无论是从自定义事件，事件的命名空间，函数和特效队列，还是从大量新增的实用方法和函数来看，在第1版大获成功之后，jQuery的能力范围已经得到了显著扩大。
这还不包括jQuery UI！早在两年前的初期阶段，本书的第1版只用了其中一章的几节来介绍jQuery UI。从那以后，jQuery UI逐渐流行并发展成熟，在这个版本中，jQuery UI已是重要的一部分，总共有3章。
因此第2版的发行顺理成章，它包含了jQuery和jQuery UI在过去两年中所取得的发展成果。第2版有什么新的内容？
当我们决定继续编写本书的第2版时，我记得有人曾跟我说过，“这应该是小菜一碟。你只需要对第1版进行一些更新就可以了。”
他们完全错了！事实上，完成第2版所花的时间比编写第1版还要多。我们不想掉入这个“理所当然”的陷阱，仅仅在某些地方增加一些更新就万事大吉了。我们想让这一版不仅是第1版的重温，而且还应该包含更多的内容。
比较一下第1版和第2版的目录就可以知道，从第1章到第8章的目录结构并没有太大变化。但这也是两个版本仅有的相似之处了。
第2版不是对第1版的简单修补。文本中每一个段落，示例中的每一行代码，都经过了仔细的检验。书中不仅包含了jQuery 1.2~1.4版本新增和修改的内容，而且每章的内容和示例代码也已更新，以反映当前页面脚本和jQuery用法的最佳实践。总之，作为一个团队，在使用jQuery编写高度交互的页面脚本方面，我们又拥有了另外两年的实践经验。
我们检查了所有示例，更新了一些示例以便更好地展示如何在实践中使用jQuery 1.4，把一些示例替换成更适合展示讨论内容概念的示例。例如，第1版的读者可能还记得，第4章结尾处用来展示jQuery事件处理的综合示例Bamboo Grille。经过尝试，我们还是没能重构此示例来展示最新的jQuery事件处理概念，比如“live”和自定义事件。因此，我们用示例DVD Ambassador代替了这个示例，后者能更好地演示高级事件处理概念。
本书的第二部分聚焦jQuery UI，这是全新的内容，全面覆盖了自第1版出版以来jQuery UI的更新。
我们估算了一下，将本书第一部分新增、替换和更新的内容，以及全新的第二部分计算在内，本书至少有50%是全新的内容。余下的50%内容也经过了全面检查以确保其内容是最新的，能反映最新的最佳实践。
这已经不是“小菜一碟”了！致谢
电影结束时银幕上滚动的、无穷无尽的致谢名单是否曾让你感到惊讶甚至困惑？真的需要那么多人去制作一部电影吗？
与此类似，可能很多人会为需要那么多人参与一本书的出版而感到惊讶，但事实就是如此。才华横溢的贡献者通力合作，最终成果就是你手上拿着的这本书（或是你在屏幕上阅读的电子书）。
Manning出版社的全体员工一直孜孜不倦地和我们一起工作，以确保本书达到预期的高水平，感谢他们所做的努力。没有他们，就没有本书。致谢名单不仅包括出版人Marjan Bace、编辑Mike Stephens，也包括以下贡献者：Lianna Wlasiuk、Karen Tegtmayer、Andy Carroll、Deepak Vohra、Barbara Mirecki、Megan Yockey、Dottie Marsico、Mary Piergies、Gabriel Dobrescu和Steven Hong。
对审稿人我们更是感激不尽，他们帮忙确定本书的最终形式，从发现简单的打字错误，到更正术语和代码错误，甚至帮助组织本书章目。每个审稿环节都极大提升了最终产品的质量。感谢抽出时间审阅本书的各位朋友：Tony Niemann、Scott Sauyet、Rich Freedman、Philip Hallstrom、Michael Smolyak、Marion Sturtevant、Jonas Bandi、Jay Blanchard、Nikander Bruggeman、Margriet Bruggeman、Greg Donald、Frank Wang、Curtis Miller、Christopher Haupt、Cheryl Jerozal、Charles E. Logston、Andrew Siemer、Eric Raymond、Christian Marquardt、Robby O’Connor、Marc Gravell、Andrew Grothe、Anil Radhakrishna、Daniel Bretoi和Massimo Perga。
特别感谢本书的技术编辑 Valtentin Crettaz。他除了在各种条件下检查每段示例代码，还为本书做出了宝贵的贡献，包括确保文字的技术正确性，查找原本丢失的信息，紧跟库的更新步伐，以确保本书中使用的是最新和最准确的jQuery和jQuery UI，甚至当需要服务器端代码时，他还提供了PHP版的示例。Bear Bibeault。
本书是我的第四本著作，需要感谢很多人，再次感谢javaranch.com网站的全体会员和职员。如果起初我没有加入JavaRanch，就不会有机会去写书，因此诚挚地感谢Paul Wheaton和Kathy Sierra，是他们启动了整件事情，同时感谢给予我鼓励和支持的会员，包括（但不限于）Eric Pascarello、Ben Souther、Ernest Friedman Hill、Mark Herschberg、Andrew Munkhouse、Jeanne Boyarski、Bert Bates和Max Habbibi。
感谢Valentin Crettaz，不仅因为他是一位出色的技术编辑和代码贡献者（正如上面所说的），还因为是他最早把jQuery介绍给我。
跟往常一样，还要向我的妻子Jay、狗狗Little Bear和Cozmo（它的照片使得本书更加生动）致以衷心的感谢。他们忍受了我像个影子一样存在，在写书的几个月时间里，我们虽然生活在一起，但我却很少把目光从MacBook Pro的键盘上移开，抬头看上他们一眼。
最后，感谢我的合作者Yehuda Katz，没有他就不可能有这个项目，同时也感谢John Resig和其他jQuery和jQuery UI的贡献者们。Yehuda Katz。
首先，感谢我的合著者Bear Bibeault，他丰富的写作经验让我受益匪浅。他拥有天才的写作技巧，解决专业出版物中疑难问题的能力令人印象深刻，这是本书得以完成的极大保障。
说到本书的完成，我必须感谢我亲爱的妻子Leah，我花了这么长的时间写书而没有陪伴她，让她孤独地忍受了漫漫长夜和每个周末，对此我感到很愧疚。本书得以完稿离不开她的付出，而且，是她的支持使我走过了本项目最艰难的阶段。我爱你，Leah。
其次，没有jQuery库，就没有本书。感谢jQuery的创建者John Resig，他改变了客户端开发的面貌，并减轻了全球Web开发者的工作量（不管相信与否，在中国、日本、法国等许多国家，我们都拥有相当大的用户群）。我把他当成好朋友，在我完成这个艰巨任务的过程中，这位才华横溢的作者对我帮助甚多。
jQuery的面世离不开令人钦佩的社区用户和核心团队成员，包括开发组的Brandon Aaron和J?rn Zaefferer，推广组的Rey Bango和Karl Swedberg，负责jQuery UI（用户界面）的Paul Bakaus，和我一起在插件组工作的Klaus Hartl和Mike Alsup。这个强大的程序员团队把jQuery框架从紧凑、简单的核心操作基础库，推进为世界级的JavaScript库，几乎任何需求都有着由用户贡献的（模块化的）支持。jQuery的贡献者太多了，以至于我可能会漏掉很多人的名字。可以肯定，如果没有围绕这个库而兴起的独一无二的社区，我就不会写这本书，真不知道该如何感谢你们。
最后，我想感谢我的家人，迁居到西海岸以来，我没能经常回去看望家人。兄弟姐妹间的手足情谊让我度过了快乐的成长时光，家人的信任使我坚信能够克服任何困难。妈妈、Nikki、Abie，还有Yaakov：谢谢你们，我爱你们。关于本书
更少的代码，更多的功能。
一言以蔽之，本书的目的是：帮助你学习如何在网页中以更少的脚本来实现更多的功能。本书的两位作者，一位是jQuery的狂热用户，另一位是jQuery贡献者和布道者，都坚信jQuery是目前最好的JavaScript库，可以帮助你实现上述目标。
本书致力于让你在快速高效地运行jQuery的同时，体验到写代码的乐趣。本书讨论了核心的jQuery库和配套的jQuery UI库的所有API，每个API方法都以容易理解的语法块呈现，并描述了方法的参数和返回值。其中包含了很多高效使用API的例子，而且对于重要概念，我们提供了称为“实验室”的页面来详细描述。通过这些全面而有趣的网页，你可以在实践中观察jQuery方法的玄妙之处，而无需手工编写代码。
所有的示例代码和实验室页面都可以从这里下载：http://www.manning.com/jQueryinActionSecondEdition或http://www.manning.com/bibeault2。
我们可以用一堆营销的行话来告诉你本书有多么棒，但是你并不想浪费时间来听这些，对吧？你想要的是获取更多jQuery的知识，好吧，这正是本书的意图。
闲话少叙，请你继续阅读吧！读者对象。
本书面向各层次的Web开发人员，帮助他们使用JavaScript创建很酷的交互性Web应用程序，而不需要从头写那些原始的、依赖于浏览器特性的客户端代码。
所有希望借助jQuery的强大功能，创建高交互性和可用性的Web应用程序，以取悦客户的开发人员，都可以从中受益。
可能Web开发新手会发现一些章节有点深奥，但并不妨碍他们深入学习。我们在附录中介绍了JavaScript的基本概念，这将有助于最大限度地发挥jQuery的潜能。Web开发新手只需理解一些关键概念，就会发现jQuery是很容易学的。对高级开发人员而言，jQuery则是一个强大的武器。
无论Web开发的新手还是老将，客户端的程序员掌握jQuery都会受益匪浅。我们确信，本书的内容将有助于你快速掌握这门知识。章节概述。
本书的组织形式立足于帮助你以最高效的方式学习jQuery和jQuery UI的知识。它从jQuery创建时所采用的设计理念入手，快速过渡到jQuery API的基本概念。然后讲授jQuery 各方面的知识，从事件处理到Ajax请求，这将帮助你书写规范的客户端代码。除此之外，本书还探讨了配套的jQuery UI库。
本书分为两部分：第一部分涵盖了核心的jQuery库，第二部分介绍jQuery UI库。第一部分包含8章。
第1章我们将了解jQuery的理念，以及它是怎么遵循现代编码原则的，比如不唐突的JavaScript。我们讨论了采用jQuery的理由，概述了它的工作原理。我们深入关键概念，比如文档就绪处理程序、实用函数、 DOM元素的创建，以及如何扩展jQuery。
第2章介绍jQuery包装集（wrapped set），这是jQuery运行的核心概念。我们将学习如何通过丰富而强大的jQuery选择器，从页面上选取元素并创建这些包装集（可被操作的DOM元素集合）。这些选择器使用标准的CSS选择符号，这使得它们非常强大，而这些CSS知识我们可能早已熟知。
第3章我们将学习如何使用jQuery包装集来操作页面DOM元素。这将包含改变元素的样式和特性、设置元素内容、移动元素、从头创建元素以及处理表单元素。
第4章展示了如何使用jQuery极大地简化页面上的事件处理。毕竟，响应用户事件使交互式Web应用变得可能，那些跨浏览器实现复杂事件处理的开发人员，一定会感激jQuery为这一领域带来的便利。本章还详细研究了高级事件处理概念，比如事件命名空间、自定义事件的触发和处理，甚至创建“live”事件处理程序，并组成一个完整的项目示例。
第5章的主题是动画和特效。我们将看到jQuery使创建动画特效不仅没有痛苦，而且高效且充满乐趣。为顺序执行动画准备的函数队列，以及普通的函数回调也在讨论之列。
第6章将学习jQuery提供的实用函数和标志，这些内容不仅适合页面开发人员，也适合为jQuery编写扩展和插件的开发人员。
第7章关注扩展和插件的开发。我们会看到jQuery使其变得极其简单，无需深奥的JavaScript或jQuery知识，任何开发人员都可以编写扩展，也会看到为什么需要将可重用的代码封装为jQuery扩展。
第8章关注现代Web应用开发中一个非常重要的领域：发起Ajax请求。我们将看到jQuery使网页上的Ajax开发变得如此简单，并防止我们掉入常见的陷阱，同时大大简化了使用常用数据类型的Ajax交互（比如返回JSON结构）。另一个综合示例，则涵盖了我们所学的jQuery的各个方面。
第二部分包含3章，我们将学习jQuery配套的界面库jQuery UI。
第9章介绍了jQuery UI库，解释了如何配置和获取该库的代码定制版本，以及如何使用可视主题样式来实现不同的界面效果。我们剖析了可视主题，不仅可以了解它们是如何工作的，还可以修改主题以满足我们的需求。围绕本章我们讨论了jQuery UI库为jQuery核心所做的扩展，以及如何利用这些扩展的优势来增强核心方法。
第10章研究了jQuery UI提供的鼠标交互能力。无论是从元素拖放，还是元素排序、选择以及改变大小等操作，它都提供了支持。
最后，第11章全面阐释了jQuery UI控件集，这个部件集扩展了现有的页面输入机制。包括从类似按钮的简单控件到复杂控件，比如日期选择器、自动完成控件、选项卡面板以及对话框控件等。
我们在附录中介绍了JavaScript的基本概念，比如函数上下文和闭包。对于新手或者希望回顾旧知识的开发人员，理解这些概念将有助于更高效地使用jQuery。页边图标。
在本书中，为了说明jQuery和jQuery UI的概念，我们编写了独特的实验室页面。这些实验室页面是可交互的网页，附有可下载的示例代码，你可以在本机打开并运行它们。 引入新的实验室页面时，页面左侧边栏处会有一个实验室图标（左侧所示锥形瓶图标），便于你能够在书中一眼看出实验室页面首次引入的位置。在下载的示例代码首页包含了实验室页面的链接。
你还可以通过远程站点http://www.bibeault.org/jqia2或图灵社区www.ituring.com.cn访问实验室页面以及示例代码的其余部分。 另外一个贯穿全书的图标是练习图标（三角形和铅笔），它们指出你需要做练习的地方。通常情况下，这些练习与特定的实验室页面相关联，但有时它们是本书中其他代码的逻辑扩展，或者是独立的简单练习题。完成这些练习有助于你更加深入地了解jQuery。代码约定。
所有代码清单或者正文中的源代码都采用这样的字体（jQuery Code），以示区分。正文中的方法和函数名、对象属性、XML元素以及节点属性也以这种字体呈现。
有些例子中，原始的源代码已经被排版以适合在页面上显示。一般来说，源代码样式的改变主要是由于页面宽度的限制，但有时你会发现书中的代码和下载的源代码格式略有差异。在少数情况下，为了不改变长代码行的含义，不会对它们进行重排，而是采用续行记号。
代码清单中的注释是为了强调重要的概念。在很多情况下，代码中带圈的数字与随后正文中出现相同带圈数字的地方一一对应。代码下载。
本书中所有的源代码示例（包括那些没有在正文中出现的额外示例），都可以从http://www.manning.com/jQueryinActionSecondEdition下载。为了方便那些无法在本地运行示例代码的开发人员，我们为示例代码创建了一个在线版本http://www.bibeault.org/jqia2/。
本书中的代码示例被组织成Web应用程序，每章独立一块，方便使用者随时通过本地Web服务器获取服务，比如Apache的HTTP服务器。你可以将下载的代码解压缩到一个文件夹，并设置此文件夹为应用程序根目录。启动页面就是这个目录下的index.html文件。
除了描述Ajax请求的第8章以及jQuery UI的少数几章，大部分的示例都可以在浏览器直接打开，而无需使用Web服务器。Ajax示例需要使用Apache所不具备的后端交互能力，因此要想在本地运行这些示例，需要为Apache安装PHP服务，或者使用可以执行Java小程序（Java servlets）或JSP（JavaServer Pages）的服务器，比如Tomecat。文件chapter8/tomcat.pdf将指导你轻松地安装Tomcat服务器以便运行Ajax示例。
所有的代码示例在各个主流浏览器下已测试通过，包括IE 7/8、Firefox 3、Safari 3/4以及Google Chrome。
交流反馈。
购买本书后，你可以访问http://www.manning.com/jQueryinActionSecondEdition发表对本书的评论，询问技术问题以及1获取其他用户的帮助。1 读者也可以访问图灵社区（ituring.com.cn）发表对本书的评论。——编者注关于封面插图
本书封面上的画像名称是“守望者”，摘自200百年前法国人J.G.St.Saveur所著的《旅行百科》。在那个年代，人们对为了获得乐趣而旅行感到很新鲜，类似的旅行指南大受欢迎，旅行者和足不出户的人们从旅行指南上了解世界各地的风土人情，其中还包括法国士兵、公务员、手工艺者、商人和农民在不同地区的服装样式和制服样式。《旅行百科》通过各种各样的图片生动地描绘了200年前世界其他城镇的不同特色。人们彼此孤立，拥有各自的方言和语言。可以很容易地通过人们的语言和穿着，判定其居住的地方是城镇还是乡村，从事的职业以及拥有的地位。
从那时起，服饰样式有了很大的变化，各个地域原有的多种多样的服饰正在逐渐消失。现在，我们通常很难区分两个不同地区的人。也许，乐观地看，我们是用文化和外表上的多样性来换取更加多元化的生活，或者说多元化的、充满趣味的智慧人生。
这本两个世纪前的旅行指南充分展示了各地多姿多彩的地域风情，Manning出版社用这本指南中的一幅插图作为封面，以赞美计算机行业的创新性、开拓精神和蕴含的无穷乐趣。第一部分核心jQuery
当人们听说 jQuery 这个名称时，就会自然而然地想到核心 jQuery 库 ；然而 jQuery 的意义不仅于此，它创建了一个围绕核心 jQuery 的生态系统，比如衍生的 jQuery UI（本书第二部分讨论的主题）、官方插件（参见 http://plugins.jquery.com/）以及大量的非官方插件，我们可以通过搜索引擎很容易地找到它们（在 Google 中搜索“jQuery plugin”会有超过 400 万项结果！）。
就像苹果的 iPod 一样，如果它本身不够优秀，那么为它扩展的第三方产品市场也就不会存在一样，核心 jQuery 库是这一切繁华的基础。
本书第一部分共 8 章，我们将会从头学习核心 jQuery 库。当你完成这几章的学习后，你会发现 jQuery 库一应俱全，这个客户端工具极其强大可以随时应用到任何 Web 开发项目中。你可能还会使用 jQuery 插件库（就像 iPod 配件一样），它们一定有自身存在的价值。
因此请翻开新的一页，仔细阅读并准备好为你的 Web 开发注入活力，你会发现这不仅简单而且充满乐趣！第1章jQuery基础本章内容。● 为什么使用jQuery● 不唐突的JavaScript的含义● jQuery的基本原理和概念● 结合其他JavaScript库使用jQuery
JavaScript从诞生那天起就被很多Web开发人员嘲笑为“玩具”语言，然而在过去的几年时间里，人们逐渐对高交互性的下一代Web应用（也被称为关注富互联网应用或者基于DOM的脚本应用）以及Ajax技术产生了热情，从而使JavaScript又重获关注。由于客户端开发人员已经抛弃剪切和粘贴JavaScript的开发方式，转而使用方便快捷、功能完善的JavaScript库，因此这门语言也得到了长足的快速发展。这些库彻底解决了跨浏览器问题，并提供了新颖的、改进了的Web开发模式。
作为一个相对年轻的JavaScript库，jQuery以迅雷不及掩耳之势席卷了整个Web开发社区，很快赢得了几家大公司的支持并被应用于其关键的产品中。jQuery的一些典型用户包括IBM、Netflix、Amazon、Dell、Best Buy、Twitter美国银行以及很多其他的知名企业。微软甚至把jQuery和Visual Studio工具一块发布，而诺基亚则在所有的手机平台以及WRT（Web Runtime Component）上使用jQuery。
这些都是jQuery足以炫耀的资本！
和其他更加关注智能化的JavaScript工具包不同，jQuery的目标是改变Web开发人员创建高交互性页面的方式。设计者无需花费时间纠缠JavaScript复杂的高级特性，而是使用现有的知识比如CSS（Cascading Style Sheets，层叠样式表）、HTML（Hypertext Markup Language，超文本标记语言)、XHTML（Extensible Hypertext Markup Language，扩展的超文本标记语言）以及原生的JavaScript直接操作页面元素，从而实现快速开发。
本书中，我们会深入学习jQuery为高交互性Web应用程序开发者提供的功能。下面来探索jQuery为Web开发盛宴带来的实实在在的好处吧。
你可以从jQuery网站（http://jquery.com/）获取最新版本的jQuery。安装jQuery相当简单，只需将它放在应用程序目录并在页面中使用HTML标签
本书中使用的jQuery版本可以从下载的示例代码中找到（http://1www.manning.com/bibeault2）。1 读者也可以登录图灵社区下载源代码，网址：www.ituring.com.cn。——编者注1.1 用少量代码实现丰富的功能
如果你曾经尝试为页面添加一些动态的功能，那么你就会发现实现的模式经常是相同的，首先选择一个元素（或者一组元素），然后以某种方式操作这些元素。你可以显示或隐藏元素，给元素添加CSS类，让元素动起来或者改变元素的特性。
使用原始的JavaScript完成这些任务中的任何一个，都需要数十行的代码，jQuery的开发者们专门为此创建了jQuery库来简化这些常见任务。例如，有过处理单选按钮分组经验的开发人员都知道，找出分组中哪个元素被选中并获取它的value特性是非常乏味的；首先需要找出单选按钮分组，其次获取由这些单选按钮元素组成的数组并逐个遍历，找出哪个元素拥有checked特性，最后获取此元素的value特性。
过去人们通过如下代码来实现：var checkedValue;var elements = document.getElementsByTagName('input');for (var n = 0; n < elements.length; n++) { if (elements[n].type == 'radio' && elements[n].name == 'someRadioGroup' && elements[n].checked) { checkedValue = elements[n].value; }}
而jQuery只需要一行代码就能实现相同的功能：var checkedValue = $('[name="someRadioGroup"]:checked').val();
如果这段代码看起来有点神秘请不用担心。很快你就能搞懂它的工作原理，并创建出简洁而强大的jQuery代码来武装你的页面。下面简单看一下这个强大的代码片段是如何工作的。
首先，找出所有name特性值为someRadioGroup的元素（别忘记单选按钮分组是由一系列拥有相同名称的单选按钮元素组成的），然后过滤这个集合从而得到处于checked状态的那个单选按钮，并获取它的value特性。（只可能有一个符合条件的元素，因为浏览器只允许选中同一分组中的一项单选按钮。）
这条jQuery语句的真正威力来自选择器。，它是一个识别页面元素的表达式。它帮助我们轻松找到并获取需要的元素。在上面的例子中，就是单选按钮分组中被选中的元素。
如果你还没有下载示例代码，现在就去下载吧。下载链接就在本书的官方网站：http://www.manning.com/bibeault2（别忘记链接中最后的字符2）。把下载的代码解压缩到任意文件夹之后，可以打开单独的文件，也可以通过根目录下的索引页（index.html）访问任意文件。
在浏览器中打开文件chapter1/radio.group.html，如图1-1所示，这个示例展示了如何使用jQuery获取单选按钮分组中被选中的元素。
这个简单的例子应该可以使你信服，jQuery能够以轻松的方式创建高度交互的下一代Web应用程序。随着对本书各章的学习，我们将会逐渐揭开jQuery的神秘面纱，让你全面感受jQuery驾驭页面的强大能力。
我们很快就会学习如何创建jQuery选择器，正是它使得本例如此简单，但是先来了解一下jQuery作者对于如何在页面上最有效地使用JavaScript有什么样的想法。
图1-1 使用一条jQuery表达式轻松获取被选中的单选按钮。1.2 不唐突的JavaScript
记得在CSS出现之前糟糕的往日吗？那时我们不得不在HTML页面中混合使用样式标记和文档结构标记。任何一个网页开发人员，无论从事开发的时间长短，都一定会对这种陈旧的开发方式深恶痛绝。
CSS的出现让Web开发人员可以将样式信息从文档结构中分离出1来，而且摒弃了老式的等标签。将样式从文档中分离出来不仅有利于页面的维护，而且能够使我们只需通过切换样式表就能完成页面的换肤功能。1 HTML 4.01不赞成使用标签，而HTML 5已经不支持这个标签了。（以下注释如非特别指明，均为译者注。）
很少有人愿意再将样式嵌入HTML元素中，然而下面的代码却依然很常见。
可以清楚地看到，这个按钮的样式（包括按钮标题的字体）不是通过废弃的标签或者其他样式标签设置的，而是通过某种应用到页面上的CSS规则（没有列出）设置的。尽管这里的声明没有把样式。和结构混合在一起，但是它把单击按钮时需要执行的JavaScript脚本（本例中，脚本把id值为xyz的DOM元素的颜色改为红色）放在了按钮标签的onclick特性中，这使得行为。和结构混合在了一起。
下面来看看怎么改进这种情况。1.2.1 行为和结构分离。
就像在HTML文档中应该把样式从结构中分离出来一样，我们有同样的理由把行为。从结构中分离出来。
理想情况下，HTML页面应该按照图1-2的方式来组织结构、样式和行为3部分，每一部分都有属于自己的位置。
图1-2 将结构、样式和行为整齐地放置在页面的不同部分，最大限度地确保了可读性和可维护性。
这种策略被称为不唐突的。 JavaScript，是由jQuery的开发者引入公众视野的，已经扎根于所有主要的JavaScript类库中，它能帮助页面开发者在页面中实现这种有效的分离。随着jQuery对这一概念的推广，jQuery的核心也在逐步优化以便更加容易地生成不唐突的JavaScript代码。不唐突的JavaScript认为，任何。存在于HTML页面
内部的JavaScript代码都是错误的，这些错误代码或者存在于HTML元素特性（比如onclick特性）中，或者存在于页面脚本块中。你或许会问：“如果不使用onclick特性，如何为按钮添加行为呢？”考虑下面按钮元素的变化：
这就简单多了！但你会发现，现在的按钮不能做。任何事情了。你可以一直不停地单击它，但是没有任何反应。
下面就来解决这个问题。1.2.2 分离脚本。
我们可以将按钮的行为移到
标签里的脚本块中，而不是把它们写在标记里，这样脚本就被移出了之外，如下所示：我们把脚本放在页面的onload处理函数中，并将一个内联函数赋给按钮元素的onclick特性。
之所以将这段脚本放在onload处理函数中（而不是直接放在内联代码块中），是因为我们要确保在使用按钮元素之前。，它已经存在于页面中了。（在1.3.3节中，我们将看到jQuery提供了更好的地方来放置这些代码。）注意。 出于对性能的考虑，也可以把脚本块放在文档主体的底部，不过现代浏览器的速度都已经很快了，这么做的性能差异可以忽略不计。这里重点强调的概念是避免在结构性的元素中嵌入描述行为的代码。
如果本例的代码看起来不太好理解（比如函数字面值与内联函数的概念），也不要担心！为了帮助你更高效地使用jQuery，本书附录包含了你需要掌握的重要JavaScript概念。本章的剩余部分将探讨jQuery如何帮助我们更加轻松和快速地编写上述代码，并保持代码的通用性。
不唐突的JavaScript是一项强大的编程技术，为Web应用开发引入了清晰的职责划分，但这样做也是有代价的。你可能已经注意到，与直接在按钮标记中放置脚本相比，不唐突的JavaScript需要编写更多行代码来实现同样的功能。不唐突的JavaScript 可能。会增加代码的行数，并且它还需要客户端脚本遵守一些规则并且应用良好的编码模式。
但这未尝不是一件好事，它能够促使我们以编写服务器端代码的严谨态度来编写客户端代码。但那需要做很多额外的工作——如果没有jQuery的话。
如前所述，jQuery团队尤其注重以简单和愉快的方式在页面上使用不唐突的JavaScript，而无需付出大量精力编写大段代码。我们将发现，有效利用jQuery能够有助于用更少代码实现更多的功能。
事不宜迟，下面就开始介绍如何在jQuery的帮助下轻松地为页面添加丰富的功能。1.3 jQuery基础
jQuery主要关注从HTML页面上获取元素并对它们进行操作，这是jQuery的核心。如果你熟悉CSS，那么对选择器的强大功能一定印象深刻，它通过类型、特性或在文档中的位置来描述元素集合。有了jQuery，你就能够利用现有知识发挥选择器的强大威力，极大地简化JavaScript代码。
jQuery的首要目标就是确保在所有主要浏览器下都能流畅地运行代码。很多JavaScript难题（比如等待页面加载完毕后才能执行页面操作）都已经被jQuery轻松地解决了。
如果需要更多的功能，jQuery还通过插件。提供了简单而强大的内置方法，以扩展其现有的功能。很多jQuery新手发现他们在学习的第一天就能自己编写插件了。
下面开始学习如何借助CSS的现有知识来生成强大而简洁的代码。1.3.1 jQuery包装器。
当为了使设计和内容分离而把CSS引入Web技术的时候，需要以某种方法从外部样式表中引用页面中的元素组。这种方法就是选择器，它可以根据元素的类型、特性或者元素在HTML文档中的位置来精确地描述元素。
熟悉XML的开发者可能会联想到使用XPath选择XML文档中的元素。CSS选择器使用了同样强大的概念，但为了适用于HTML页面而做了优化，从而更加简洁且更易理解。
比如，选择器p a
引用位于
元素内的所有超链接（元素）集合。jQuery使用相同的选择器，不仅支持常用的CSS选择器，而且支持一些没有被所有浏览器完全实现的选择器，甚至包括CSS3中定义的一些强大的选择器。
要选择一组元素，只需使用如下的简单语法将选择器传递给jQuery函数。$(selector)
或者jQuery(selector)
可能一开始你会觉得$()符号有点儿奇怪，不过大部分jQuery用户会很快喜欢上这种简洁的语法。比如，选择位于
元素内的一组链接，可以使用如下代码：$("p a")
$()函数（jQuery()函数的别名）返回特殊的JavaScript对象，它包含与选择器相匹配的DOM元素数组，这个数组中的元素是按照在文档中的顺序排列的。这个对象拥有大量有用的预定义方法，可作用于已收集的元素集合。
在编程用语中，这种构造方法称为包装器。（wrapper），因为它包装了收集到的元素并添加了扩展功能。我们使用术语jQuery 包装器。或者包装集。，来指这些可以通过jQuery定义的方法操作的含有匹配元素的集合。
假如想隐藏所有类名为notLongForThisWorld的
这样的方法有很多，通常称为jQuery 包装器方法。，它们有一个特点——当执行完毕后（比如隐藏操作）会返回相同的一组元素，以便为另一个操作做准备。例如，假设除了隐藏这些元素，我们还想为每一个元素增加一个新的类removed。可以这样写：$("div.notLongForThisWorld").hide().addClass("removed");
这些jQuery 作用链。可以无限延续。jQuery作用链绵延数十种方法的示例也不罕见。因为每一种方法都作用在与最初的选择器相匹配的元素集上，所以没有必要遍历元素集。jQuery已经为我们在后台完成了这一切！
尽管选择的对象组通过一个高度复杂的JavaScript对象来呈现，但是如果有必要的话，也可以把它当做普通的元素数组来对待。因此，下面两段代码的结果相同：$("#someElement").html("I have added some text to an element");
和$("#someElement")[0].innerHTML = "I have added some text to an element";
由于使用了ID选择器，因此选择器只能匹配一个元素。第一个示例使用jQuery的html()方法，用一些HTML标记替换DOM元素的内容。第二个示例使用jQuery获取元素数组，通过数组下标0选择第一个元素，然后将值赋给一个常见的JavaScript属性innerHTML来替换内容。
如果想让匹配多个元素的选择器达到相同的效果，下面两个代码片段将会产生相同的结果（但第二个不是jQuery推荐的编程方式）。$("div.fillMeIn") .html("I have added some text to a group of nodes");
和var elements = $("div.fillMeIn");for(var i=0;i 随着逻辑逐渐复杂，使用jQuery作用链可以不用改变预期结果而减少代码行数。此外，jQuery不仅支持我们已经知道并且喜爱的选择器，而且还支持更高级的选择器（作为CSS规范定义的一部分），甚至是一些自定义选择器。 表1-1给出了一些示例。 表1-1 选择器示例。选 择 器结 果$("p:even")选择所有偶数行的 元素$("tr:nth-选择每个表格的第一行元素child(1)")$("body > div")选择作为
这太强大了！
你可以利用已经掌握的CSS知识来快速入门并提高，然后学习jQuery支持的更高级选择器。我们会在第2章详细介绍jQuery选择器，你也可以在jQuery站点找到选择器的完整列表http://docs.jquery.com/Selectors。
选择DOM元素来进行操作是Web开发中的常见需求，但有些需求和DOM元素毫无关系。下面粗略考察除了元素操作之处jQuery还提供了哪些功能。1.3.2 实用函数。
尽管包装将要操作的元素是jQuery $()函数最常见用法之一，但却并不是它的唯一职责。$()函数的另一个职责是作为一些通用实用函数集的命名空间前缀。。由于以选择器为参数来调用$()生成的jQuery包装器赋予了页面开发者如此强大的力量，以至于大部分的页面开发者很少会用到其中的一些实用函数。实际上，直到第6章我们才会详细地学习大部分实用函数以便为编写jQuery插件做准备。不过下面的几节将会用到一些实用函数，因此先来简单了解一下。
这些函数的符号初看起来可能会有点奇怪。比如，用来去除字符串前后空格的实用函数，其调用形式如下：var trimmed = $.trim(someString);
如果你觉得$.前缀有点儿怪异，就记住$是JavaScript中的标识符，和其他的标识符没有什么不同。使用标识符jQuery（而不用别名$）来调用这个函数，可能看起来就没那么奇怪了如：var trimmed = jQuery.trim(someString);
现在可以清楚地看到，trim()仅仅是jQuery（或它的别名$）命名空间下的一个函数。注意。 尽管这些元素在jQuery文档中被称为实用函数，1但它们实际上是$()函数的方法（是的，在JavaScript中函数也可以有自己的方法）。为了不和jQuery在线文档产生术语上的冲突，我们撇开这些技术差异，使用实用函数来描述这些方法。1 可以假设jQuery的内部实现如下：function $(){} $.trim=function(){}。
我们会在1.3.5节中学习一个用来帮助扩展jQuery的实用函数，然后在1.3.6节中学习另一个可以让jQuery和其他客户端库共存的实用函数。但首先要看一下jQuery 的$()函数的另一个重要职责。1.3.3 文档就绪处理程序。
当遵循不唐突的JavaScript原则时，行为就从结构中分离出来了，因此我们要在文档标记外部执行对页面元素的操作。为了达到这一目的，我们需要一种在页面DOM元素完全渲染后再执行操作的方法。在“单选按钮分组”示例中，必须在整个页面主体加载完毕后再应用行为。
传统上，window实例的onload处理程序就是为了实现上述目的，该程序在整个页面加载完毕后执行代码。其典型的语法如下：window.onload = function() { // 在这里执行操作};
这样就能在文档完全加载后。执行定义的代码。然而，浏览器会延迟执行onload的代码，不仅是在创建DOM树之后，而且在所有外部资源全部加载完毕，并且整个页面在浏览器窗口中显示完毕之后。这些资源不仅包括图片资源，而且包括嵌入在页面上的QuickTime和Flash视频资源，如今这类资源会越来越多。结果是，从首次浏览页面到onload脚本执行完毕，访问者将会经历一段严重的延迟。
更糟糕的是，如果图片或者其他资源需要很长时间来加载，则访问者就需要等待图片加载完成后才能使用丰富的页面行为。这会使不唐突的JavaScript的提议，在很多实际案例中遭遇滑铁卢。
更好的方式是，在执行脚本以便应用丰富行为之前，只。需要等待文档结构被完全解析并且浏览器已经把HTML转化为DOM树。跨浏览器完成这个任务略有困难，但是jQuery提供了一个简单的方式：在DOM树（而不是外部资源）加载完毕之后立即触发脚本的执行。正式的语法结构（使用前面的隐藏元素的例子）如下所示：jQuery(document).ready(function() { $("div.notLongForThisWorld").hide();});
首先，使用jQuery()函数包装document对象，然后调用ready()方法并传递一个在文档就绪时执行的函数。
试读结束[说明：试读内容隐藏了图片]