作者：丁奇
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
锋利的jQuery（不提供光盘内容）试读：
第2版前言
非常高兴地告诉大家：《锋利的jQuery第2版》出版了。3年前，《锋利的jQuery》问世，它不仅增加了我学习JavaScript的信心，同时也让更多爱好JavaScript的朋友加入了Web开发的大家庭。第1版完全是个人爱好的结晶，而第2版更多的是对自己3年来技术的一个总结和升华。
首先，我要向广大读者道歉出版社一直找我出第2版，但我的时间确实安排不开，第2版的交稿时间被一推再推，心中也不禁时生愧意。
第2版不仅在内容方面进行了更新，而且还在上一版的基础上做了大量的修订和扩展。涵盖了如下几个方面。 例子全部改用最新的jQuery库。 例子使用了全新的UI，并且代码更符合语义化。 修订了上一版已发现的所有印刷错误。 增加了jQuery Mobile的章节。 增加了jQuery版本变化的章节。 增加了jQuery性能优化和技巧的章节。
相比之下，第2版的内容又扩充了不少，其中最让我高兴的就是，第2版中新增加的三个章节的内容。本书结构
第一版：jQuery介绍→选择器→DOM操作→事件和动画→Ajax应用→插件→完整DEMO。
第二版添加：jQuery Mobile→jQuery各个版本变化→jQuery性能优化和技巧。
本书循序渐进地对jQuery的各种方法和使用技巧进行介绍，读者可以系统地掌握jQuery中关于DOM操作、事件监听和动画效果、表单操作、Ajax以及插件方面的知识点，并结合每个章节后面的案例演示进行练习，达到掌握各章节知识点，更好地进行开发实践的目的。
本书共分为11章。
第1章首先介绍了JavaScript以及各种JavaScript库的作用和异同；接下来介绍了jQuery以及jQuery的优势；之后介绍了如何配置jQuery环境，编写简单的jQuery代码和优化jQuery代码的风格；最后对jQuery对象和DOM对象的相互转换，jQuery和其他库的冲突这两个常见问题进行了详细描述。此外，本章还介绍了几款jQuery的开发工具和插件。
本章是全书的基础。
第2章的重点是选择器。首先介绍了jQuery选择器以及选择器的优势；然后分门别类地对基本选择器、层次选择器、过滤选择器、表单选择器以及使用每种选择器的注意事项进行了详细的介绍；最后通过案例研究来巩固本章知识点。
本章是学习jQuery的核心基础。
第3章的重点是DOM操作。首先介绍DOM操作的分类，然后通过实例详细地介绍jQuery中的DOM操作以及利用jQuery简化DOM操作的方法，最后通过案例研究来巩固读者对DOM操作知识点的掌握。
第4章分为2个部分：第1部分介绍jQuery中的事件；第2部分介绍jQuery中的动画。在第1部分中，详细介绍了jQuery中的事件方法，例如事件绑定、合成事件、事件冒泡、事件对象的属性、移除事件、模拟事件等。在第2部分中，详细介绍了jQuery中的动画方法，例如普通动画、渐显动画、自定义动画等。在讲解动画的过程中，还介绍了制作动画过程中一些常见问题。最后通过案例研究来加强读者对事件和动画的理解。
第5章是实例演练。首先针对Web中常见的表单操作进行了讲解，包括单行文本框应用、多行文本框应用、复选框应用、下拉框应用和表单验证；然后针对常见的表格操作进行了讲解，包括表格变色、表格展开关闭和表格内容筛选；最后对常见的网页操作，包括网页字体大小、网页选项卡和网页换肤等应用进行了讲解。相信读者在本章可以找到很多与项目相关的示例和说明。
本章是对前面4章知识的一个巩固。
第6章的重点是Ajax应用。首先介绍了Ajax技术的优势和不足，以及Ajax的核心对象XMLHttpRequest;然后介绍jQuery中的Ajax解决方案，例如load()、$.get()、$.post()、$.ajax()等；这些方法和DOM操作的结合将大大简化Ajax的开发；接下来介绍了Ajax中的序列化元素和全局事件；最后通过将Ajax聊天程序作为案例进行研究以巩固读者对Ajax操作的掌握。
第7章的重点是插件。jQuery有着非常丰富而强大的插件。在这一章里，首先是对几个常见而实用的插件进行详细讲解，例如表单验证插件（Validation Plugin）、表单插件（Form Plugin）、遮罩窗口插件（SimpleModal Plugin）、Cookie插件和UI插件；然后详细介绍了如何编写jQuery插件和使用插件应注意的事项。
本章是学习jQuery的插件应用和编写的基础。
第8章将前7章讲解的知识点和效果进行整合，打造出一个非常有个性的网站，并从案例研究、网站材料、网站结构、网站样式和网站脚本等多方面指导读者参与项目建设，而不仅仅是简单地编写代码。
第9章讲解jQuery Mobile的使用。jQuery Mobile是jQuery在移动设备应用上的一个新项目。它基于jQuery框架并使用了HTML 5和CSS 3这些新的技术，除了能提供很多基础的移动页面元素开发功能外，框架自身还提供了很多可供扩展的API，以便于开发人员在移动应用上使用。在这一章里，首先对HTML 5这个新技术进行介绍，然后对jQuery Mobile进行介绍，一步步告诉大家如何使用jQuery Mobile。
第10章讲解jQuery各个版本的变化。在这里我应该感谢很多读者，正是因为你们的强烈要求，所以此部分才出现在本书第2版中。本章对每个版本jQuery功能的变化进行了详解，让大家对jQuery每个版本的变化了如指掌，相信读者对这章会非常期待并且喜欢。
第11章讲解了jQuery的性能优化和技巧。现在越来越多的网站开始使用jQuery来构建以往需要靠Flash来实现的超酷动态效果。jQuery作为一个JavaScript类库，很多人并不是很清楚如何正确使用jQuery来达到最佳的性能。本章要告诉大家在书写代码时，应该需要注意的性能问题。同时本章也列举了很多jQuery技巧，相信这些对大家在书写高性能的Web应用中会有所帮助。
本书的附录部分也是跟jQuery相关的一些重要知识点，共有7篇。
第1篇介绍了jQuery中的$(document).ready()方法。
第2篇介绍了前端开发调试工具——Firebug。
第3篇介绍了Ajax的核心对象——XMLHttpRequest。
第4篇介绍了jQuery中的$.ajax()方法。
第5篇介绍了jQuery加载并解析XML。
第6篇是第7章的插件的API。
第7篇是jQuery API速查表。读者对象
本书适合所有对jQuery技术感兴趣的Web设计者和前端开发人员阅读学习。
阅读此书需要有一定的HTML、CSS和JavaScript基础知识。本书约定
1．本书代码以灰色为背景，如下所示：
2．凡本书中有需要读者注意的知识点或其他内容时，将给出以下提示：
注意：在本书的所有章节中，如果没有特别说明，jQuery库都是默认导入的。
3．本书所有例子都是基于jQuery1.7.1版而制作。
4．如果没有特别说明，jQuery1.7.1程序库都是默认导入的。
5．如果没有特别说明，程序中的$符号都是jQuery的一个简写形式。
6．如果没有特别说明，代码默认都是在document.ready()里执行。
7．如果获取的是jQuery对象，那么我们在变量前面加上$，如：
如果获取的是DOM对象，则这么定义：
本书中的例子均会以这种形式呈现，以方便读者阅读。
8．如果没有特别说明，所有网页的头部都必须有标准的DOCTYPE声明。读者反馈＆示例下载
十分欢迎来自读者的宝贵的建议。这些建议可以是您感兴趣的内容，或者是没有介绍详细而又十分需要的知识。来自读者第一手的建议，是本书继续改进的最好动力。
本书中的示例代码可以在http://cssrain.sinaapp.com下载。疑难解答＆本书勘误
虽然我们已经尽力校核所有内容的准确性，但不可避免地还会出现一些错误，包括文字和代码错误。诚恳地希望细心的读者能向我们提交这些错误，我们将十分感谢并及时发布最新的勘误结果，这也有助于本书后续版本的改进。提交邮箱为：cssrain@gmail.com，勘误内容将在http://cssrain.sinaapp.com上发布。
总而言之，第2版新增的内容都十分精彩，对读者绝对有用。为了尽量多展示一些内容，我们省略了一些可能不太重要的代码，如果按照书籍内容写出的代码不能执行，请到我们提供的地址下载源文件。
最后，还是希望本书能给大家带来收获。
每多学一点知识，就能少写一点代码。
编 者
2012.4第1章认识jQuery
随着Web 2.0的兴起，JavaScript越来越受到重视，一系列JavaScript程序库也蓬勃发展起来。从早期的Prototype、Dojo到2006年的jQuery，再到2007年的Ext JS，互联网正在掀起一场JavaScript风暴。jQuery以其独特优雅的姿态，始终处于这场风暴的中心，受到越来越多的人的追捧。1.1 JavaScript和JavaScript库1.1.1 JavaScript简介
在正式介绍jQuery之前，有必要先了解一下JavaScript。
JavaScript是Netscape公司开发的一种脚本语言（scripting language）。JavaScript的出现使得网页和用户之间实现了一种实时的、动态的和交互的关系，使网页可以包含更多活跃的元素和更加精彩的内容。JavaScript自身存在3个弊端，即复杂的文档对象模型（DOM）、不一致的浏览器实现和便捷的开发、调试工具的缺乏。
正当JavaScript从开发者的视线中渐渐隐去时，一种新型的基于JavaScript的Web技术——Ajax（Asynchronous JavaScript And XML，异步的JavaScript和XML）诞生了。而使人们真正认识到Ajax技术的强大的导火索是Google公司推出的一系列新型Web应用，例如Gmail、Google Suggest和Google Map等。如今，浩瀚的互联网中基于JavaScript的应用越来越多，JavaScript不再是一种仅仅用于制作Web页面的简单脚本。1.1.2 JavaScript库作用及对比
为了简化JavaScript的开发，一些JavaScript程序库诞生了。JavaScript程序库封装了很多预定义的对象和实用函数，能帮助使用者轻松地建立有高难度交互的Web 2.0特性的富客户端页面，并且兼容各大浏览器。下面是目前几种流行的JavaScript程序库的介绍和对比。
Prototype（http://www.prototypejs.org/），Logo如图1-1所示。图1-1 Prototype的Logo
Prototype是最早成型的JavaScript库之一，对JavaScript的内置对象（例如String对象、Array对象等）做了大量的扩展。现在还有很多项目使用Prototype。Prototype可以看做是把很多好的、有用的JavaScript的方法组合在一起而形成的JavaScript库。使用者可以在需要的时候随时将其中的几段代码抽出来放进自己的脚本里。但是由于Prototype成型年代较早，从整体上对面向对象的编程思想把握得不是很到位，导致了其结构的松散。不过现在Prototype也在慢慢改进。
Dojo（http://dojotoolkit.org/），Logo如图1-2所示。图1-2 Dojo的Logo
Dojo的强大之处在于Dojo提供了很多其他JavaScript库所没有提供的功能。例如离线存储的API、生成图标的组件、基于SVG/VML的矢量图形库和Comet支持等。Dojo是一款非常适合企业级应用的JavaScript库，并且得到了IBM、SUN和BEA等一些大公司的支持。但是Dojo的缺点也是很明显的：学习曲线陡，文档不齐全，最严重的就是API不稳定，每次升级都可能导致已有的程序失效。但是自从Dojo的1.0.0版出现以后，情况有所好转，Dojo还是一个很有发展潜力的库。
YUI（http://developer.yahoo.com/yui/），Logo如图1-3所示。图1-3 YUI的Logo
YUI（Yahoo! UI，The Yahoo! User Interface Library），是由Yahoo公司开发的一套完备的、扩展性良好的富交互网页程序工具集。YUI封装了一系列比较丰富的功能，例如DOM操作和Ajax应用等，同时还包括了几个核心的CSS文件。该库本身文档极其完备，代码编写得也非常规范。
Ext JS（http://www.extjs.com/），Logo如图1-4所示。图1-4 Ext JS的Logo
Ext JS常简称为Ext，原本是对YUI的一个扩展，主要用于创建前端用户界面，如今已经发展到可以利用包括jQuery在内的多种JavaScript框架作为基础库，而Ext作为界面的扩展库来使用。Ext可以用来开发富有华丽外观的富客户端应用，能使B/S应用更加具有活力。但是由于Ext侧重于界面，本身比较臃肿，所以使用之前请先权衡利弊。另外，需要注意的是，Ext并非完全免费，如果用于商业用途，需要付费获得授权许可。
MooTools（http://mootools.net/），Logo如图1-5所示。图1-5 MooTools的Logo
MooTools是一套轻量、简洁、模块化和面向对象的JavaScript框架。MooTools的语法几乎跟Prototype一样，但却提供了更为强大的功能、更好的扩展性和兼容性。其模块化思想非常优秀，核心代码大小只有8KB。无论用到哪个模块都可即时导入，即使是完整版大小也不超过160KB。MooTools完全彻底的贯彻了面向对象的编程思想，语法简洁直观，文档完善，是一个非常不错的JavaScript库。
jQuery（http://jquery.com），Logo如图1-6所示。图1-6 jQuery的Logo
本书的重点jQuery同样是一个轻量级的库，拥有强大的选择器、出色的DOM操作、可靠的事件处理、完善的兼容性和链式操作等功能。这些优点吸引了一批批的JavaScript开发者去学习它、研究它。
总之，每个JavaScript库都有各自的优点和缺点，同时也有各自的支持者和反对者，目前几个最流行的JavaScript库的Google访问量趋势图，如图1-7所示。很明显，自从jQuery诞生那天起，其关注度就一直在稳步上升，jQuery已经逐渐从其他JavaScript库中脱颖而出，成为Web开发人员的最佳选择。图1-7 各种JavaScript库的Google访问量趋势图
注意：读者可以通过链接http://www.google.com/trends来查找更多相关搜索量指数。1.2 加入jQuery1.2.1 jQuery简介
jQuery是继Prototype之后又一个优秀的JavaScript库，是一个由John Resig创建于2006年1月的开源项目。现在的jQuery团队主要包括核心库、UI、插件和jQuery Mobile等开发人员以及推广和网站设计、维护人员。
jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。其独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。总之，无论是网页设计师、后台开发者、业余爱好者还是项目管理者，也无论是JavaScript初学者还是JavaScript高手，都有足够多的理由去学习jQuery。1.2.2 jQuery的优势
jQuery强调的理念是写得少，做得多（write less，do more）。jQuery独特的选择器、链式操作、事件处理机制和封装完善的Ajax都是其他JavaScript库望尘莫及的。概括起来，jQuery有以下优势。（1）轻量级。jQuery非常轻巧，采用UglifyJS（https://github.com/mishoo/UglifyJS）压缩后，大小保持在30KB左右。
注意：为了使jQuery变得轻巧，jQuery一直在寻求最好的压缩工具，所以jQuery的压缩工具也一直在变化，从最早采用Dean Edwards编写的Packer（http://dean.edwards.name/packer/），到后来使用Google推出的Closure Compiler进行压缩，最后到目前使用UglifyJS进行压缩。（2）强大的选择器。jQuery允许开发者使用从CSS 1到CSS 3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写属于自己的选择器。由于jQuery支持选择器这一特性，因此有一定CSS经验的开发人员可以很容易地切入到jQuery的学习中来。第2章将详细讲解jQuery中强大的选择器。（3）出色的DOM操作的封装。jQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序的时候能够得心应手。jQuery轻松地完成各种原本非常复杂的操作，让JavaScript新手也能写出出色的程序。第3章将重点介绍jQuery中的DOM操作。（4）可靠的事件处理机制。jQuery的事件处理机制吸收了JavaScript专家Dean Edwards编写的事件处理函数的精华，使得jQuery在处理事件绑定的时候相当可靠。在预留退路（graceful degradation）、循序渐进以及非入侵式（Unobtrusive）编程思想方面，jQuery也做得非常不错。第4章将重点介绍jQuery中的事件处理。（5）完善的Ajax。jQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。第6章将重点介绍jQuery中的Ajax处理。（6）不污染顶级变量。jQuery只建立一个名为jQuery的对象，其所有的函数方法都在这个对象之下。其别名$也可以随时交出控制权，绝对不会污染其他的对象。该特性使jQuery可以与其他JavaScript库共存，在项目中放心地引用而不需要考虑到后期可能的冲突。（7）出色的浏览器兼容性。作为一个流行的JavaScript库，浏览器的兼容性是必须具备的条件之一。jQuery能够在IE 6.0+、FF 3.6+、Safari 5.0+、Opera和Chrome等浏览器下正常运行。jQuery同时修复了一些浏览器之间的差异，使开发者不必在开展项目前建立浏览器兼容库。（8）链式操作方式。jQuery中最有特色的莫过于它的链式操作方式——即对发生在同一个jQuery对象上的一组动作，可以直接连写而无需重复获取对象。这一特点使jQuery的代码无比优雅。在第1.3.3小节中，将要讨论代码风格的问题，从最开始就培养良好的编程习惯，将受益无穷。（9）隐式迭代。当用jQuery找到带有“.myClass”类的全部元素，然后隐藏它们时，无需循环遍历每一个返回的元素。相反，jQuery里的方法都被设计成自动操作对象集合，而不是单独的对象，这使得大量的循环结构变得不再必要，从而大幅地减少了代码量。（10）行为层与结构层的分离。开发者可以使用jQuery选择器选中元素，然后直接给元素添加事件。这种将行为层与结构层完全分离的思想，可以使jQuery开发人员和HTML或其他页面开发人员各司其职，摆脱过去开发冲突或个人单干的开发模式。同时，后期维护也非常方便，不需要在HTML代码中寻找某些函数和重复修改HTML代码。（11）丰富的插件支持。jQuery的易扩展性，吸引了来自全球的开发者来编写jQuery的扩展插件。目前已经有成百上千的官方插件支持，而且还不断有新插件面世。第7章将介绍目前流行的几款插件并指导大家编写自己的插件。（12）完善的文档。jQuery的文档非常丰富，不管是英文文档，还是中文文档。我们也在长期更新着jQuery的中文文档。（13）开源。jQuery是一个开源的产品，任何人都可以自由地使用并提出改进意见。
下面就一起开始我们的jQuery之旅吧。1.3 jQuery代码的编写1.3.1 配置jQuery环境1．获取jQuery最新版本
进入jQuery的官方网站http://jquery.com/。图1-8所示的右边的GRAB THE LATEST VERSION区域，下载最新的jQuery库文件。图1-8 jQuery官方网站截图2．jQuery库类型说明
jQuery库的类型分为两种，分别是生产版（最小化和压缩版）和开发版（未压缩版），它们的区别如表1-1所示。表1-1 几种jQuery库类型对比名称大小说明约jquery.js（开完整无压缩版本，主要用于测试、学习和开发229 发版）KB约jquery.min.经过工具压缩或经过服务器开启Gzip压缩 主要应31 js（生产版）用于产品和项目KB
为统一本书的讲解，建议选择下载jQuery最新版本。3．jQuery环境配置
jQuery不需要安装，把下载的jquery.js放到网站上的一个公共的位置，想要在某个页面上使用jQuery时，只需要在相关的HTML文档中引入该库文件的位置即可。4．在页面中引入jQuery
本书将jquery.js放在目录scripts下，在所提供的jQuery例子中为了方便调试，引用时使用的是相对路径。在实际项目中，读者可以根据实际需要调整jQuery库的路径。
在编写的页面代码中
标签内引入jQuery库后，就可以使用jQuery库了，程序如下：注意：在本书的所有章节中，如果没有特别说明，jQuery库都是默认导入的。1.3.2 编写简单的jQuery代码
在开始编写第1个jQuery程序之前，首先应该明确一点，在jQuery库中，$就是jQuery的一个简写形式，例如$("#foo")和jQuery("#foo")是等价的，$.ajax和jQuery.ajax是等价的。如果没有特别说明，程序中的$符号都是jQuery的一个简写形式。
下面开始编写第1个jQuery程序。
运行结果如图1-9所示。图1-9 输出Hello World!
在上面的代码中有一个陌生的代码片段，如下：
这段代码的作用类似于传统JavaScript中的window.onload方法，不过与window.onload还是有些区别。表格1-2对它们进行了简单对比。表1-2 window.onload与$(document).ready()的对比
注意：关于$(document).ready()的详细说明可以参考附录A；关于$(document).ready()和window.onload的详细对比，可以参考第4章4.1.1小节。1.3.3 jQuery代码风格
代码风格即程序开发人员所编写源代码的书写风格。良好代码风格的特点是使代码易读。如果能统一jQuery代码编码风格，对日后代码的维护是非常有利的。1．链式操作风格
以一个实际项目中的代码为例，这是一个导航栏，HTML代码如下：
代码执行效果如图1-10所示。图1-10 导航栏初始化
项目需求是做一个导航栏，单击不同的商品名称链接，显示相应的内容，同时高亮显示当前选择的商品。
选择jQuery来实现这个导航栏效果，编写的代码片段如下：
这段代码的作用是，当鼠标单击到a元素（它是class含有level1的子元素）的时候，给其添加一个名为current的class，然后将紧邻其后面的元素显示出来，同时将它的父辈的同辈元素内部的子元素都去掉一个名为current的class，并且将紧邻它们后面的元素都隐藏。
单击导航栏，效果如图1-11和图1-12所示。图1-11 效果1
试读结束[说明：试读内容隐藏了图片]