使用jQuery简化Ajax开发：看看Ajax和DOM脚本编程究竟有多简单

jQuery 是什么？

jQuery 由 John Resig 创建于 2006 年初，对于任何使用 JavaScript 代码的程序员来说，它是一个非常有用的 JavaScript 库。无论您是刚刚接触 JavaScript 语言，并且希望获得一个能解决文档对象模型（Document Object Model，DOM） 脚本和 Ajax 开发中一些复杂问题的库，还是作为一个厌倦了 DOM 脚本和 Ajax 开发中无聊 的重复工作的资深 JavaScript 专家，jQuery 都会是您的首选。

jQuery 能帮助您保 证代码简洁易读。您再也不必编写大堆重复的循环代码和 DOM 脚本库调用了。使用 jQuery ，您可以把握问题的要点，并使用尽可能最少的代码实现您想要的功能。

毫无疑问， jQuery 的原理是独一无二的：它的目的就是保证代码简洁并可重用。当您理解并体会这一原 理后，便可以开始学习本教程了，看看 jQuery 对我们的编程方式有多少改进吧。

一些简单的代码简化

下面是一个简单示例，它说明了 jQuery 对代码的影响。要 执行一些真正简单和常见的任务，比方说为页面的某一区域中的每个链接附加一个单击 （click）事件，您可以使用纯 JavaScript 代码和 DOM 脚本来实现，如 清单 1 所示。

清单 1. 没有使用 jQuery 的 DOM 脚本

var　external_links　=　 document.getElementById('external_links');
var　links　=　 external_links.getElementsByTagName('a');
for　(var　i=0;i　<　 links.length;i++)　{
　　var　link　=　links.item(i);
　　link.onclick 　=　function()　{
　　　　return　confirm('You　are　going　to　visit:　'　 +　this.href);
　　};
}

清单 2 显示了使用 jQuery 实现的相 同的功能。

清单 2. 使用了 jQuery 的 DOM 脚本

$('#external_links 　a').click(function()　{
　　return　confirm('You　are　going　to　visit:　 '　+　this.href);
});

是不是很神奇？ 使用 jQuery，您可以把握问 题的要点，只让代码实现您想要的功能，而省去了一些繁琐的过程。无需对元素进行循环， click() 函数将完成这些操作。同样也不需要进行多个 DOM 脚本调用。您只需要使用一个简 短的字符串对所需的元素进行定义即可。

理解这一代码的工作原理可能会有一点复杂 。首先，我们使用了 $() 函数 —— jQuery 中功能最强大的函数。通常，我们 都是使用这个函数从文档中选择元素。在本例中，一个包含有一些层叠样式表（Cascading Style Sheet，CSS）语法的字符串被传递给函数，然后 jQuery 尽可能高效地把这些元素找 出来。

如果您具备 CSS 选择器的基本知识，那么应该很熟悉这些语法。在 清单 2 中，#external_links 用于检索 id 为 external_links 的元素。a 后的空格表示 jQuery 需要检索 external_links 元素中的所有 <a> 元素。用英语说起来非常绕口，甚至在 DOM 脚本中也是这样，但是在 CSS 中这再简单不过了

$() 函数返回一个含有所有与 CSS 选择器匹配的元素的 jQuery 对象。jQuery 对象 类似于数组，但是它附带有大量特殊 的 jQuery 函数。比方说，您可以通过调用 click 函数把 click 处理函数指定给 jQuery 对象中的所有元素。

还可以向 $() 函数传递一个元素或者一个元素数组，该函数将 把这些元素封装在一个 jQuery 对象中。您可能会想要使用这个功能将 jQuery 函数用于一 些对象，比方说 window 对象。例如，我们通常会像下面这样把函数分配给加载事件：

window.onload　=　function()　{
　　//　do　this　stuff　when　 the　page　is　done　loading　
};

使用 jQuery 编写的功能相同的 代码：

$(window).load(function()　{
　　//　run　this　when　the 　whole　page　has　been　downloaded　
});