作者：[美]Keith Wood
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
扩展jQuery试读：
前言
我在2007年初第一次接触jQuery，就立即发现它的直观和简单易用。我能快速地选择元素，并显示和隐藏它们。接下来我试着使用了一些第三方插件，但是发现它们的实用性和可用性都相差很大。
幸运的是，我最初写的插件成为了jQuery社区的一个主要插件。当时我偶然间看到了Marc Grabanski的Clean Calendar插件（他已经把它转为了一个jQuery插件），我喜欢它提供的日期输入界面，于是就开始研究它，并添加更多功能，作为探索jQuery能力的一个途径。最终我把这些提供给了Marc。从此，我们开始了接下来几年在这个插件上的合作。
后来，这个Calendar插件被重命名为Datepicker插件，jQuery UI团队也选择将其作为他们的日期选择插件的基础。
自那时开始，我一直出于需要和兴趣开发其他一些插件。最流行的一些包括另一个允许选择日期范围或多个独立日期的Datepicker、一个提供非公历日期的Calendars插件、一个显示到达给定时间所剩余时间的Countdown插件，以及一个允许用户和页面上SVG元素交互的SVG Integration插件。这段时间，我学习了许多关于JavaScript和jQuery的知识，以及如何为jQuery编写插件。
创建插件是重用功能的一个理想方式，能使其简单地被纳入其他网页。它还可以让开发者更彻底地测试代码，确保在所有使用环境中的行为一致性。
这几年间，jQuery在功能和大小上都显著增长，但是它让开发者的工作更为简单的目的并没有改变。欣欣向荣的插件社区证明了jQuery团队提供这个易于扩展的平台的远见。我希望本书中提供的见解能让读者在自己的项目中最大化地使用jQuery的功能。关于本书
jQuery是Web上使用最广泛的JavaScript库。它提供了许多功能，使得Web开发更加容易。但是它只专注于提供广泛适用和使用的功能，并不能做开发者希望的所有事情。开发者可以为每个网页编写代码实现自已的需求，但是如果发现在多个页面间有重复代码，就是时候创建一个jQuery的插件了。
一个插件允许开发者把代码打包在一个可重用的模块中，它可以被很容易地应用在其他网页上。开发者可以受益于只需一份代码库，这样不仅可以降低测试和维护代价，也能使整个网站有一致的外观和行为。
设计jQuery的目的是适应这些插件，允许它们成为jQuery环境的一级成员，并可以与内置的功能一起使用。本书介绍如何使用最佳实践原理来创建一个jQuery插件，使其在不干扰其他插件的情况下与jQuery集成，并且提供了一个灵活和健壮的解决方案。本书读者对象
这是一本关于扩展jQuery来创建可重用插件的书。读者可以是那些想知道jQuery的扩展点，在他们的项目中创建可重用模块的技术主管，也可以是那些想了解jQuery背后如何书写健壮代码细节的网页开发者，还可以是那些想要为jQuery社区创建一个最佳实践的插件的第三方插件开发者。
这里假定目标读者熟悉jQuery。他应该可以使用jQuery来选择元素，然后操作这些元素来改变属性，显示或隐藏元素，或者附加事件处理器；也应该熟悉使用已有的第三方插件为自已的页面添加功能。
关于jQuery本身的介绍，请参考Bear Bibeault和Yehuda Katz的jQuery in Action，Second Edition（Manning，2010）。
jQuery是一个JavaScript库，所以开发者也应该熟悉JavaScript语言。大多数插件代码都是直接的JavaScript和一些jQuery调用或者集成点。代码中经常用到匿名函数、三元运算符和闭包结构。读者如果已经知道这些术语是最好不过，否则需要先温习一下JavaScript。
为了更深入地了解JavaScript语言，请参考John Resig和Bear Bibeault的Secrets of the JavaScript Ninja（Manning，2012）。路线图
本书分为4部分。第1部分（第1～3章）包括提高jQuery体验的简单扩展。第2部分（第4～7章）介绍了插件和函数的最佳实现方法。第3部分（第8～10章）专注于扩展jQuery UI来提升页面。第4部分（第11～14章）涵盖了其余部分，包括动画、Ajax、事件处理，以及Validation插件，这些不是jQuery的一部分，但是却扮演了重要的角色。● 第1章简短地介绍jQuery的历史，并讨论利用集成的方式可以扩
展什么，从而增加它的功能。● 第2章着眼于jQuery的组成模块，并更详细地介绍如何扩展它们，
然后开发一个简单的插件来展示插件开发的基础。● 第3章展示如何扩展jQuery的选择器，从而找到页面上的更多元
素。● 第4章向后退了一步，介绍开发一个健壮且有用的插件时需要应
用的最佳实践原则。● 第5章基于前一章介绍的原则，在一个框架上开发了一个集合插
件。集合插件操作从页面上选出的一组元素。● 第6章着眼于提供与特定元素无关的功能的函数插件，其中使用
本地化和Cookie处理作为示例。● 第7章讨论测试和打包插件，确保插件能正确工作，并且能很容
易地被获取和使用。本章还介绍如何为插件书写文档和创建示例，
这样潜在用户就可以从中获取更多信息。● 第8章展示如何使用jQuery UI小部件框架来创建集合插件——在
外观和行为上与其他jQuery UI组件集成。● 第9章通过创建一个捕获签名的小部件，介绍如何在插件中使用
jQuery UI Mouse模块与鼠标拖动操作进行交互。● 第10章完成jQuery UI的介绍，包括如何创建开发者自己的视觉
特效，以及如何调整动画属性的变化率。● 第11章介绍如何使用非简单数值属性实现动画，其中使用背景
位置作为示例。● 第12章深入研究jQuery的Ajax处理能力，展示如何通过预过滤器、
传输器及转换器来增强它们。● 第13章讨论jQuery的特殊事件框架，如何使用它在jQuery中创建
新事件，以及如何增强现有事件。● 第14章展示如何扩展Validation插件来添加额外的验证规则，这
些规则可以与内置规则一起用在单个元素上。代码等资源下载①
jQuery和jQuery UI都是MIT许可证下的开源库。它们可以分别从相应的网站直接下载：http://jquery.com/和http://jqueryui.com/。
本书中所有的示例源代码都可以从Manning网站上的本书页面中找到：http://www.manning.com/ExtendingjQuery。
① Massachusetts Institute of Technology license agreement,https://github.com/ jquery/jquery/blob/master/ MIThttp://write.epubit.com.cn/article/edit/5833#aca01-LICENSE.txt。关于封面插图
本书的封面插图名是“Dolenka”，表示一位从斯洛文尼亚和匈牙利边界上的村庄Dolenci来的妇女。该插画取自克罗地亚斯普利特民族博物馆2008年出版的Balthasar Hacquet的《图说西南及东汪达尔人、伊利里亚人和斯拉夫人》（Images and Descriptions of Southwestern and Eastern Wenda, Illyrians, and Slavs）的最新重印版。Hacquet（1739～1815）是一名奥地利内科医生及科学家。他花费数年时间去研究各地的植物、地质和人种，这些地方包括奥匈帝国的多个地区，以及许多部落和民族居住过的威尼托、尤里安阿尔卑斯山脉及西巴尔干等地区。Hacquet发表的很多论文和书籍中都有手绘插图。
Hacquet的出版物中丰富多样的插图生动地讲述了阿尔卑斯山和巴尔干地区200年前的独特个性。在那时，着装风格就可以区分相隔①几英里的两个村庄的人们，通过服装，人们能轻易地分辨不同人的民族部落、社会阶层，以及从事的行业。从那以后，服装风格发生了改变，丰富的地区多样性开始淡化。现在，通常很难说一个洲的居民和其他洲的居民有什么不同，今天的意大利阿尔卑斯山风景如画的城镇和村庄的居民已经很难轻易地与欧洲其他地方的居民进行区分。
我们在Manning通过图书封面让这些两个世纪前的服装重现于世，并借此来颂扬计算机行业的创意、进取和乐趣。
① 1英里≈1.609千米。——译者注关于作者
Keith Wood有30多年的开发经验，他从2007年初开始对jQuery作出贡献。他已经写了20多个插件，包括最初的Dorld Calendar和Datepicker、Countdown和SVG，并且把它们发布到gjQuery社区。他也经常在jQuery论坛上回答问题，并且成为2012年前五名的贡献者。
在日常工作中，他是一个网站开发者，使用Java/J2EE开发后端，以及使用jQuery开发前端。他生活在澳大利悉尼，与他的搭档Trecialee一起利用业余时间写作了本书。关于译者
李强，架构师，现就职于道富银行技术中心，从事金融软件架构设计工作，参与开发了多个大型金融项目。他还是《HTML5+JavaScript动画基础》一书的译者。读者可以通过sparkli@hotmail.com与他联系。译者序
jQuery是如今Web上使用最为广泛的JavaScript库，全世界一半以上的网站都在使用它。它提供了跨浏览器的支持，可以让开发者不必纠结于特定浏览器的细节差异。jQuery的语法简洁，其独特的选择器、链式调用、事件机制、对Ajax的支持都可以让开发者用很少的代码实现自己的需求。最重要的是，它本身还提供了强大的扩展点，从而使得它有了无限的扩展可能性。简言之，只有想不到，没有做不到。
本书适用于有一定jQuery使用基础，并想进一步在jQuery上开发自己的扩展功能的读者。如果读者没有jQuery基础，也没有关系，可以边读边学，但是至少需要熟悉JavaScript语言。如果读者连JavaScript语言都不熟悉，建议先读一本JavaScript的入门书籍，再来阅读本书。
本书着重介绍jQuery的扩展点，几乎覆盖了每一个方面，主要分为4大部分。
第1部分介绍了简单的扩展，包括简单的插件、选择器和过滤器的扩展。
第2部分介绍了插件和函数，包括插件的基本开发原则、集合插件、函数插件，以及如何为插件进行测试、打包和书写文档。
第3部分介绍了扩展jQuery UI，包括jQuery UI小部件框架、鼠标交互，以及特效。
第4部分介绍了jQuery的其他扩展，包括复杂属性的动画、Ajax的扩展、事件的扩展，以及验证规则的扩展。
本书的作者Keith Wood是一位在jQuery社区中极有声望的开发者，jQuery中的Datepicker插件就是他的作品。他在本书中深入地介绍了每一个扩展点，并且给出了详细的示例。非常感谢他为读者带来了这样一本好书，也非常感谢他能在我翻译本书的过程中抽出宝贵时间为我解释一些疑惑和难点。
我要感谢我的妻子。翻译本书时，我花费了大量的时间，因而没能好好陪她。特别要感谢我的搭档朱悦倩，她校对了全书的初稿，修正了许多错误，并提出了宝贵的修改意见。正是她细腻的性格、对语言的独特感悟以及认真负责的态度，使得本书的质量大幅提高。尽管我们在翻译的过程中谨小慎微，但仍然难免会有一些疏漏。如果读者发现了任何错误或不足，请不吝指教。李强2014年7月于杭州序
自从2006年jQuery首次亮相以来，它已发展成管理和增强HTML文档的最流行的JavaScript库。jQuery的跨浏览器设计允许开发者专注于网站建设，而不必纠结于浏览器特性。到2013年，排名前100万（访问量）的网站中，超过一半使用了jQuery。同样，构建在jQuery上的jQuery UI库也是最受欢迎的UI小部件。
它之所以如此流行，一个原因是jQuery团队不断添加功能，所以几乎开发者遇到的任何问题都可以用jQuery方法来解决。然而，每一个添加到jQuery核心代码中的功能，都意味着无论网站有没有用到这个功能，访问者都需要下载更多的JavaScript字节。这样一个庞大的整体库为开发带来了方便，但是却降低了性能，因而并不是一个好的权衡。
为了应对代码膨胀的危害，jQuery只是把最为常用的功能包括在库中，并提供一个可供开发者扩展的基础。经过多年的发展，jQuery插件已经形成了一个令人难以置信的生态系统。它的驱动力来自于每个开发者解决特定问题的需求，以及他们在广泛的jQuery社区中慷慨分享的代码。jQuery的成功很大程度上归功于这种精神，以及团队通过类似于plugins.jquery.com这样的网站对这种精神的促进。
Keith Wood很适合通过本书作为读者的向导。他是jQuery论坛的常客，并在很多年里都是最佳贡献者，为解决开发者遇到的实际问题提供了许多高质量的回答。他也通过开发许多流行的jQuery插件获得了自己的威望。Keith有着对jQuery扩展的专业理解和作为导师的直觉，他知道哪些jQuery话题需要深入的解释，而不是泛泛而谈即可。
本书深入研究了jQuery功能扩展的几乎每一个方面——无论是基于个人需求还是出于职业目的。最为常见的扩展类型是扩展jQuery Core方法的基础jQuery插件，但是本书用同样的篇幅介绍了基于jQuery UI小部件的插件，它们通常为可视化的扩展提供更好的基础。关于jQuery UI小部件的详细文档非常稀缺，因而这些章节就显得尤为珍贵。
我特别高兴的是，Keith在单元测试的话题上投入了一些时间。有一套全面的单元测试似乎是不必要的额外工作，但是几个月后，一个插件的一个正常变化会导致整个网络团队在线上进行数小时的调试，同时涌入大量用户投诉，读者才会发现单元测试的价值。单元测试并不能找出所有错误，但是它们扮演完整检查的角色，防止一些不耐烦的开发者在做手动回归测试时，所造成的一些遗漏。
无论读者学习jQuery扩展的动机是什么，请考虑为开源社区贡献一份力量，让其他人也能从中受益。这契合了jQuery的哲学。与其他人分享自己的知识不仅能帮助他人，同时也能提升自己的专业认可度。Dave MethvinJQuery基金会总裁致谢
我首先感谢John Resig和jQuery团队为全世界的Web开发人员提供了这样一个有用的工具。
我还要感谢Marc Grabanski允许我为Calendar/Datepicker作出贡献，由此开启了我开发插件的生涯。
写一本书总是一个团队的努力。我要感谢Manning的编辑团队：Bert Bates、Frank Pohlmann和Cynthia Kane，技术校对团队：RensoHollhumer和MichielTrimpe，以及整个制作团队的支持和指导。特别感谢Manning的Christina Rudloff，是他最初打算做一本jQuery UI书的想法促成了本书的问世。
感谢多年来联系我并为我提供意见、建议、错误，以及将我的插件进行本地化的开发者，特别是那些做出贡献的开发人员。
感谢对本书早期版本的书稿提供了意见，并由此提高了最终产品质量的审阅者：AmandeepJaswal、Anne Epstein、BradyKelly、Bruno Figueiredo、Daniele Midi、David Walker、EcilTeodoro、Geraint Williams、Giuseppe De Marco、PhD、Jorge Ezequiel Bo、Lisa Z. Morgan、Mike Ma、Pim Van Heuven和Stephen Rice。
特别感谢jQuery基金会总裁Dave Methvin为本书作序并称赞本书。
最后，要重点感谢我的搭档Trecialee。读者所看到的内容很多都是她贡献给这个项目的（尽管她不懂本书的内容）。第1部分简单的扩展
jQuery是如今网络上使用最广泛的JavaScript库，它提供的许多功能使前端开发人员的工作变得简单。开发者可以通过扩展jQuery来提供一些可重用的附加功能，使它变得更加强大。
第1章首先简要地介绍了jQuery的历史，然后讲解开发者可以在哪些方面扩展jQuery，最后通过一些现有的jQuery插件来展示扩展的可能性。
第2章更为详细地介绍了jQuery的架构以及可能的扩展点。然后，为了让读者快速上手，介绍了如何开发一个可以马上使用的简单插件。
最简单的扩展就是增强jQuery的选择器——可以用来选择元素的一个字符串。第3章将会通过许多例子来介绍如何创建自己的选择器。第1章jQuery扩展
本章涵盖以下内容：● jQuery的起源和目的；● 开发者可以扩展jQuery的什么；● 现有扩展的例子。
jQuery是如今网络上使用最广泛的JavaScript库，它提供的许多功能使前端开发人员的工作变得简单，例如遍历 HTML 文件对象模型（DOM）来查找开发者想要的元素并对这些元素应用动画效果。此外，jQuery 的开发者早就意识到它不是（也不应该是）万能的，所以他们提供了一些扩展点，允许把一些额外的功能添加到jQuery中。这一远见为 jQuery 的流行作出了不小的贡献。
本书讲解了如何扩展 jQuery 的各方面来提供更易重用以及更易维护的代码。除了那些可以操作页面上元素集合的标准插件外，开发者还可以创建自定义选择器、工具函数、自定义动画、增强的 Ajax 处理器、自定义事件，以及验证规则。为了让其他人也能最大程度使用你的代码，本书也讲解了如何测试、打包，以及书写文档的内容。1.1 jQuery的背景
jQuery的网站对 jQuery 的定义是“一个快速、小巧、功能丰富的 JavaScript 库。它有易于使用的可跨浏览器的 API，这使得像 HTML 遍历操作、事件处理、动画，以及Ajax这样的事情更简单”（http://jquery.com/）。
它是一个 JavaScript 的函数库，可以让开发者容易地访问、检查或更新 HTML DOM，以及在遵循 Web 2.0范式的基础上，能提供更动态的网页和体验。它的主要特性如下。● 类似 CSS语法的元素选择功能，并且可以扩展。● 元素遍历。● 元素操作，包括移除、内容更新，以及属性修改。● 事件处理，包括自定义事件。● 特效与动画。● Ajax支持。● 功能扩展的框架（本书的主题）。● 各种工具函数。● 跨浏览器支持，包括屏蔽浏览器的差异。
jQuery是一个免费的开源库，它现在采用MIT许可证（http://jquery.org/license/）。之前的版本也使用过GUN通用公共许可协议第2版（GNU General Public License, Version 2）。1.1.1 起源
jQuery最初由John Resig开发，并于 2006年 1 月在BarCamp
①NYC上宣布。他无意中看到Ben Nolan写的Behaviour代码，并且发现了其中的理念的潜力——使用伪CSS风格的选择器来绑定JavaScript函数和各种DOM元素。但是John并不喜欢它冗长的语法以②及缺乏对多级选择器的支持。他提出了新的语法，并在随后加以实现，这就是jQuery的基础。
程序清单 1.1 是一段Behaviour代码，用来把一个click事件附加到一个ID为example的元素内部所有的li元素上。click事件的处理器移除这个被点击的元素。程序清单 1.2 是现在开发者很熟悉的相应的jQuery代码。
程序清单1.1 简单的Behaviour代码
程序清单1.2 对应的jQuery代码
为什么起 jQuery 这个名字呢？最初，这个库叫作jSelect，以反映它选择页面上元素的能力。但是 John 在网上搜了这个名字，发现③它已经被用掉了，所以改名为jQuery。1.1.2 发展
自从 jQuery 公布以来，它已经发布了许多个版本，如表1.1所示（并没有列出所有版本）。多年来，它的功能和体积都增加了不少。表1.1 jQuery的版本（没有列出全部）版 发 布 日 体 备注 本期 积2006年844.3 1.0第一个稳定版本月26日KB2006年52.2 1.0.412月12修复1.0版本的缺陷KB日2007年155.6 1.1改进了选择器的性能月14日KB2007年865.6 jQuery（$）可以被重命名1.1.4月23日KB2007年977.4 1.2月10日KB2008年597.8 1.2.6月26日KB2009年1114 内核中引入了Sizzle选择器引擎、Live 1.3月13日KB事件，重新封装了事件2009年2117 1.3.2月19日KB2010年1154 1.4提高性能，增强Ajax月13日KB2010年1156 1.4.1加入了height()、width()和parseJSON()月25日KB2010年2160 加入了delegate()函数，提高性能1.4.2月13日KB2010年176 1.4.310月14重写了CSS模块，支持元数据操作KB日2010年178 1.4.411月11KB日2011年1207 延迟回调管理，重写了Ajax模块，提高1.5月31日KB遍历性能2011年3214 1.5.2月31日KB2011年5227 显著地提高了attr()、val()函数的性能，1.6加入了prop()函数月2日KB2011年9232 1.6.4月12日KB2011年243 新加入事件API：on()和off()，提高了事1.711月3日KB件代理的性能2012年3246 1.7.2月21日KB2012年8253 重写了Sizzle，改造了动画处理，更加1.8.0月9日KB模块化2012年261 1.8.311月13KB日2013年1261 1.9.0为2.0版本做了一些清理月14日KB2013年2262 1.9.1修复缺陷月4日KB2013年4234 2.0.0不再支持IE 6~8月18日KB2013年5267 1.10.0与2.x的功能/版本同步月24日KB2013年7266 1.10.2月3日KB2013年7236 2.0.3月3日KB
虽然 jQuery 库的体积已经大幅增加，但是压缩后（去除不必要的注释和空格）的代码只有它源代码的1/3大小（最新版本只有91 KB）。而压缩后的版本在网络上以 gzip 格式被使用时，还能再缩小到1/3左右，这样下载最新版本只需要 32 KB 就可以了。通过使用一个可用的 CDN（内容分发网络），文件可能已经被缓存在客户端，这样根本都不用下载了。使用CDN
可以使用下面的script标签之一从CDN上下载jQuery。开发者可能需要根据自己的需求更改一下版本号。使用MediaTemple提供的jQuery CDN
开发者也可以引用这个站点上的jQuery Migration插件，它可以用来辅助开发者把老版本的jQuery迁移到jQuery 1.9或者更新的版本。使用谷歌（Google）的CDN④
所有已经发布的jQuery版本都可以在谷歌的CDN上找到，但是jQuery不能控制谷歌的CDN，所以相对jQuery的发布时间可能会有些延迟。使用微软（Microsoft）的CDN⑤
所有已经发布的jQuery版本都可以在微软的CDN上找到，但是jQuery同样不能控制微软的CDN，所以相对jQuery的发布时间可能会有些延迟。
jQuery现在包括Sizzle选择器引擎，它提供了在DOM中选择出开发者想操作元素的基本能力。Sizzle 把这些选择器代理到浏览器的底层实现，不过在需要保证跨浏览器的统一体验时，它也会使用JavaScript。1.1.3 现状
jQuery已经成为互联网上最为流行的JavaScript库，许多机构和个人在自己的网站中已经采用了这一技术。微软已经正式地支持它并把它作为Visual Studio产品套件的一部分。BuiltWith的报告显示，在排名前1万的网站中，有60%使用jQuery；排名前100万的网站中，有⑥50%使用jQuery。W3Techs的报告显示，在所有的网站中，有55%使用jQuery。在那些使用了JavaScript库的网站中，有90%在使用⑦jQuery。
插件开发者社区欣欣向荣，他们在jQuery的基本精神下提供免费的代码。开发者可以在网上搜索合适的模块，或者使用最近刚刚改版的“官方”插件库（http://plugins.jquery. com）。有些插件非常好，有可靠的代码、良好的文档和示例。但也有比较糟糕的方面，难以使用，缺陷较多，还可能缺乏相关文档。当读者读过这本书，并能运用其原则，其插件应该会属于前一类。
jQuery论坛（https://forum.jquery.com）也是很活跃的，有超过25万个回复和11万个问题。论坛里有一些专门的板块致力于使用和开发jQuery插件。
现在jQuery的开发工作由 jQuery 基金会（http://jquery.org）管理。它成立于 2009年 9 月，管理所有的 jQuery 项目，包括jQuery Core、jQuery UI、jQuery Mobile、Sizzle和QUnit。来自jQuery社区的捐款和捐赠为基金会提供资金支持。1.2 扩展jQuery
如果jQuery能提供很多功能，开发者为什么还要扩展它？为了保持jQuery的大小可控，只有那些通用的和广泛使用的功能被加入了核心代码中（尽管对于什么是有用的功能还有诸多争论）。jQuery提供了如基本元素的访问和修改、事件处理、动画、Ajax处理这些大多数用户都需要的功能。而其他更为特殊的功能则留给其他人去开发。
幸运的是，jQuery团队已经意识到jQuery内核不是万能的，所以他们提供了许多扩展点。开发者可以在已有的jQuery架构和功能的基础上去扩展新的功能。
开发者不但可以扩展jQuery来提供额外的功能，还可以把自己的扩展打包为一个插件，以便在其他网站上得以重用。这样开发者就只需维护一份代码，任何改进都会立即应用到使用了这些插件的网站上。开发者可以在隔离的可控环境下测试自己的插件，以确保它们如期运行。1.2.1 开发者可以扩展什么
正如jQuery的核心库提供了许多功能一样，开发者也可以通过多种方式来扩展jQuery。接下来的几小节里将会介绍这些方式。选择器与过滤器
jQuery的选择器和过滤器允许开发者在网页上识别和收集自己希望操作的元素。尽管jQuery已经内置了节点名、ID和class的标准选择器，但开发者还可以添加伪类（pseudo-class）选择器（扩展CSS定义的伪类），从而提供一致和简洁的方式来过滤前一个选择结果。开发者也可以添加集合过滤器，它可以获取到前一个选择器得到的整个集合以及每个元素在集合中的位置。第3章将会介绍如何创建这些选择器。
通过创建一个自定义选择器，开发者可以把整个选择的逻辑统一在一个地方，使它更容易在其他地方被重用，也保证了在整个项目中都有一致的实现。同时，这些选择器也更容易维护。当修改缺陷或者增加功能时，修改结果马上就能应用到各实例上。集合插件
集合插件是可以应用在选择器返回的元素集合上的函数。这种函数就是大多数人所说的jQuery插件，它们也是第三方插件最大的构成部分。集合插件提供的功能从简单的属性修改，到通过监听元素上的事件来改变行为，再到用一个新的实现方法替换原来的整个组件。只有想不到，没有做不到。
第4章将讲解一系列插件开发的原则。第5章将讲解作者自己所使用的插件开发框架，以及它是如何实现这些原则的。这些原则概括了开发插件的一些最佳实践，使插件在降低与其他代码耦合度的情况下，更好地与jQuery进行集成。
插件开发中很重要的一点就是测试它的功能，使用单元测试工具可以使开发者更加容易、一致地测试代码，以保证它们如期运行。当开发者的代码准备好发布时，它需要被打包，这样就能更加容易地被其他人获取并整合入他们的项目中。开发者还需要提供一个网页来演示插件的功能，这样目标用户就能看到它能做什么以及是怎样工作的。为了让其他人更加了解自己的插件，开发者还必须为插件的每个方面都提供文档。第7章将会介绍这些方面。函数插件
函数插件是一些不直接操作元素集合的工具函数。它们在jQuery的框架上提供了额外的功能，而且通常使用jQuery原生的功能来完成它们的职责。第6章将会详细介绍如何添加工具函数。
这些函数插件的例子包括向控制台发送调试信息以监控代码运行，或是获取和设置页面cookie值。把这些功能制作成一个jQuery插件，可以为用户提供一个熟悉的代码调用方式，并且降低了与外部代码相互影响的可能性。之前提及的原则中，有一部分也会被应用到这类插件中，比如测试、打包、演示以及书写文档。jQuery UI小部件（Widget）
jQuery UI是一个用户界面交互、特效、小部件以及主题的集合，构建在jQuery JavaScript库之上（http://jqueryui.com/）。它定义了一个小部件开发框架，从而允许开发者用一致的方式来创建插件，并且可以用一些现成的主题来设计界面风格。第8章将介绍小部件框架以及如何用它来创建自己的组件。
jQuery UI小部件框架同样遵循第4章中的插件开发原则，并且以一致的方式为所有jQuery UI小部件提供公共功能。基于这个框架来开发插件时，开发者就自动获得了这些内置的功能，从而只需要专注于开发插件独有的功能。如果开发者把ThemeRoller中定义的主题应用到自己的小部件上，它将马上与其他 jQuery UI 组件融为一体。如果开发者重新应用一个主题，它们的外观都会跟着变化。
许多jQuery UI小部件都依赖鼠标拖动来完成它们的功能，jQuery UI团队已经意识到这种交互方式的重要性。不用从头开始，开发者只需要使自已的小部件扩展jQuery UI的鼠标模块，并设置一些自定义的条件，就可以支持鼠标拖动，这样就可以专注于小部件本身功能的开发。第9章将介绍如何使用鼠标模块来创建依赖鼠标操作的小部件。jQuery UI特效
jQuery UI也提供了一组可以应用在页面元素上的特效。开发者可以使用其中一些来隐藏或显现元素，比如blind（隐藏）、clip（裁剪）、fold（折叠）和slide（幻灯片）。有些可以用来吸引注意，比如highlight（高亮）和pulsate（跳动）。开发者也可以定义自己的特效，并且像使用内置特效一样使用它。第 10 章将介绍如何创建新的UI特效。动画属性
jQuery提供了一个动画框架，开发者可以将其应用在任何数值类型的元素属性上。它允许开发者把属性从一个值变化到另一个值，并且可以控制这个过程的持续时间和步长。但是，如果开发者想动画的属性不是一个简单的数值类型，就需要自己来实现这个功能了。比如，jQuery UI提供了一个可以变幻颜色的动画模块。第 11 章将为复杂类型的属性创建一个动画。Ajax处理
jQuery的Ajax功能是它的一个明显优势，它使加载和处理远程数据变得十分简单。开发者可以在Ajax调用时指定期望返回的数据类型：简单文本、HTML、XML、JSON。当远程调用返回结果时，后台会有一个转换过程把字节流转换为开发者期望的格式。开发者可以添加自己的转换逻辑，从而通过识别开发者指定的特殊格式直接进行转换。第12章将详细介绍如何扩展Ajax处理来直接处理一个通用文件格式。事件处理
jQuery的事件处理功能允许开发者在元素上附加多个事件处理器，用来响应用户交互、系统事件以及自定义触发器。jQuery提供了几个让开发者创建自己的事件定义和触发点的钩子，使代码与现有功能一致。第13章将介绍如何实现一个新的事件，用来更容易地与鼠标交互。验证规则
Jörn Zaefferer开发的验证插件被广泛地用来在客户端验证提交到服务器之前的用户输入。尽管这个插件不属于jQuery内核功能，但它也提供了一些可以用来创建自定义验证规则，并将其应用在现有流程里的扩展点。第 14 章将介绍如何创建自己的验证规则以及把它们与内置的行为进行集成。1.3 扩展的示例
网上有数以百计的jQuery插件可以用来提高网站的用户体验。这个数字证明了jQuery自身的强大和易用性，以及开发者的深谋远虑——提供了允许增强功能的扩展点。本书不能覆盖到所有的这些插件，但是接下来几小节会用一些简单的例子来说明扩展的可能性。1.3.1 jQuery UI
jQuery UI（http://jqueryui.com/）项目是一组构建在jQuery核心库上的插件，它由若干小部件组成，包括Tabs（选项卡）、DatePicker（日期选择器）和Dialog（对话框），如图1.1所示，还包括一些UI行为，比如Draggable（拖）和Droppable（放）。此外，它还提供了一些动画效果用来显现和隐藏元素，或者把开发者的注意力吸引到元素上。图1.1 jQuery UI小部件和样式的例子
jQuery UI用它自己的小部件框架为它的UI组件提供了一致性。这个框架管理小部件的创建和销毁、状态维护以及鼠标交互的处理。第8章和第9章将对这个小部件框架进行检验，并介绍如何基于它创建自己的小部件。
这个项目把它的组件和行为与ThemeRoller（http://jqueryui.com/themeroller/）这个工具进行整合，使用它可以很容易地生成一个一致的主题，用来定义所有小部件的外观。
jQuery UI有大量的示例与全面的文档，让开发者能发挥它的能力。通过它的模块化设计，开发者可以只下载需要的部分。或者开发者可以从CDN上下载整个包以及标准的主题。1.3.2 验证⑧
前面提到过，Jörn Zaefferer的验证插件被广泛地应用于客户端验证（见图1.2）。它简化了为元素分配验证规则的过程，以及它们的状态和关联错误信息的管理。它的目标是不引人注目——仅在表单提交或者字段变化时产生错误信息。图1.2 运行中的验证插件，在出错的字段旁边显示错误信息（斜体）
规则可以被作为属性指定在每一个字段上，也可以在代码中通过元素名指定，或者可以在jQuery选择后使用链式函数指定。有许多可用的内置验证规则，包括required、digits、date、email和url。有些验证规则可以接受额外的参数来改变自己的行为，比如minlength和maxlength。还可以创建依赖于网页上其他元素的状态的规则。
验证插件提供了自己的扩展点，允许开发者创建自定义验证规则，然后可以使用与内置规则同样的方式把它们应用在特定的元素上。第14章将介绍如何创建自定义规则。
每一条规则都有一个关联的错误信息用来显示给用户。这些信息可以被单独重写，也可以被翻译为包内提供的超过 30 种语言中的一种。开发者可以在初始化参数中控制错误信息的位置和分组。
这个插件有大量的文档和示例来帮助开发者使用它。总之，它是一个代码和文档质量都很高的插件，并且非常有用。1.3.3 图形幻灯片
插件可以以更加不同和更具吸引力的方式展现内容，以提升网页效果。例如，Nivo Slider插件（http://nivo.dev7studios.com/）可以把一个图片列表转换为一个画面之间有各种转换效果的幻灯片。
把Nivo Slider应用在程序清单 1.3中的HTML上，就能得到图 1.3所示的一吸引眼球的效果。尽管这只是最简单的默认效果，但是看起来也很不错了。正如所预期的，开发者会发现这个插件有很多可以用来控制显示效果和行为的参数。图1.3 运行中的Nivo Slider
程序清单1.3 图形幻灯片的标签1.3.4 集成谷歌地图
有些插件封装了现有的API，以达到简化使用或者屏蔽跨浏览器差异的目的。gMap（http:// gmap. nurtext.de/）插件就是其中之一，使用它可以把谷歌地图（Google Map）集成在开发者的网页中。虽然开发者也可以使用谷歌地图自己的JavaScript API，但是这样的插件封装了原生API，并提供了更简单的接口。
使用程序清单 1.4 就能得到图 1.4 所示的地图，这也说明了这个插件的易用性。
程序清单1.4 添加一个Google 地图图1.4 使用gMap插件集成谷歌地图1.3.5 Cookies
jQuery Cookie插件（https://github.com/carhartl/jquery-cookie）简化了页面上Cookie的交互。这个插件与前面介绍的有些区别，它不操作网页上的某个元素，而是提供了一个工具函数来让开发者操作整个页面的cookie。
创建一个cookie只需要提供它的名字和值，就这么简单：
开发者可以提供额外的参数来定制cookie——设置它的过期时间（cookie默认随着当前会话的结束而过期）、域名和路径、是否需要安全传输cookie，以及cookie内容是否需要加密。
取回cookie时，只需要知道它的名字。如果查询的名字没有cookie，则返回null。
把一个cookie的值设为null就是删除它。
第6章将详细介绍Cookie插件。1.3.6 颜色动画
原生的jQuery动画功能可以对元素上的数值属性进行操作。如果要在其他类型的属性上支持动画，则需要特殊处理。jQuery UI（http://jqueryui.com）的Effects模块支持颜色动画（http://jqueryui.com/animate/），它可以设置十六进制值（#DDFFE8或#DFE）、RGB组合［rgb（221, 255, 232）或rgb（86%, 100%, 91%）］，或者色彩名（lime）。
把各种颜色格式转换为统一格式后，每个颜色分量（红/绿/蓝）分别被执行动画，从开始值变化到结束值。通过把这些功能以一个动画插件的形式提供出来，开发者就可以像使用jQuery的标准功能一样来使用它：
第11章将讲解动画插件。开发者需要知道
jQuery是网络上使用最广泛的JavaScript库。
jQuery提供了基础和通用的功能，但是可以通过多种方式扩展它。
围绕jQuery的第三方插件社区非常繁荣。1.4 总结
如今，jQuery已经成长为网络上使用最广泛的JavaScript库。虽然它提供了许多内置功能，但不可能为每个人的需求都提供支持，所以它专注于提供基础架构和一些非常通用的功能，并且提供了许多扩展点以允许扩展它的行为。
开发者几乎可以在jQuery的任何部分添加功能，从自定义选择器，到为非数值属性创建动画，创建新的事件，再到创建完整的UI组件。唯一的限制就是开发者的想象力。
插件可以使开发者更加统一地在多个页面间进行重用代码。它降低了测试和维护的代价，因为只有一份代码需要维护。
下一章中，在更深入地挖掘设计更复杂插件的最佳实践之前，读者将会通过创建一个简单的插件看到扩展jQuery是多么容易。
① John Resig，“BarCampNYC Wrap-up”， http://ejohn.org/blog/barcampnyc-wrap-up。
② John Resig，“Selectors in Javascript”， http://ejohn.org/blog/selectors-in-javascript。
③ John Resig的评论，“BarCampNYC Wrap-up”， http://ejohn.org/blog/barcampnyc-wrap-up/。
④ 谷歌开发者，“Google Hosted Libraries—Developer’s Guide”，https:// developers.google.com/ speed/libraries/devguide#jquery。
⑤ ASP.NET，“Microsoft Ajax Content Delivery Network”，http:// www.asp.net/ ajaxlibrary/ cdn.ashx。
⑥ BuiltWith，“jQuery Usage Statistics”， http:// trends.builtwith.com/ javascript/jQuery。
⑦ W3Techs，“Usage of JavaScript libraries for websites”， http:// w3techs.com/ technologies/ overview/ javascript_library/all。
⑧ JQuery Validation Plugin，http://jqueryvalidation.org/。第2章第一个插件
本章涵盖以下内容：● jQuery的架构；● 创建一个简单的集合插件。
jQuery是一个可以使得与网页上元素交互更容易的JavaScript库。它通常被用于通过直接选择或者遍历DOM来查找元素，然后在这些元素上应用一些功能。开发者可以添加或删除这些元素，或者改变它们的属性，还可以为它们添加事件处理器用来响应用户的动作。开发者也可以随着时间推移改变元素的属性来产生动画。jQuery也提供了Ajax让开发者容易地从服务器上获取数据，并且不阻塞当前页面及其内容。
上一章中提到过jQuery不是万能的，所以它提供了许多扩展点或集成点，从而培育了一个欣欣向荣的第三方插件社区。
本章着眼于jQuery的架构，它允许插件与内置的代码一起工作。然后通过介绍一个简单的集合插件（可以操作一组元素）来说明可以做些什么。以后章节将详细介绍每一个扩展点，以及如何使用它们来提升jQuery的能力，并且提出了一套插件开发的指导原则和最佳实践。2.1 jQuery的架构
jQuery的源代码由许多文件组成，这是为了开发阶段的需要。在构建阶段，它们将会被合并为单个JavaScript文件（供产品使用的最小化版本，或者方便调试的完整版本）。每一个源代码文件专注于jQuery的一个特定功能，其中许多提供了扩展点，可以用来增强内置功能。
一个扩展点是指一个可以用来注册特定类型（如集合函数或者 Ajax 增强）新功能的jQuery属性或者函数，这些新功能被视为和相应的内置功能完全一样。当框架处理到开发者的插件的引用时，就会调用相应的插件代码。
图2.1反映了组成jQuery的模块或文件，以及它们之间的依赖。图2.1 jQuery的模块、依赖关系和扩展点
jQuery的主要可扩展模块（图2.1中的阴影部分）包括：提供了选择DOM元素功能的Sizzle库；包括jQuery函数本身的core模块、处理Ajax的ajax模块、处理事件的event模块，以及提供动画功能的effects模块。2.1.1 jQuery的扩展点
表2.1列出了jQuery和jQuery UI所提供的扩展点，接下来的几小节中会介绍它们。回想一下，$是函数jQuery的一个别名（除非通过调用noConflict释放$）。表2.1 jQuery的扩展点扩 展 点目 的示 例参 见$.trim$工具函数第6章$.parseXML$.第12$.ajaxPrefilterAjax预过滤器ajaxPrefilter('script',...章)$.ajaxSetup({converterAjax 数据类型第12$.ajaxSetups:转换器章{'text xml',$.parseXML}})$.第12$.ajaxTransportajaxTransport('script',Ajax传输机制章...)$.easing.swing第10$.easing缓动动画$.easing.章easeOutBouncejQuery UI 视觉$.effects.clip第10$.effects效果（jQueryUI $.effects.highlight章1.8-）$.effects.effect.clip jQuery UI 视觉第10$.effects.effect.$.effects.effect效果（jQueryUI 章highlight1.9+）$.event.special.mouseenter 第13$.event.special自定义事件章$.event.special.submit$.expr.filters 选择器$.expr.filters.hidden $.expr[':'] $.expr.第3章（jQuery 1.7-）$.expr.setFilters.oddsetFilters$.expr.pseudos $.expr.pseudos.选择器$.expr[':'] $.expr.enabled $.expr.第3章（jQuery 1.8-）setFilterssetFilters.first$.fn.show$.fn集合插件第5章$.fn.append属性动画第11$.fx.step$.fx.step.opacity（jQuery 1.7-）章$.Tween.属性动画$.Tween.propHooks第11propHooks.scrollTop（jQuery 1.8-）章$.validator.add $.validator.第14Method验证插件规则章addMethod('USPhone', ..., ...)第8$.widgetjQuery UI小部件$.widget('ui.tabs', ...)章、第9章2.1.2 选择器
jQuery将Sizzle选择引擎作为它自己代码的一部分。这个独立的库用来执行选择处理，让开发者在网页上定位到自己需要的元素。在可能的情况下，它会把操作代理到浏览器提供的本地函数上以提高性能，其余部分直接由JavaScript实现。例如，开发者想在ID为preferences的元素中，找到所有跟在input字段（也可能是checkbox的标签）后的label元素，就可以使用如下代码：
Sizzle允许开发者通过节点名、类名、子节点或属性值来选择元素。开发者也可以使用各种伪类选择器，包括层叠样式表（CSS）规范定义的和 Sizzle 自己添加的，例如：checked，：even和：not。通过把多个选择器组合在一个选择字符串中，开发者可以找到想要的元素。伪类选择器
CSS规范：“伪类基于特征对元素进行分类，而不是基于它们的名字、属性或者内容；原则上，特征是不可以从文档树上推导得到的。”这些选择器都通过一个冒号（：）后面跟着位置条件（如：nth-child(n)）、内容条件（：empty）和否定条件（：not(selector)）进行区分。
开发者可以通过扩展$.expr.pseudos（jQuery 1.8之前的版本中是$.expr.filters）添加自己的伪类选择器，并在选择过程中使用。最后要说的是，一个选择器只不过是一个函数，它接收一个元素作为参数，如果这个元素被接受，则返回true，被拒绝，则返回false。
通过扩展$.expr.setFilters，开发者可以在当前的一组匹配元素中，通过位置进行过滤元素。开发者需要提供一个函数，它返回匹配到的元素集合（jQuery 1.8之后版本）或返回一个布尔标志来标识是否包含（jQuery 1.7及之前版本）。
关于如何为jQuery/Sizzle添加自定义选择器和过滤器的详细内容，请参见第3章。2.1.3 集合插件
集合插件是最为常用的jQuery扩展，被用来操作使用选择器或者遍历DOM得到的一组元素。
这些插件必须扩展$.fn，用一个函数来实现自己的功能。这样，它们就能被整合到jQuery内置的处理流程中。如果读者看一下源码，会发现$.fn只是$prototype的别名。这就意味着，任何加入$.fn的函数对所有jQuery集合对象都是可用的，例如使用选择器或者DOM元素调用jQuery得到的结果。这样，这些函数就能在恰当的上下文中在这些集合上调用。
所有集合插件都应该返回当前元素集合，或者当它提供了某种形式的遍历功能时，也可以返回一个新集合。这样，它们就能与其他jQuery函数一起链式调用——jQuery操作的一个核心范式。
第4章将介绍一系列包括最佳实践的原则。第5章则介绍一个实
试读结束[说明：试读内容隐藏了图片]