第 1 页
LearningJQuery
前言
LearningjQuery 的作者blog
http://learningjquery.com/
本书覆盖的内容
本书的第一部分会介绍 JQuery，帮助你理解小题大做是怎么回事。第一章包含的内容有，
下载和安装jQuery 库，也会教你写第一个脚本。
本书的第二部分会一步步带你学习 jQuery库的每一个主要的方面。第二章你会了解到怎样
得到你想要的。jQuery 中选择器表达式让你找到页面上所有的元素，你将会使用选择器表达
式来样式化页面上不同的元素，有时候可以不是纯css。
在第三章里，你会学习如何触发事件，浏览器发事件时，你将会使用 jQuery 的事件处理机
制处理行为。 你也能够在jQuery 的秘密sauce 中获得内在的消息： 在页面完成加载前不经意
地附加事件。
在第四章里，你会学习到如何添加功能到你的动作中。将会介绍 jQuery 的动画技术，如很
方便地隐藏、显示和移动页面元素。
在第五章中，你会学习到如何使用命令来改变你的页面。这章会教你如何改变在飞的 html
文档的结构。
在第六章里，你会学习到如何让你的站点时髦与兼容。阅读本章后，你也能够不用刷新页面
就可以访问服务器端的功能。
本书的第三部分会采用不同的方法，在这里你会通过几个实例来学习，汇集你上一章学过的
知识，建立健全的jQuery 程序解决常见的问题。
在第八章中，你会掌握客户端验证的微妙之处，设计一个自适应的表单布局，并实现交互式
的客户端－服务器端的表单特性，例如自动完成功能。
在第九章中， 你将通过展示它们的一小部分就可以增强页面元素的美感与可用性，你会使信
息本身和用户控制来让信息飞进飞出。
在第十章中，你会学到jQuery 的可观的扩展能力，你会研究三个突出的jQuery 插件并使用
它们，然后着手从头开发你自己的插件。
附录A 提供一个些信息站点，包括广泛的主题如jQuery、javascript和web开发。
第 2 页
附录B 推荐一些有用的第三方软件， 并可在你的开发环境中编辑、 调试jQuery 代码的工具。
附录C 讨论一个javascript语言中常见的难题，你来依赖强大的闭包，而不是害怕它的副作
用。
目录
第一章 开始Jquery
今天的万维网是一个动态的环境，他们的用户为网站的风格和功能设置了一个高标准。为了
创建有趣的交互式的网站，开发者正都转向如 jQuery 这样的javascript库，使普通的任务自
动化和简化复杂的任务。jQuery 库是流行的选择的一个原因是它能够协助大范围的任务。
因为 jQuery 有很多不同的函数，它可像有挑战性的知道从哪开始。然而，这个库的设计是
一致(coherence)与对称(symmetry)的。它的概念的大部分都借鉴于 HTML 与 Cascading
StyleSheets(CSS) 的架构。 国为很多 web 开发者使用这些技术比较 javascript 有更多的经
验。库的设计让只有少量编程经验的设计师可以快速入门。事实上，在开始的这章我们会只
用三行代码写一个功能的 jQuery 程序。另一方面，有经验的程序员在概念的一致性得到帮
助，我们将会在后面的更高级的章节中看到。
但我们用一个实例来说明库的操作之前，我们应该在开始的位置讨论一下我们为什么需要
它。
jQuery 能做什么
jQuery 库为共同的 web 脚本提供了一种通用的抽象层， 并且它几乎在每种脚本环境都是有
用的。它的可扩展性意味着我们无法在一本书里涵盖所有可能的用途与功能，它以插件的形
式持续地通过开发加入新的功能。这核心的特性，虽然满足以下的需求：
获取页面的部分内容，不使用 JavaScript 库，必须写很多行代码来遍历 DOM 树，并定位
一一个HTML文档的指定部分。jQuery 提供了一个强大而有效的选择机制来返回被检查或
者被操作的文档。
修改页面的外观，CSS 提供了一个影响文档渲染的强大方法，当 web 浏览器不支持同样的
标准时，它却是不尽人意的。jQuery 能弥补这个差距，提供了跨所有浏览器的同样的标准
的支持。另外，即使页面被渲染后，jQuery 仍可改变文档一部分中的类或者独立的样式属
性。
修改页面的内容，不仅限于外观的改变，jQuery 还可以用很少的按键就可修改文档的内容
本身。文本可改变，图像可插入或替换，列表可重新排序或者整个HTML结构可被重写和扩
第 3 页
展，完成这些只需一套非常易用的 API 函数。
在页面中响应用户的交互，当它们发生时，如果我们不能控制，即使是最周密最强大的行为
也是没有用的。jQuery 库提供了一个优雅的方法来截取多种事件，例如用户单击链接，我
们不需要将事件句柄混杂到 HTML 代码中。同时，事件句柄 API 删除浏览器不一致性，
往往会让 web 开发者感到很烦恼。
给页面加上动画， 为了有效地执行交互行为， 设计师必须提供可视的反馈给用户，jQuery 库
提供了一组效果来推进它，效果如褐色，清空来，也可定制一套新的工具。
无刷新返回服务器端的信息，这个代码模式已经以 AsynchronousJavaScriptandXML
(AJAX) 著称了，并协助 web 开发者制作可响应的功能丰富的网站。
简化共同的 JavaScript 任务，除了 jQuery 指定的文档的所有特性外，这个库还提供了改
进基本的 JavaScript 结构，如秩代和数组操作。
为什么 jQuery 工作那么好
随着近期动态 HTML 兴趣的复兴，JavaScript 框架快速增加。有些很专业，侧重于一个或
者两个以上的任务。其它的则企图列出一切的行为与动画，这些服务都归结于预先包装。为
了保持其广泛的特性而不失简洁，jQuery 使用了一些策略。
CSS 的杠杆知识，以 CSS 选择器定位页面元素机制为基础，jQuery 继承了表现文档结构
的简洁(terse)而易读(legible)的方法。由于做专业的 web 开发的必备知识是 CSS 语法，
jQuery 为想在页面加上行为的设计师提供了一个入口。
支持扩展，为了避免特征变化，jQuery 提交了专项用途的插件。创建一个新的插件的方法
是很简单的和有明确记录的，并且已经带动发展了各种发明和有用的模块。甚至在基本的
jQuery 下载中的大部分特性都是通过插入式结构内部实现的，可如预期地被删除，产生一
个更小的库。
去除浏览的错误，web 开发的一个不幸的现实是每个浏览器都有一套自己的偏离发布的标
准，任何网络应用的一个重要的部分可在每个平台上处理不同的特性。但是不断变化的浏览
器现状使得一些高级特性不能可编写出完美的浏览器中立的基本代码，jQuery 加入了一个
抽象层来规范这些共同的任务，并减少代码的大小，尽量简化它。
总是以集合工作，当我们通知 jQuery，查找所有带类collapsible的元素并隐藏它，不必循环
每个返回的元素。相反，如 .hide()方法被设计工作在对象集上而不是单独元素。这种技术
被称为隐含秩代（implicititeration），意味着很多循环结构变得不必要了。
允许在一行有多个动作，为了避免过度使用临时的变量或浪费的重复，jQuery 在它的大多
数方法中使用了一个称为链式的编程模式， 这意味着在对象的很多操作的结果都这个对象的
本身，为下一个动作做准备以应用它。
第 4 页
这些战略一直保持 jQuery 包很轻巧，压缩后只有20KB左右，同时，也提供了保持使用这
个库的自定义代码的简单性的技术。
这个优雅的库部分由设计而来， 部分是由进化过程中由于项目涌现的社区的推动。jQuery 的
用户不但聚在一起讨论插件的开发，而且也改进了核心库。附录 A 详细说明了许多对
jQuery 开发者有用的社区资源。
尽管所有的努力需要设计出如此灵活和强有力的系统， 但最终的产品对所有人都是自由使用
的。 这个开源项目是在GNUPublicLicense(appropriateforinclusioninmanyotheropensource
projects)和MITLicense(tofacilitateuseofjQuerywithinproprietarysoftware)下的双重许可的。
我们的第一个 jQuery 文档
既然我们已经涵盖了对我们有用的 jQuery 的所有特性，我们就可测试如何实践这个库了。
下载jQuery
官方 jQuery 网站（http://jquery.com/）总是有最新的代码资源和与库相关的信息，为了开始
实践，我们需要一个 jQuery 的拷贝，可以从网站首页直接下载，一些 jQuery 版本可能在
任何时刻都是有用的，最适合我们的将会是最新的没有压缩的版本。不需要安装它，为了使
用 jQuery，我们只需要放它到我们网站的一个公共位置，既然 JavaScript 是一种解释型语
言，那么不用担心会有编译和创建阶段。无论何时我们需要的话，jQuery 都是有效的，我
们简单地从 HTML 文档中参考这个文件的位置就可以了。
建立html文档
很多 jQuery 用法的实例都有三块：HTML 文档本身，CSS 文件用来样式化它和 JavaScript
文件来执行它。我们的第一个实例中，我们用一本书的摘录的一个页面，页面将有很多类应
用到它不同的部分。
<?xmlversion="1.0"encoding="UTF8"?>
<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en" lang="en">
<head>
<metahttpequiv="ContentType"content="text/html;
charset=utf8"/>
<title>ThroughtheLookingGlass</title>
<linkrel="stylesheet"href="alice.css"type="text/css"
media="screen"/>
<scriptsrc="jquery.js"type="text/javascript"></script>
<scriptsrc="alice.js"type="text/javascript"></script>
</head>
<body>
<divid="container">
第 5 页
<h1>ThroughtheLookingGlass</h1>
<divclass="author">byLewisCarroll</div>
<divclass="chapter"id="chapter1">
<h2class="chaptertitle">1.LookingGlassHouse</h2>
<p>TherewasabooklyingnearAliceonthetable,andwhile
shesatwatchingtheWhiteKing(forshewasstilla
littleanxiousabouthim,andhadtheinkallreadyto
throwoverhim,incasehefaintedagain),sheturnedover
theleaves,tofindsomepartthatshecouldread,<span
class="spoken">"&mdash;forit'sallinsomelanguageI
don'tknow,"</span>shesaidtoherself.</p>
<p>Itwaslikethis.</p>
<divclass="poem">
<h3class="poemtitle">YKCOWREBBAJ</h3>
<divclass="poemstanza">
<div>sevotyhtilsehtdna,gillirbsawT'</div>
<div>;ebawehtnielbmigdnaerygdiD</div>
<div>,sevogorobehterewysmimllA</div>
<div>.ebargtuoshtaremomehtdnA</div>
</div>
</div>
<p>Shepuzzledoverthisforsometime,butat lastabright
thoughtstruckher.<spanclass="spoken">"Why,it'sa
Lookingglassbook,ofcourse!AndifIholdituptoa
glass,thewordswillallgotherightwayagain."</span></p>
<p>ThiswasthepoemthatAliceread.</p>
<divclass="poem">
<h3class="poemtitle">JABBERWOCKY</h3>
<divclass="poemstanza">
<div>'Twasbrillig,andtheslithytoves</div>
<div>Didgyreandgimbleinthewabe;</div>
<div>Allmimsyweretheborogoves,</div>
<div>Andthemomerathsoutgrabe.</div>
</div>
</div>
</div>
</div>
</body>
</html>
注意：在服务器上文件的实际的层没有问题。一个文件参考到另一个文件只需要调整匹配我们选择的
组织。本书的很多例子里，我们用相对路径来参 考 文 件 （ ../images/foo.png），不用绝对路径
（/images/foo.png）。这允许代码可本地运行，而不必在 web 服务器上。
