4.3.1 jQuery基础（1）

《Ajax实战:实例详解》第4章Ajax开源工具集，讨论支持Ajax的JavaScript库并进一步讲解Prototype、Dojo工具箱、jQuery和DWR库，另外特别介绍了它们给Ajax带来的变化。本小节为jQuery基础。

AD： 2013大数据全球技术峰会低价抢票中

4.3  jQuery

jQuery，自称为"新式"JavaScript库，相比我们在本章接触过的其他工具包，它的编程理念稍有不同。jQuery力图改变JavaScript的编程方式，并且jQuery的哲学确实对我们开发脚本的方式产生了巨大的冲击。

在http://jquery.com/上可以找到jQuery的下载以及文档。你可以下载未经压缩的程序库（代码可供阅读），也可以下载一个较小的经过压缩的文件（不具可读性）。

不管是哪个，在用到jQuery的页面中，都需要导入jQuery脚本文件。根据本节的目的，我们将使用没有压缩过的（可读的）版本，把它放在和示例页面相同文件夹下（以便于导入），并命名为jquery.js。

4.3.1  jQuery基础（1）

在深入研究如何用jQuery发送Ajax请求之前，让我们先来看看一些基本概念。要理解jQuery的工作方式，首先就需要掌握这些概念。

本节并非是jQuery的完整教程--这需要多得多的篇幅--但是本节应该能让你对jQuery工作方式背后的哲学有个大致概念。

1．jQuery包装器

我们看到过的其他程序库，比如Prototype，其工作方式是通过引入新的类以及扩展内建的JavaScript类来增加我们页面上脚本的功能。例如在第3章中我们可以看到Prototype是如何扩展Object、Function以及Array类的。

jQuery则采取不同的方式。

jQuery不是对类进行扩展，而是提供了一个新类，其名字就是jQuery，它作为其他对象的包装器，为那些对象提供扩展操作。包装器对象的概念对于面向对象程序的资深开发者来说并不陌生。这一模式常用于适配器，它提供了一个与对象原本接口不同的接口来操作对象。

在jQuery中，大多数操作是这样进行的：用jQuery包装器包装一组元素，然后调用包装器的方法对经过包装的元素进行操作。为了让包含jQuery包装器的表达式和语句更加紧凑，jQuery类被映射为$。不要把它和Prototype的$()混为一谈，因为它的目的完全不同。

jQuery对象可以包装许多不同的对象类型，并且包装的对象不同，它所提供的功能也各有不同。例如，我们可以包装一段HTML：

这由HTML构建了一个DOM片段，我们可以使用jQuery的方法来操作它。例如，如果我们想要把这个片段加到文档的末尾，可以这样：

Ajax开发者经常需要生成新的DOM元素，采用这样便捷简短的方式就可以实现添加元素的功能，jQuery的优点是显而易见的。

除了添加新的DOM元素外，我们还经常需要操作页面中已有的元素。jQuery包装器也可以包装已有的元素，只需传给$()一个字符串，$()包装器支持许多种方式来标识出需要包装的项目：CSS选择器、XPath表达式以及元素名。我们将在示例代码中大量使用CSS选择器。比如：

这将对文档中的所有<div>元素进行包装以便操作。另一个示例是：
这会对id为someId的DOM元素进行包装以便操作。还有第三个示例：

这将包装所有具有someClass类名的元素。

jQuery的作者非常聪明地运用了CSS选择器和XPath来标识目标元素，而不是发明某些jQuery专用语法去强迫用户接受。作为网页开发者，我们对这些机制已经相当熟悉，这让我们可以更容易接受和使用jQuery来标识所需操作的元素。

还可以包装其他项目，如元素和函数。稍后我们将看到这样的例子。

2．串连jQuery操作

jQuery还很明智地允许我们在一个单独的表达式中把许多操作串连起来。绝大多数jQuery包装器方法会返回一个jQuery包装器对象自身的引用，这样当我们需要对所包装的对象执行多个操作时，就能够在一个单独的表达式上不断追加操作。

考虑这种情况，我们想要给一个元素（它的id是something）增加一个CSS类，并且将这个元素显示出来（假设最初它是隐藏的）。我们不用这样：

而可以这样写：