本章前半部分简单介绍了 JavaScript，同时也对目前流行的几个 JavaScript 库进行了介绍和对比。然后介绍了jQuery的由来和优势，接下来编写了一个最简单的jQuery程序。在程序中，接触到了$(document).ready()，此外还约定了jQuery的代码风格和变量风格。
后半部分重点介绍了 jQuery 对象和DOM 对象的区别以及它们之间的相互转换，中间插入了一个简单的实例用来加强对jQuery对象和DOM对象的理解。然后讲解了如何解决jQuery和其他JavaScript 库冲突的问题，帮助那些项目上已经使用了其他 JavaScript 库的使用者。最后介绍了几个jQuery的自动提示代码功能的插件。
第1 章特意强调了代码风格和变量风格，jQuery 对象和DOM 对象，希望能引起初学者的注意。
Dreamweaver是建立Web站点和应用程序的专业工具。Dreamweaver将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，使得各个层次的开发人员和设计人员都能够快速创建基于标准的网站和应用程序。从对基于 CSS的设计的领先支持到手工编码功能，Dreamweaver 提供了专业人员在一个集成、高效的开发环境中所需的工具。
目前新版的Adobe Dreamweaver CS 5.5已经加入了jQuery语法自动提示功能。如果你还在使用老的版本，又想有 jQuery 语法提示功能的话，可以下载一个插件。在 http://code.google.com/p/jquery-api-zh-cn/downloads/list 网址中下载一个名为jQuery_api_for_dw4.rar或jQuery_api_for_dw3.rar的插件。
在Dreamweaver中依次选择“命令”→“扩展管理”→“安装扩展”→“jQuery_api_for_dw4.mxp”命令后，就会自动安装插件了。
如果效果如图1-18所示，即表明安装成功。
[插图]
扩展成功后，重新启动Dreamweaver，新建空白页面，引入 jQuery，然后编写jQuery 代码，会发现已经具有自动提示功能了，如图1-19所示。
[插图]
Aptana是一个功能非常强大、开源和专注于JavaScript的Ajax开发IDE。
Aptana的特性如下。
当然Aptana功能强大也是有代价的，它占用电脑内存比较多。可以在http://www.aptana.com/ 网址下载相应的软件进行安装。
要使Aptana支持jQuery自动提示代码功能，非常简单，只要下载一个jquery.ruble文件即可。可以去 https://github.com/aptana/javascript-jquery.ruble 下载，这个文件是“.sdocml”后缀，并将之放到你的项目下（当然，jQuery文件是必须引入的）。插件效果如图1-20所示。
[插图]
jQueryWTP和Spket这两款插件都可以使Eclipse支持jQuery自动提示代码功能，可以分别在http://www.langtags.com/jquerywtp/和http://spket.com/网址中下载相应的插件。截图如图1-21所示。
[插图]
Visual Studio是Microsoft公司推出的程序集成开发环境，最近一次升级（VisualStudio 2008）之后便可以使用jQuery智能提示了。首先需要下载一个补丁，地址如下：
http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736 。
补丁安装好后，下载 jquery.vsdoc.js（ http://docs.jquery.com/Downloading_jQuery ）文件，把它与jquery.js文件放在同一个文件夹下。最后在页面中用<script>标签引入jQuery脚本库，VisualStudio 2008会自动识别并找到jquery.vsdoc.js文件。这样就实现了代码智能提示功能。如图1-22所示。
[插图]
由于jQuery本身就是JavaScript，因此也可以使用任意通用文本编辑器进行开发，例如EditPlus、EmEditor和VIM等等。
合理地利用这些工具，能节约大量的脚本开发时间。
在 jQuery 库中，几乎所有的插件都被限制在它的命名空间里。通常，全局对象都被很好地存储在jQuery命名空间里，因此当把jQuery和其他JavaScript库（例如Prototype、MooTools或YUI）一起使用时，不会引起冲突。
在其他库和jQuery库都被加载完毕后，可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库。示例如下：
1 | <!--//⋯省略其他代码--> |
然后，就可以在程序里将jQuery()函数作为jQuery对象的制造工厂。
此外，还有另一种选择。如果想确保jQuery不会与其他库冲突，但又想自定义一个快捷方式，可以进行如下操作：
1 | // ⋯省略其他代码 |
可以自定义备用名称，例如jq、$J、awesomequery`等。
如果不想给jQuery自定义这些备用名称，还想使用$而不管其他库的$()方法，同时又不想与其他库相冲突，那么可以使用以下两种解决方法。
其一：
1 | //⋯省略其他代码 |
其二：
1 | //⋯省略其他代码 |
这应该是最理想的方式，因为可以通过改变最少的代码来实现全面的兼容性。
如果jQuery库在其他库之前就导入了，那么可以直接使用“jQuery”来做一些jQuery的工作。同时，可以使用$()方法作为其他库的快捷方式。这里无需调用jQuery.noConflict()函数。示例如下：
1 | <!--//⋯省略其他代码--> |
有了这些方法来解决冲突，就可以在项目中放心地引用jQuery了。
随着Web 2.0的兴起，JavaScript越来越受到重视，一系列JavaScript程序库也蓬勃发展起来。从早期的Prototype、Dojo到2006年的jQuery，再到2007年的ExtJS，互联网正在掀起一场JavaScript风暴。jQuery以其独特优雅的姿态，始终处于这场风暴的中心，受到越来越多的人的追捧。
在正式介绍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页面的简单脚本。
为了简化JavaScript的开发，一些JavaScript程序库诞生了。JavaScript程序库封装了很多预定义的对象和实用函数，能帮助使用者轻松地建立有高难度交互的Web2.0特性的富客户端页面，并且兼容各大浏览器。下面是目前几种流行的JavaScript程序库的介绍和对比。
Prototype（http://www.prototypejs.org/），Logo如图1-1所示。
Prototype是最早成型的JavaScript库之一，对JavaScript的内置对象（例如String对象、Array对象等）做了大量的扩展。现在还有很多项目使用 Prototype。Prototype 可以看做是把很多好的、有用的JavaScript的方法组合在一起而形成的JavaScript库。使用者可以在需要的时候随时将其中的几段代码抽出来放进自己的脚本里。但是由于Prototype成型年代较早，从整体上对面向对象的编程思想把握得不是很到位，导致了其结构的松散。不过现在Prototype也在慢慢改进。
Dojo（http://dojotoolkit.org/），Logo如图1-2所示。
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所示。
YUI（Yahoo!UI，The Yahoo! User Interface Library），是由Yahoo公司开发的一套完备的、扩展性良好的富交互网页程序工具集。YUI 封装了一系列比较丰富的功能，例如 DOM 操作和Ajax应用等，同时还包括了几个核心的CSS文件。该库本身文档极其完备，代码编写得也非常规范。
Ext JS（http://www.extjs.com/），Logo如图1-4所示。
Ext JS常简称为Ext，原本是对YUI的一个扩展，主要用于创建前端用户界面，如今已经发展到可以利用包括jQuery在内的多种JavaScript框架作为基础库，而Ext作为界面的扩展库来使用。Ext可以用来开发富有华丽外观的富客户端应用，能使B/S应用更加具有活力。但是由于Ext侧重于界面，本身比较臃肿，所以使用之前请先权衡利弊。另外，需要注意的是，Ext并非完全免费，如果用于商业用途，需要付费获得授权许可。
MooTools（http://mootools.net/），Logo如图1-5所示。
MooTools是一套轻量、简洁、模块化和面向对象的JavaScript框架。MooTools的语法几乎跟Prototype 一样，但却提供了更为强大的功能、更好的扩展性和兼容性。其模块化思想非常优秀，核心代码大小只有 8KB。无论用到哪个模块都可即时导入，即使是完整版大小也不超过 160KB。MooTools 完全彻底的贯彻了面向对象的编程思想，语法简洁直观，文档完善，是一个非常不错的JavaScript库。
jQuery（http://jquery.com），Logo如图1-6所示。
本书的重点 jQuery 同样是一个轻量级的库，拥有强大的选择器、出色的DOM 操作、可靠的事件处理、完善的兼容性和链式操作等功能。这些优点吸引了一批批的JavaScript开发者去学习它、研究它。
总之，每个JavaScript库都有各自的优点和缺点，同时也有各自的支持者和反对者，目前几个最流行的JavaScript库的Google访问量趋势图，如图1-7所示。很明显，自从jQuery诞生那天起，其关注度就一直在稳步上升，jQuery已经逐渐从其他JavaScript库中脱颖而出，成为Web开发人员的最佳选择。
jQuery是继Prototype之后又一个优秀的JavaScript库，是一个由John Resig创建于2006年1月的开源项目。现在的jQuery团队主要包括核心库、UI、插件和jQuery Mobile等开发人员以及推广和网站设计、维护人员。
jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作 DOM、处理事件、执行动画和开发 Ajax的操作。其独特而又优雅的代码风格改变了JavaScript 程序员的设计思路和编写程序的方式。总之，无论是网页设计师、后台开发者、业余爱好者还是项目管理者，也无论是JavaScript初学者还是JavaScript高手，都有足够多的理由去学习jQuery。
jQuery强调的理念是写得少，做得多（write less，do more）。jQuery独特的选择器、链式操作、事件处理机制和封装完善的Ajax都是其他JavaScript库望尘莫及的。概括起来，jQuery有以下优势。
（1）轻量级。jQuery 非常轻巧，采用 UglifyJS（https://github.com/mishoo/UglifyJS）压缩后，大小保持在30KB左右。
（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专家DeanEdwards编写的事件处理函数的精华，使得 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里的方法都被设计成自动操作对象集合，而不是单独的对象，这使得大量的循环结构变得不再必要，从而大幅地减少了代码量。
azzw
（10）行为层与结构层的分离。开发者可以使用jQuery选择器选中元素，然后直接给元素添加事件。这种将行为层与结构层完全分离的思想，可以使jQuery开发人员和HTML或其他页面开发人员各司其职，摆脱过去开发冲突或个人单干的开发模式。同时，后期维护也非常方便，不需要在HTML代码中寻找某些函数和重复修改HTML代码。
（11）丰富的插件支持。jQuery的易扩展性，吸引了来自全球的开发者来编写jQuery的扩展插件。目前已经有成百上千的官方插件支持，而且还不断有新插件面世。第7章将介绍目前流行的几款插件并指导大家编写自己的插件。
（12）完善的文档。jQuery的文档非常丰富，不管是英文文档，还是中文文档。我们也在长期更新着jQuery的中文文档。
（13）开源。jQuery是一个开源的产品，任何人都可以自由地使用并提出改进意见。
下面就一起开始我们的jQuery之旅吧。
进入jQuery的官方网站http://jquery.com/。图1-8所示的右边的GRAB THELATEST VERSION区域，下载最新的jQuery库文件。
jQuery库的类型分为两种，分别是生产版（最小化和压缩版）和开发版（未压缩版），它们的区别如表1-1所示。
为统一本书的讲解，建议选择下载jQuery最新版本。
jQuery不需要安装，把下载的jquery.js放到网站上的一个公共的位置，想要在某个页面上使用jQuery时，只需要在相关的HTML文档中引入该库文件的位置即可。
本书将jquery.js放在目录scripts下，在所提供的jQuery例子中为了方便调试，引用时使用的是相对路径。在实际项目中，读者可以根据实际需要调整jQuery库的路径。
在编写的页面代码中<head>标签内引入jQuery库后，就可以使用jQuery库了，程序如下：
1 |
|
在开始编写第1个jQuery程序之前，首先应该明确一点，在jQuery库中，$就是jQuery的一个简写形式，例如$("#foo")和jQuery("#foo")是等价的，$.ajax和jQuery.ajax是等价的。如果没有特别说明，程序中的$符号都是jQuery的一个简写形式。
下面开始编写第1个jQuery程序。
1 | //⋯省略其他代码 |
运行结果如图1-9所示。
在上面的代码中有一个陌生的代码片段，如下：
1 | $(document).ready(function(){ |
这段代码的作用类似于传统JavaScript中的window.onload方法，不过与window.onload还是有些区别。表格1-2对它们进行了简单对比。
代码风格即程序开发人员所编写源代码的书写风格。良好代码风格的特点是使代码易读。如果能统一jQuery代码编码风格，对日后代码的维护是非常有利的。
以一个实际项目中的代码为例，这是一个导航栏，HTML代码如下：
1 | <!--//⋯省略其他代码--> |
代码执行效果如图1-10所示。
项目需求是做一个导航栏，单击不同的商品名称链接，显示相应的内容，同时高亮显示当前选择的商品。
选择jQuery来实现这个导航栏效果，编写的代码片段如下：
1 | $(".level1 > a").click(function () { |
这段代码的作用是，当鼠标单击到a元素（它是class含有level1的子元素）的时候，给其添加一个名为current的class，然后将紧邻其后面的元素显示出来，同时将它的父辈的同辈元素内部的子元素<a>都去掉一个名为current的class，并且将紧邻它们后面的元素都隐藏。
单击导航栏，效果如图1-11和图1-12所示。
<div class="box">
<ul class="menu">
<li class="level1">
<a href="#none" class="current">衬衫</a>
<ul class="level2">
<li><a href="#none">短袖衬衫</a></li>
<li><a href="#none">长袖衬衫</a></li>
<li><a href="#none">短袖T恤</a></li>
<li><a href="#none">长袖T恤</a></li>
</ul>
</li>
<li class="level1">
<a href="#none">卫衣</a>
<ul class="level2" style="display: none;">
<li><a href="#none">开襟卫衣</a></li>
<li><a href="#none">套头卫衣</a></li>
<li><a href="#none">运动卫衣</a></li>
<li><a href="#none">童装卫衣</a></li>
</ul>
</li>
<li class="level1">
<a href="#none">裤子</a>
<ul class="level2" style="display: none;">
<li><a href="#none">短裤</a></li>
<li><a href="#none">休闲裤</a></li>
<li><a href="#none">牛仔裤</a></li>
<li><a href="#none">免烫卡其裤</a></li>
</ul>
</li>
</ul>
</div>
<div class="box">
<ul class="menu">
<li class="level1">
<a href="#none" class="">衬衫</a>
<ul class="level2" style="display: none;">
<li><a href="#none">短袖衬衫</a></li>
<li><a href="#none">长袖衬衫</a></li>
<li><a href="#none">短袖T恤</a></li>
<li><a href="#none">长袖T恤</a></li>
</ul>
</li>
<li class="level1">
<a href="#none" class="current">卫衣</a>
<ul class="level2" style="">
<li><a href="#none">开襟卫衣</a></li>
<li><a href="#none">套头卫衣</a></li>
<li><a href="#none">运动卫衣</a></li>
<li><a href="#none">童装卫衣</a></li>
</ul>
</li>
<li class="level1">
<a href="#none">裤子</a>
<ul class="level2" style="display: none;">
<li><a href="#none">短裤</a></li>
<li><a href="#none">休闲裤</a></li>
<li><a href="#none">牛仔裤</a></li>
<li><a href="#none">免烫卡其裤</a></li>
</ul>
</li>
</ul>
</div>这就是jQuery强大的链式操作，一行代码就完成了导航栏的功能。
虽然jQuery做到了行为和内容的分离，但jQuery代码本身也应该拥有良好的层次结构及规范，这样才能进一步改善代码的可读性和可维护性。因此，推荐一种带有适当的格式的代码风格。上面的代码改成如下格式：
1 | $(".level1 > a").click(function () { |
代码格式调整后，易读性好了很多。
也许读者看了上面的代码还是不明白其中的要领，这里总结3种情况。
（1）对于同一个对象不超过3个操作的，可以直接写成一行。代码如下：
1 | $("li").show().unbind("click")； |
（2）对于同一个对象的较多操作，建议每行写一个操作。代码如下：
1 | $(this).removeClass("mouseout") |
（3）对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当地缩进。例如上面提到的代码：
1 | $(this).addClass("highlight") |
jQuery 以其强大的选择器著称，有时候很复杂的问题用一行选择器就可以轻松解决。但是使用jQuery进行代码编写时应该注意一个问题，就是必要的注释。请看下面的例子，代码如下：
1 | $("#table>tbody>tr:has(td:has(:checkbox:enabled))").css("background","red")； |
这行代码即使是经验丰富的jQuery开发者也不能立刻看懂。
这行代码的作用是，在一个id为table的表格的tbody元素中，如果每行的一列中的checkbox没有被禁用，则把这一行的背景色设为红色。
jQuery的选择器很强大，能够省去使用普通的JavaScript必须编写的很多行代码。但是，在编写一个优秀的选择器的时候，千万不要忘记给这一段代码加上注释，这很重要。无论是自己日后阅读还是与他人分享、合作开发，注释都能起到良好的效果。在上段代码片段中加上注释就能提高其易读性，如下所示：
1 | //在一个id为table的表格的tbody中，如果每行的一列中的checkbox没有被禁用，则把这行的背景设为红色 |
通过类似有意义的注释，能够培养良好的编码习惯和风格，提高开发效率。
第一次学习jQuery，经常分辨不清哪些是jQuery对象、哪些是DOM对象，因此需要重点了解jQuery对象和DOM对象以及它们之间的关系。
DOM（Document Object Model，文档对象模型），每一份DOM都可以表示成一棵树。下面来构建一个非常基本的网页，网页代码如下：
1 | <!--//⋯省略其他代码--> |
初始化效果图如图1-13所示。
可以把上面的HTML结构描述为一棵DOM树，如图1-14所示。
在这棵DOM树中，<h3>、<p>、<ul>以及<ul>的3个<li>子节点都是DOM元素节点。可以通过JavaScript中的getElementsByTagName或者getElementById来获取元素节点。像这样得到的DOM元素就是DOM对象。DOM对象可以使用JavaScript中的方法，示例如下：
1 | var domObj = document.getElementById("id"); //获得DOM对象 |
jQuery对象就是通过jQuery包装DOM对象后产生的对象。
jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么就可以使用jQuery里的方法。例如：
1 | $("#foo").html(); //获取id为foo的元素内的html代码。.html()是jQuery里的方法 |
这段代码等同于：
1 | document.getElementById("foo").innerHTML; |
在jQuery对象中无法使用DOM对象的任何方法。例如$("#id").innerHTML和$("#id").checked之类的写法都是错误的，可以用$("#id").html()和$("#id").attr("checked")之类的jQuery方法来代替。同样，DOM对象也不能使用jQuery里的方法。例如document.get Element ById("id").html()也会报错，只能用document.getElementById("id").innerHTML语句。
在讨论 jQurey 对象和DOM 对象的相互转换之前，先约定好定义变量的风格。如果获取的对象是jQuery对象，那么在变量前面加上$，例如：
1 | var $variable = jQuery对象; |
如果获取的是DOM对象，则定义如下：
1 | var variable = DOM对象; |
本书中的例子均会以这种方式呈现，以方便读者阅读。
jQuery对象不能使用DOM中的方法，但如果对jQuery对象所提供的方法不熟悉，或者jQuery没有封装想要的方法，不得不使用DOM对象的时候，有以下两种处理方法。
jQuery提供了两种方法将一个jQuery对象转换成DOM对象，即[index]和get(index)。
（1）jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象。
jQuery代码如下：
1 | var $cr = $("#cr"); //jQuery对象 |
（2）另一种方法是jQuery本身提供的，通过get(index)方法得到相应的DOM对象。
jQuery代码如下：
1 | var $cr = $("#cr"); //jQuery对象 |
对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。方式为$(DOM对象)。
jQuery代码如下：
1 | var cr = document.getElementById("cr");//DOM对象 |
转换后，可以任意使用jQuery中的方法。
通过以上方法，可以任意地相互转换jQuery对象和DOM对象。
最后再次强调，DOM对象才能使用DOM中的方法，jQuery对象不可以使用DOM中的方法，但jQuery对象提供了一套更加完善的工具用于操作DOM，关于jQuery的DOM操作将在第3章进行详细讲解。
下面举个简单的例子，来加深对jQuery对象和DOM对象的理解。
有些论坛在用户注册的时候，必须先要同意论坛的规章制度，才可以进行下一步操作。如图1-15是某个论坛的注册页面，用户必须选中页面下方的“同意并接受注册协议”复选框，否则不能提交。
编写一段简单的代码来实现这个功能。新建一个空白的页面，然后添加以下HTML代码：
[插图]
HTML代码初始效果如图1-16所示。
然后编写JavaScript部分。前面讲过，没有特殊声明，jQuery库是默认导入的。
通过$("#cr")获取到复选框元素，然后通过判断复选框是否被选中，来执行下一步操作。
首先，用DOM方式来判断复选框是否被选中，代码如下：
1 | $(document).ready(function () {//等待dom元素加载完毕 |
实现上述代码后，选中“我已经阅读了上面制度”复选框，如图1-17所示。
换一种方式，使用jQuery中的方法来判断选项是否被选中，代码如下：
1 | $(document).ready(function () {//等待dom元素加载完毕 |
上面的例子简单地演示了DOM对象和jQuery对象的不同，但最终效果是一样的。
非常高兴地告诉大家：《锋利的jQuery第2版》出版了。3年前，《锋利的jQuery》问世，它不仅增加了我学习JavaScript的信心，同时也让更多爱好JavaScript的朋友加入了Web开发的大家庭。第1版完全是个人爱好的结晶，而第2版更多的是对自己3年来技术的一个总结和升华。
首先，我要向广大读者道歉出版社一直找我出第2版，但我的时间确实安排不开，第2版的交稿时间被一推再推，心中也不禁时生愧意。
第2 版不仅在内容方面进行了更新，而且还在上一版的基础上做了大量的修订和扩展。涵盖了如下几个方面。
相比之下，第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进行介绍，一步步告诉大家如何使用jQueryMobile。
第10章讲解jQuery各个版本的变化。在这里我应该感谢很多读者，正是因为你们的强烈要求，所以此部分才出现在本书第2版中。本章对每个版本jQuery功能的变化进行了详解，让大家对jQuery每个版本的变化了如指掌，相信读者对这章会非常期待并且喜欢。
第11章讲解了jQuery的性能优化和技巧。现在越来越多的网站开始使用jQuery来构建以往需要靠Flash来实现的超酷动态效果。jQuery作为一个JavaScript类库，很多人并不是很清楚如何正确使用 jQuery 来达到最佳的性能。本章要告诉大家在书写代码时，应该需要注意的性能问题。同时本章也列举了很多jQuery技巧，相信这些对大家在书写高性能的Web应用中会有所帮助。
本书的附录部分也是跟jQuery相关的一些重要知识点，共有7篇。
$(document).ready()方法。Firebug。$.ajax()方法。本书适合所有对jQuery技术感兴趣的Web设计者和前端开发人员阅读学习。
阅读此书需要有一定的HTML、CSS和JavaScript基础知识。
1.本书代码以灰色为背景，如下所示：
1 | <html> |
2.凡本书中有需要读者注意的知识点或其他内容时，将给出以下提示：
2.凡本书中有需要读者注意的知识点或其他内容时，将给出以下提示：
3.本书所有例子都是基于jQuery1.7.1版而制作。
4.如果没有特别说明，jQuery1.7.1程序库都是默认导入的。
5.如果没有特别说明，程序中的$符号都是jQuery的一个简写形式。
6.如果没有特别说明，代码默认都是在document.ready()里执行。
7.如果获取的是jQuery对象，那么我们在变量前面加上$，如：
1 | var $variable=jQuery对象; |
如果获取的是DOM对象，则这么定义：
1 | var variable = DOM对象; |
本书中的例子均会以这种形式呈现，以方便读者阅读。
8.如果没有特别说明，所有网页的头部都必须有标准的DOCTYPE声明。
读者反馈&示例下载
十分欢迎来自读者的宝贵的建议。这些建议可以是您感兴趣的内容，或者是没有介绍详细而又十分需要的知识。来自读者第一手的建议，是本书继续改进的最好动力。
本书中的示例代码可以在 http://cssrain.sinaapp.com 下载。
疑难解答&本书勘误
虽然我们已经尽力校核所有内容的准确性，但不可避免地还会出现一些错误，包括文字和代码错误。诚恳地希望细心的读者能向我们提交这些错误，我们将十分感谢并及时发布最新的勘误结果，这也有助于本书后续版本的改进。提交邮箱为：cssrain@gmail.com，勘误内容将在 http://cssrain.sinaapp.com 上发布。
总而言之，第2版新增的内容都十分精彩，对读者绝对有用。为了尽量多展示一些内容，我们省略了一些可能不太重要的代码，如果按照书籍内容写出的代码不能执行，请到我们提供的地址下载源文件。
最后，还是希望本书能给大家带来收获。
每多学一点知识，就能少写一点代码。
编者
2012.4
《锋利的jQuery(第2版)》循序渐进地对jQuery的各种函数和方法调用进行了介绍，读者可以系统地掌握jQuery的选择器、DOM操作、事件和动画、AJAX应用、插件、jQuery Mobile、jQuery各个版本变化、jQuery性能优化和技巧等知识点，并结合每个章节后面的案例演示进行练习，达到掌握核心知识点的目的。 为使读者更好地进行开发实践，《锋利的jQuery(第2版)》的第8章将前7章讲解的知识点和效果进行了整合，打造出一个非常有个性的网站，并从案例研究、网站材料、网站结构、网站样式和网站脚本等方面指导读者参与到项目建设中来。《锋利的jQuery(第2版)》适合所有对jQuery技术感兴趣的Web设计者和前端开发人员阅读和参考。
书名：锋利的jQuery(第2版)
作者：单东林,张晓菲,魏然
出版社：人民邮电出版社
出版时间：2012-06
ISBN：9787115281609
本书由人民邮电出版社授权上海阅文信息技术有限公司进行制作与发行版权所有·侵权必究
不管你采用什么方式初始化项目，都可以在命令行中使用java -jar命令来运行应用：
1 | % java -jar demo.jar |
即使不采用JAR文件而使用WAR文件来进行分发，这样做也依然是可行的：
1 | % java -jar demo.war |
我们还可以使用Spring Boot Maven或Gradle插件来运行应用。比如，项目使用Maven构建的话，可以这样运行：
1 | % mvn spring-boot:run |
使用Gradle进行构建的话，可以按照如下方式运行项目：
1 | % gradle bootRun |
不管是采用Maven还是Gradle，构建工具都会构建（还没有构建的话）并运行项目。