鉴于大家对Ajax十分关注,我们编辑小组在此为大家搜集整理了“使用jQuery简化Ajax开发”一文,供大家参考学习
学习 jQuery 基本原理,探索其特性和功能,执行一些常见的 Ajax 任务并掌握如何使用插件扩展 jQuery。
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
});
您可能有所体会,等待窗口加载的过程是非常