《jQuery基础教程（第3版）》试读：第一章：jQuery入门

今天的万维网是一个动态的环境，Web用户对网站的设计和功能都提出了高要求。为了构建有吸引力的交互式网站，开发者们借助于像jQuery这样的JavaScript库，实现了常见任务的自动化和复杂任务的简单化。jQuery库广受欢迎的一个原因，就是它对种类繁多的开发任务都能游刃有余地提供帮助。 由于jQuery的功能如此丰富多样，找到合适的切入点似乎都成了一项挑战。不过，这个库的设计秉承了一致性与对称性原则，它的大部分概念都是从HTML和CSS（Cascading Style Sheet，层叠样式表）的结构中借用而来的。这个库的设计让很多编程经验并不丰富的设计人员能够很快就掌握它，因为这些人对HTML和CSS要比对JavaScript更熟悉。实际上，在本书开篇第1章中，只需3行代码就能编写一个有用的jQuery程序。另外，经验丰富的程序设计人员也会受益于这种概念上的一致性，通过学习后面的更高级内容，你会感受到这一点。 下面先看一看jQuery能为我们做什么。 1.1　jQuery能做什么 jQuery库为Web脚本编程提供了通用的抽象层，使得它几乎适用于任何脚本编程的情形。由于它容易扩展而且不断有新插件面世增强它的功能，所以一本书根本无法涵盖它所有可能的用途和功能。抛开这些不谈，仅就其核心特性而言，jQuery能够满足下列需求。 取得文档中的元素。如果不使用JavaScript库，遍历DOM（Document Object Model，文档对象模型）树，以及查找HTML文档结构中某个特殊的部分，必须编写很多行代码。jQuery为准确地获取需要检查或操纵的文档元素，提供了可靠而富有效率的选择符机制。 修改页面的外观。CSS虽然为影响文档呈现的方式提供了一种强大的手段，但当所有浏览器不完全支持相同的标准时，单纯使用CSS就会显得力不从心。jQuery可以弥补这一不足，它提供了跨浏览器的标准解决方案。而且，即使在页面已经呈现之后，jQuery仍然能够改变文档中某个部分的类或者个别的样式属性。 改变文档的内容。jQuery能够影响的范围并不局限于简单的外观变化，使用少量的代码，jQuery就能改变文档的内容。可以改变文本、插入或翻转图像、列表重新排序，甚至对HTML文档的整个结构都能重写和扩充——所有这些只需一个简单易用的API。 响应用户的交互操作。即使是最强大和最精心设计的行为，如果我们无法控制它何时发生，那它也毫无用处。jQuery提供了截获形形色色的页面事件（比如用户单击某个链接）的适当方式，而不需要使用事件处理程序拆散HTML代码。此外，它的事件处理API也消除了经常困扰Web开发人员浏览器的不一致性。 为页面添加动态效果。为了实现某种交互式行为，设计者也必须向用户提供视觉上的反馈。jQuery中内置的一批淡入、擦除之类的效果，以及制作新效果的工具包，为此提供了便利。 无需刷新页面从服务器获取信息。这种编程模式就是众所周知的AJAX（Asynchronous JavaScript and XML，异步JavaScript和XML），它是一系列在客户端和服务器之间传输数据的强大技术。jQuery通过消除这一过程中的浏览器特定的复杂性，使开发人员得以专注于服务器端的功能设计，从而得以创建出反应灵敏、功能丰富的网站。 简化常见的JavaScript任务。除了这些完全针对文档的特性之外，jQuery也改进了对基本的JavaScript数据结构（例如迭代和数组操作等）。 下载示例代码 可以从http://www.PacktPub.com下载所有Packt图书的示例代码。如果你是在别处购买的这本书，可以访问http://www.PacktPub.com/support并注册，示例代码文件可以通过邮件直接发送给你。 1.2　jQuery为什么如此出色 随着近年来人们对动态HTML兴趣的复苏，催生了一大批JavaScript框架。有的特别专注于上述任务中的一项或两项，有的则试图以预打包的形式囊括各种可能的行为和动态效果。为了在维持上述各种特性的同时仍然保持紧凑的代码，jQuery采用了如下策略。 利用CSS的优势。通过将查找页面元素的机制构建于CSS选择符之上，jQuery继承了简明清晰地表达文档结构的方式。由于进行专业Web开发的一个必要条件是掌握CSS语法，因而jQuery成为希望向页面中添加行为的设计者们的切入点。 支持扩展。为了避免特性蠕变（feature creep） ，jQuery将特殊情况下使用的工具归入插件当中。创建新插件的方法很简单，而且拥有完备的文档说明，这促进了大量有创意且有实用价值的模块的开发。甚至在下载的基本jQuery库文件当中，多数特性在内部都是通过插件架构实现的。而且，如有必要，可以移除这些内部插件，从而生成更小的库文件。 抽象浏览器不一致性。Web开发领域中一个令人遗憾的事实是，每种浏览器对颁布的标准都有自己的一套不太一致的实现方案。任何Web应用程序中都会包含一个用于处理这些平台间特性差异的重要组成部分。虽然不断发展的浏览器前景，使得为某些高级特性提供浏览器中立的完美的基础代码（code base）变得不大可能，但jQuery添加一个抽象层来标准化常见的任务，从而有效地减少了代码量，同时，也极大地简化了这些任务。 总是面向集合。当我们指示jQuery“找到带有collapsible类的全部元素，然后隐藏它们”时，不需要循环遍历每一个返回的元素。相反，.hide()之类的方法被设计成自动操作对象集合，而不是单独的对象。利用这种称作隐式迭代（implicit iteration）的技术，就可以抛弃那些臃肿的循环结构，从而大幅地减少代码量。 将多重操作集于一行。为了避免过度使用临时变量或不必要的代码重复，jQuery在其多数方法中采用了一种称作连缀（chaining） 的编程模式。这种模式意味着基于一个对象进行的多数操作的结果，都会返回这个对象自身，以便为该对象应用下一次操作。 这些策略不仅确保了jQuery包的小型化——压缩文件约30 KB，也为我们使用这个库创建简洁的自定义代码提供了技术保障。 jQuery库的适用性一方面要归因于其设计理念，另一方面则得益于围绕这个开源项目涌现出的活跃社区的促进作用。jQuery用户聚集到一起，不仅会讨论插件的开发，也会讨论如何增强核心库。用户和开发人员也对jQuery的官方文档给予了持续的帮助，该文档的地址为http://api.jquery.com。 除了为Web开发人员提供灵活且健壮的系统之外，jQuery的最终产品对所有人都是免费的。而且，这个开源项目还具有MIT License（便于在任何站点和专有的软件中自由使用jQuery）和GNU Public License（适合包含在很多其他开源项目中）的双重许可。 1.3　第一个jQuery驱动的页面 了解jQuery能够提供的丰富特性之后，我们可以来看一看这个库的实际应用了。为此，我们需要下载一个jQuery的副本。 1.3.1　下载jQuery jQuery不需要安装，要使用它只需该文件的一个副本，该副本可以放在外部站点上，也可以放在自己的服务器上。由于JavaScript是一种解释型语言，所以不必担心编译和构建。什么时候需要使用jQuery，只要在HTML文档中使用<script>元素把它导入进来即可。 jQuery官方网站（http://jquery.com/）始终都包含该库最新的稳定版本，通过官网的首页就可以下载。官方网站在任何时候都会提供几种不同版本的jQuery库，但其中最适合我们的是该库最新的未压缩版。而在正式发布的页面中，则可以使用压缩版。 随着jQuery的日益流行，很多公司都通过自己的CDN（Content Delivery Networks，内容分发网络）来托管其库文件，让开发人员能更方便地使用它。最典型的就是谷歌（http://code.google.com/ intl/zh-CN/apis/libraries/devguide.html）和微软（http://www.asp.net/ajaxlibrary/cdn.ashx），它们把jQuery库文件放在了自己强劲、低延时的服务器上，这些服务器遍布全球各地，无论用户在哪个国家，都能以最快速度下载到jQuery。虽然托管在CDN上的文件由于分布式和缓存的原因有速度优势，但在实际开发中还是使用本地副本更方便一些。本书中的所有示例都将使用一个保存在本地的jQuery库文件，这样即使不上网也可以运行代码。 1.3.2　在HTML文档中引入jQuery 本书多数jQuery应用示例都包含以下三部分：HTML文档，为该文档添加样式的CSS文件，以及为该文档添加行为的JavaScript文件。在本书的第一个例子中，我们使用一个包含图书内容提要的页面，同时，该页面中的很多部分都添加了相应的类。这个页面中包含对最新版jQuery库的引用，我们将这个文件下载之后将它重命名为jquery.js，并放在本地项目文件夹下。示例的HTML文档如下。 文件路径 相关文件在服务器上的实际位置并不重要。读者可以根据自己喜爱的目录组织方式，调整一个文件中指向另一个文件的引用。在本书多数例子中，我们都将使用相对路径引用文件（../images/foo.png），不使用绝对路径（/images/ foo.png）。这样，我们不需要使用Web服务器就能在本地运行代码。 文档中，紧随常规的HTML开头代码之后的是加载样式表文件的代码。在这个例子中，我们使用的样式表如下所示。 在引用样式表文件的代码之后，是包含JavaScript文件的代码。这里要注意的是，引用jQuery库文件的<script>标签，必须放在引用自定义脚本文件的<script>标签之前。否则，在我们编写的代码中将引用不到jQuery框架。 在本书的其他示例中，我们将只印出HTML和CSS文件的相关部分。书中提到文件的完整版可以在本书配套网站http://book.learningjquery.com中找到。 现在，这个示例页面的外观如图1-1所示。 接下来，我们就使用jQuery为页面中的诗歌文本添加一种新样式。 这个例子是为了展示jQuery的简单用法而设计的。在实际应用中，为页面中的文本添加样式可以通过纯CSS的方式来实现。 图　1-1 1.3.3　编写jQuery代码 我们自定义的代码应该放在HTML文档中第二个、使用<script src="01.js" </script>标签引入的空JavaScript文件中。对这个例子而言，我们只需编写3行代码： 1. 查找诗歌文本 jQuery中基本的操作就是选择文档中的某一部分，这是通过$()函数来完成的。通常，该函数需要一个字符串参数，参数中可以包含任何CSS选择符表达式。在这个例子中，我们想要找到带有poem-stanza类的所有<div>元素，因此选择符非常简单。不过，在本书其他章中，我们还会介绍很多更复杂的选择符表达式。在第2章中，我们要讨论的就是查找文档部分的不同方式。 这里用到的$()函数会返回一个新的jQuery对象实例，它是我们从现在开始就要打交道的基本的构建块。jQuery对象中会封装零个或多个DOM元素，并允许我们以多种不同的方式与这些DOM元素进行交互。在这个例子中，我们希望修改页面中这些部分的外观，而为了完成这个任务，就需要改变应用到诗歌文本的类。 2. 加入新类 本例中，.addClass()方法的作用是不言而喻的，它会将一个CSS类应用到我们选择的页面元素。这个方法唯一的参数就是要添加的类名。.addClass()方法及其反方法.removeClass()，为我们探索jQuery支持的各种选择符表达式提供了便利。现在，这个例子只是简单地添加了highlight类，而我们的样式表中为这个类定义的是带边框和灰色背景的斜体文本样式。 我们注意到，无需迭代操作就能为所有诗歌中的节 添加这个类。前面我们提到过，jQuery在.addClass()等方法中使用了隐式迭代机制，因此一次函数调用就可以完成对所有选择的文档部分的修改。 3. 执行代码 综合起来，$()和.addClass()对我们修改诗歌中文本的外观已经够用了。但是，如果将这行代码单独插入文档的头部，不会有任何效果。通常，JavaScript代码在浏览器初次遇到它们时就会执行，而在浏览器处理头部时，HTML还不会呈现样式。因此，我们需要将代码延迟到DOM可用时再执行。 通过使用$(document).ready()方法，jQuery支持我们预定在DOM加载完毕后调用某个函数，而不必等待页面中的图像加载。尽管不使用jQuery，也可以做到这种预定，但$(document). ready()为我们提供了很好的跨浏览器解决方案，比如： 尽可能使用浏览器原生的DOM就绪实现，并以window.onload事件处理程序作为 后备； 可以多次调用$(document).ready()并按照调用它们的顺序执行； 即便是在浏览器事件发生之后通过$(document).ready()添加函数，这些函数也会被调用； 异步处理事件的预定，必要时脚本可以延迟执行； 通过重复检查一个几乎与DOM同时可用的方法，在较早版本的浏览器中模拟DOM就绪事件。 .ready()方法的参数可以是一个已经定义好的函数的引用，如下面的代码清单1-1所示： 代码清单1-1 然而，正如原始的脚本中所示——代码清单1-2就摘自那里，这个方法也可以接收一个匿名函数（有时候也叫做lambda函数）： 代码清单1-2 这种匿名函数的写作在jQuery中十分方便，特别适合传递那些不会被重用的函数。而且，与此同时创建的闭包也是一种非常高级和强大的工具。但是，假如处理不当的话，闭包也会给我们带来意想不到的后果以及内存占用问题。附录A详细介绍了闭包。 1.3.4　最终结果 在编写好JavaScript代码之后，现在的页面外观会变成如图1-2所示。 图　1-2 由于JavaScript插入了highlight类，页面中的两节诗歌文本变成了斜体，带有了灰色背景，并且被包含在方框中；这些样式来源于01.css样式表。 1.4　纯JavaScript与jQuery 即便是像刚才那么简单的任务，如果不用jQuery而是我们自己手工写代码也会非常麻烦。若用纯JavaScript的话，可以通过下面的代码清单1-3达到同样的目的。 代码清单1-3 且不论这段代码有多长，就算这样它还是不能像代码清单1-2中的jQuery代码一样处理多种可能的情况，比如它并不能： 正确地处理其他window.onload事件处理程序； 在DOM就绪后马上执行； 利用较新的DOM方法来检索元素和执行其他任务，从而优化代码性能。 两相比较就会发现，jQuery代码不仅写起来省事，读起来简单，而且也比纯JavaScript代码的执行速度更快。 1.5　开发工具 通过上面代码的比较，我们知道jQuery代码与对应的纯JavaScript代码相比更短也更清楚。可是，这并不意味着我们写出的代码永远不会有bug，或者永远都能直观地理解页面中都发生了什么。如果能有一些标准的开发工具辅助，编写起jQuery代码来就会更轻松流畅。 现代浏览器中一般都内置了高质量的开发工具。我们可以从中选择自己觉得最方便的工具。下面列出了一些推荐工具。 Internet Explorer Developer Tools： http://msdn.microsoft.com/en-us/library/dd565628.aspx Safari Web Inspector： http://developer.apple.com/technologies/safari/developer-tools.html Chrome Developer Tools： http://code.google.com/chrome/devtools Firefox插件Firebug：http://getfirebug.com 上面列出来的这些工具都提供了类似的功能，比如： 探测及修改DOM； 研究CSS及页面表现之间的关系； 通过特殊的方法方便地跟踪脚本执行； 暂停脚本运行及检查变量值。 虽然这些功能在不同的工具中会有所变化，但大体上概念是相同的。本书中的某些示例需要用到这么一个工具，因此我们就以Firebug为例，不过使用其他浏览器的开发工具也没有什么问题。 Firebug Firebug最新版本的安装及使用说明可以在它的主页http://getfirebug.com/上找到。要详细介绍这个工具实在有些复杂，不过在此介绍一些与本书关系最密切的功能还是有必要的。 关于屏幕截图 Firebug是一个发展很快的项目，因此下面的屏幕截图不一定与你实际看到的完全一样。其中有些标签页和按钮是由FireQuery扩展（http://firequery.binaryage.com）添加的。 在激活Firebug时，当前页面中会出现一个提供信息的新面板。 在面板中默认的HTML标签页中，左侧显示的是当前页面的结构，右侧显示的是当前选中元素的详细信息（例如应用给它的CSS规则）。在研究网页结构，查找CSS问题的时候，这个标签页很有用，如图1-3所示。 图　1-3 Script（脚本）标签页显示的是页面中加载的所有脚本，如图1-4所示。单击行号可以设置断点。当执行到断点所在的代码行时，程序会暂停并等待用户点击按钮再恢复执行。在这个标签页的右侧，可以输入一些想要监控的变量和表达式，以便随时观察它们的值。 图　1-4 Console（控制台）标签页恐怕是学习jQuery的过程中用得最多的一个了，如图1-5所示。面板底部有一个输入字段，可以在里面输入JavaScript语句，按回车后，语句的执行结果就会显示在上方。 图　1-5 在这个例子中，执行了与代码清单1-2中相同的选择符，但并未对选中的元素执行操作。即便如此，这条简单的语句也给出了很有价值的信息。我们看到，这个选择符的执行结果是一个jQuery对象，包含页面中的两个.poem-stanza元素。随时都可以在浏览器中通过这个控制台快速地试验jQuery代码。 此外，还可以直接编写与控制台交互的代码，这就要用到console.log()方法了，参见代码清单1-4。 代码清单1-4 这里的代码表明，可以向console.log()方法中传入任何表达式。字符串、数值等简单的值会被直接打印出来，而jQuery对象等复杂的值则会以容易理解的格式展示出来，如图1-6所示。 图　1-6 这个console.log()方法（我们提到的所有开发人员工具中都有这个方法）是对JavaScript的alert()函数的绝好替代，在测试jQuery代码时也会非常有用。 1.6　小结 经过对本章的学习，我们对开发者选择使用JavaScript框架，而不是从零开始编写代码（即使是最基本的任务）的原因有了一个概念。同时，也理解了jQuery作为一个框架，都有哪些值得称道的地方以及我们选择它而不是选别的框架的理由。我们也大体上知道了jQuery能够简化哪些 任务。 在本章中，我们学习了怎样设置jQuery，以便网页中的JavaScript使用它；学习了使用$()工厂函数查找具有给定类的页面部分；学习了调用.addClass()为页面的这些部分应用额外的样式；还学习了调用$(document).ready()基于页面加载来执行这些代码。此外，也探讨了在我们编写、测试和调试jQuery代码时将会用到的开发工具。 本章中给出的示范如何使用jQuery的简单例子，在现实中并不是很有用。在下一章中，我们将在此基础上继续探索jQuery中高级的选择符使用方式，并介绍这一技术的实际应用。