使用 jQuery 简化 Ajax 开发

jquery是什么？

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


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

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

一些简单的代码简化

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

清单1.没有使用jquery的dom脚本

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

清单2.使用了jquery的dom脚本

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

理解这一代码的工作原理可能会有一点复杂。首先，我们使用了$()函数——jquery中功能最强大的函数。通常，我们都是使用这个函数从文档中选择元素。在本例中，一个包含有一些层叠样式表（cascadingstylesheet，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对象。例如，我们通常会像下面这样把函数分配给加载事件：

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

您可能有所体会，等待窗口加载的过程是非常缓慢而且令人痛苦的，这是因为必须等整个页面加载完所有的内容，包括页面上所有的的图片。有的时候，您希望首先完成图片加载，但是在大多数情况下，您只需加载超文本标志语言（hypertextmarkuplanguage，html）就可以了。通过在文档中创建特殊的ready事件，jquery解决了这个问题，方法如下：

这个代码围绕document元素创建了一个jquery对象，然后建立一个函数，用于在htmldom文档就绪的时候调用实例。可以根据需要任意地调用这个函数。并且能够以真正的jquery格式，使用快捷方式调用这个函数。这很简单，只需向$()函数传递一个函数就可以了：

到目前以止，我已经向大家介绍了$()函数的三种用法。第四种方法可以使用字符串来创建元素。结果会产生一个包含该元素的jquery对象。清单3显示的示例在页面中添加了一个段落。

CSS网页设计中的解决方案2007-11-20

使用 jQuery 简化 Ajax 开发2007-11-20

Dreamweaver代码片断提高开发效率2007-11-20

绿谷人家FLASH主页设计2007-11-20

Ari Hallami 网页设计2007-11-20

CNET出售图片共享网站Webshots2007-11-20