本文的写作灵 感源自读者关于先前一篇文章的电子邮件反馈；该邮件这样写道 “jQuery 在简单的页面上无可挑剔，但在复杂的页面上性能极其低下。在解决性能问题之前，您必须对复杂页面使用常规的 JavaScript。” 这立即让我想到 “jQuery 和 JavaScript 之间的性能比较会是什么样的？”事实上，我很少看到将 jQuery 库与 JavaScript 或其他 JavaScript 库进行比较的文章。我可能像大多数人一样，仅看到用 jQuery 编写客户端代码的简易，而忽略了可能的性能问题。在我看来，在易用性和性能之间进行折衷是值得的。但是，存在这样一种折衷吗？jQuery 是不是比 “一般” 的 JavaScript 慢？jQuery 是不是比其他库慢？本文将尝试解答这些问题。

度量 JavaScript 性能要考虑的最重要问题是执行 JavaScript 的环境。因为代码是运行在客户端上的，所以它的执行依赖于客户端计算机，这使得客户端机器成为影响性能的最重要因素。很明显，运行 4 核 CPU 的新服务器执行代码的速度肯定要比 400 MHz 老式处理器快。这是毫无疑问的。不过，由于您不能控制 Web 应用程序用户用于访问您的站点的机器，所以在度量性能时要考虑关于硬件的许多因素。

JavaScript 性能的另一个重要方面是用于运行 JavaScript 的浏览器，JavaScript 新手可能不容易发觉这个影响因素。每个浏览器内部都包含一个 JavaScript 引擎，即用于解析和执行 JavaScript 代码并处理 Web 应用程序页面的本机代码。因此，JavaScript 的性能严重依赖于客户端使用的浏览器，并且在某些情况下，您可以 控制用户使用的浏览器。本文提供一些关于 JavaScript 性能的指导原则，并解释不同浏览器对性能的影响。

最 后，在总结 JavaScript，尤其是 jQuery 的性能之后，我将确定一些能够改进 jQuery 代码性能的最佳实践，充分利用运行得最快的代码部分，而尽量避免运行得最慢的代码部分。在您阅读完本文之后，“jQuery 的性能好吗” 这个问题将得到解答，并且给我发送那封电子邮件的人也将知道他的断言是否正确。

创建性能测试

关 于性能测试的第一步是创建一个合适的性能测试。jQuery 以及其他 JavaScript 库在代码中扮演的最重要角色就是使用选择查找特定页面元素。我在最初的性能测试中就以这方面为重点。一个良好的性能测试应该真正地发挥 JavaScript 库的全部力量，用包含数千个页面元素的页面测试它。应该运行所有选择方法，让我看到哪个选择方法最快，哪个最慢。测试应该事先知道正确的答案，从而确定 JavaScript 库是否正确地执行选择方法。最后，应该显示所有结果，并附带所用的运行时间，让我能够在所有库之间进行比较。

我差点忽略了性能测试的最重要方面：它应该是免费的。毕竟这个系列文章的不成文规则就是相互利用彼此的成果，因此我继续发扬这种精神，在此使用一个现成的 JavaScript 库性能测试。这个测试称为 SlickSpeed Selectors Test（见 参考资料）， 它非常适合我的需求。它将 jQuery 1.2.6（撰写本文时的最新版本）与其他 4 个流行的 JavaScript 库（MooTools、Prototype、YUI 和 Dojo）进行比较。然后，它使用带有数千个页面元素的页面运行 40 个选择测试。换句话说，这是我所希望的最佳性能测试。我将在第一个性能测试分析中使用该测试。

对比 JavaScript 库的性能

对于第一个性能测试，我使用的运行环境是 2.2 GHz 处理器、2 GB RAM 和 Firefox 3.0.3（非常重要）。我在该配置下运行 5 次测试，图 1 显示了 5 次运行的平均结果。

从第一次测试能够得出什么结论？现在我们仅关注总体结果，而不是每次测试。在获得一些总体结论之后，我将稍后在本文中关注每个测试。

• 结论 1：YUI 慢到了极点！
  对，与其他库相比，YUI 真的很慢。仔细查看每个测试，找出为什么这个库在选择元素组（例如 “p, a”）时非常慢。对于要求具有很好性能的页面而言，这个库是最差的选择。
• 结论 2：Mootools、jQuery 和 Dojo 的运行时间几乎一样。
  与其他两个库相比，这 3 个库是非常快的，并且 Dojo 是它们当中最快的，而 jQuery 是最慢的。但是从全局考虑，它们之间的速度是很接近的。
• 结论 3：这些库之间的相对差别还是比较明显的。
  度量最快时间/最慢时间以确定速度的相对差别，您可以看到相对差别为 332%。这个差别是比较大的，这表明使用 Firefox 时选择不同的 JavaScript 库会对性能有影响。

但是要记住，这些结论仅基于一个浏览器的结果。这是基于 Firefox 3.0.3 得出的结论。现在我们进入下一小节，我将在不同的浏览器上运行该测试。

在不同浏览器上的 JavaScript 性能

面 对不同浏览器运行 JavaScript 会得出的不同结果（性能和时间都不同），许多初级 Web 程序员觉得不可思议。尽管这对初级 Web 程序员而言是个挫折（他们担心要编写额外的代码来处理不同的浏览器），但是有经验的 Web 程序员在 Netscape 和 Internet Explorer 的早期就知道如何处理该问题。这也是使用 JavaScript 库的一个亮点，因为它们都谨慎处理许多或大部分浏览器差异。

JavaScript 速度差异的主要原因是每个浏览器都使用自己的 JavaScript 引擎。JavaScript 引擎是用于解析 JavaScript 并根据 Web 应用程序执行它的本机代码。因此，JavaScript 的执行速度与底层引擎直接相关。在最近几个月，许多浏览器公司越来越关注他们的浏览器的性能，这是有原因的。随着某些页面的 JavaScript 变得日益复杂，JavaScript 引擎的快慢能够影响 Web 应用程序的响应速度。因此，当 Google 和 Firefox 等公司谈论它们的 JavaScript 引擎时，它们就会谈及下一代引擎的速度要快 10 倍。这对 Web 应用程序而言是很重要的，因为底层 JavaScript 引擎的速度直接导致更复杂的 Web 应用程序的出现。

现在，您知道 JavaScript 引擎是 JavaScript 执行速度的一个因素，那么让我们在不同的浏览器上运行刚才在 Firefox 上运行的测试，并尝试找出不同的引擎对 JavaScript 性能的影响。记住，这个测试与我前面在 Firefox 上运行的测试是一样的，因此除了 JavaScript 引擎以外，其他所有东西都是相同的。图 2 显示了测试结果。

看 完这些测试结果之后，您首先注意到的是在这些浏览器中运行得到的时间差很大。在 Chrome 1.0 上运行 jQuery 需要 168 毫秒，而在 IE6 上运行需要 1728 秒。这是难以置信的时间差！jQuery 选择方法在 IE6 上运行比在 Chrome 上运行慢 10 倍！现在，您知道为什么 Google 喜欢夸耀它的 JavaScript 引擎，以及为什么某些浏览器很少介绍自己的 JavaScript 引擎。这些差别还是比较大的。

您应该注意到，jQuery 在 Firefox 或一些其他浏览器上运行时速度排在第 3 位，而在另一些浏览器上排在第 1 位。事实上，这些结果表明，根据性能进行分类的话，这些库可以分为两组，而不管使用什么浏览器。Mootools、Dojo 和 jQuery 通常属于一个组别，而 Prototype 和 YUI 属于另一个组别，前一组要比后一组快得多。

性能测试结论

我觉得所有这些结论都需要专门花一个小节进行阐述，因为它们对 JavaScript 开发人员非常重要。我仍然尝试总结上面的性能结果，并且没有忘记本文是以 jQuery 为主题的。

结论 1：Mootools、jQuery 和 Dojo 在性能方面不分上下。
查看它们在所有 5 个浏览器上进行的测试，在求取平均值之后，您可以看到这 3 个库的性能几乎是一样的。（理想情况下，我们应该调查每个浏览器的市场份额。但是调整这些数字很难，因为使用 JavaScript 库的站点不一定由 “平均用户” 访问）。

结论 2：Prototype 和 YUI 的性能很慢。
看看这两个库在 5 个浏览器中的测试结果与 jQuery 的对比。在求取它们的平均值之后，您可以发现这两个库的性能差别有多大。它们在任意浏览器中平均比 jQuery 慢 300%。

结论 3：如果对性能要求比较高时，选择 Mootools、jQuery 和 Dojo 之一获得的性能几乎一样。
根据以上的平均值，选择这 3 个库之一比选择另外两个库之一能够获得更多的性能优势。从在所有浏览器上运行得出的平均值看，它们的性能是相当的。因此，当您选择 JavaScript 库时，选择这 3 个库之一是不会错的。

结论 4：如果对性能要求比较高时，不要选择 Prototype 或 YUI。
如果要求 JavaScript 库具有较高的性能，或者打算创建一个大型的 JavaScript 项目，那么就不应该选择这两个库之一。这两个库的性能要比其他库逊色得多。

结论 5：浏览器对性能的影响是 JavaScript 库的 9 倍。
我 认为这是本文所有结论中最重要的结论。您可以在特定情况下讨论哪个 JavaScript 库最快，但它最终的影响却是很小的！对于性能而言，浏览器的影响比库本身要大得多。回顾一下图 3 和图 4 的平均值，您可以看到 3 个最快的库中，最慢那个（Dojo）仅比最快那个（jQuery）慢 15%。只有 15%！然而，您看看 jQuery 在最快的浏览器（Chrome 1.0）和最慢的浏览器（IE6）上运行的速度差别，这个差别竟然达到 1000%！从这两个数字看，15% 对 1000% 而言是微不足道的。至此，关于 3 个较快的库中哪个是最快的争论可以停止了，因为它们对最终结果的影响是微乎其微的。

结论 6：如果 JavaScript 性能对 Web 应用程序很重要，并且您可以控制选择什么浏览器，那么就选择最快的浏览器！
在 某些情况下，您可以控制使用什么浏览器访问站点。如果能够控制使用什么浏览器，那么您就是很幸运的。我就碰到这样幸运的项目。在这种情况下，如果您拥有一 个复杂的 JavaScript 应用程序，或者您认为性能很重要，那么您就应该控制用户用于访问 Web 应用程序的浏览器。这些测试已经清楚地显示了浏览器的影响。如果您的 JavaScript 应用程序的访问量很大，那么您可以告诉用户，他们必须 使用 Chrome。

结论 7：如果您不能控制用户使用的浏览器，那么要首先考虑在 IE6 上的性能。
但 是，在大部分情况下，我们都无法控制用户使用什么浏览器访问我们的站点。不过，很大一部分用户都使用 IE 6 浏览网页。到目前为止的测试中，这个浏览器的 JavaScript 引擎是最慢的。但是由于仍然有大量用户使用它，并且良好的 Web 设计需要 “适应最糟糕的情况”，这意味着您可以考虑根据 IE6 设计您的 JavaScript 应用程序。

jQuery 性能调优

本 文的第二部分将讨论如何改进 jQuery 代码的性能。前一部分表明选择 jQuery 作为 JavaScript 库指向了正确的性能方向。如果您正在阅读本文，您可能已经使用了 jQuery。但是底层库速度快并不意味着您编写的所有代码都是高质量的。如果您没有回过头来想想应该怎么做，使用 jQuery 仍然会编写出非常慢的代码。

这个部分介绍一些性能调优知识，以及改进 jQuery 代码速度的最佳实践技巧。

技巧 #1 - 尽可能多地通过 ID 进行搜索，而不是 CLASS
在 jQuery 代码中两种常见的搜索技术是通过元素的 ID 进行搜索和通过元素的 CLASS 进行搜索。在使用常规 JavaScript 的 JavaScript 库之前，通过 ID 查找页面元素还是相当简单的。可以使用 getElementById() 方法快速找到元素。但是如果没有 JavaScript 库，要查找 CLASS 会更加困难，在必要情况下，我们还通过在其 ID 中进行编码帮助查找。使用 jQuery 时，搜索 CLASS 就像搜索页面上的 ID 一样简单，因此这两个搜索似乎是可互换的。然而实际情况并非如此。通过 ID 搜索比通过 CLASS 搜索要快得多。当通过 ID 进行搜索时，jQuery 实际上仅使用内置的 getElementById() 方法，但通过 CLASS 进行搜索时必须遍历页面上的所有元素，以查找匹配项。很明显，当页面越大并且越复杂时，通过 CLASS 进行搜索会导致响应非常慢，而通过 ID 进行搜索不会随着页面变大而变慢。

前面运行的 jQuery 性能测试结果支持这一数据。让我们查看每个测试，看看需要注意 jQuery 代码的什么地方。在这个例子中，分别看看通过 ID 和 CLASS 进行搜索时的测试结果（图 5）。

这 些测试是不同的，但它们得出的数据表明通过 ID 进行搜索比通过 CLASS 进行搜索快得多。这如何影响到 jQuery 代码？在编写搜索时，您要记住这些技巧：如果既可选择 CLASS 又可选择 ID，那么通常要选择 ID。如果需要在您的代码中搜索某些元素，一定要给它们分配 ID。

清单 1 显示了一个实际的 jQuery 测试，您可以在您的机器上运行它对此进行验证：

ID 测试耗时 218 毫秒，而 CLASS 测试耗时 19.9 秒！甚至在专门为该测试构建的简单页面上，ID 搜索也要比 CLASS 搜索快 100 倍！

技巧 #2 - 提供尽可能多的搜索信息
jQuery 提供如此多的页面元素搜索方法，有时您难以指出哪种方法是最好的。有一条经验是不会错的，即为搜索参数提供尽可能多的信息。因此，假如您正在搜索带有 “clickable” CLASS 的所有页面元素，如果您提前知道仅有 DIV 附带有 CLASS，那么就能提高搜索性能。所以，搜索 “div.clickable” 会更加快。图 6 显示了支持该技巧的结果。

考虑到底层 JavaScript 代码之后，这就不足为奇了。通过提供元素标记，与 CLASS 参数匹配的搜索元素数量将大大减少，从而将搜索性能提升至与本例中的 ID 搜索相当。

开发人员在编写 jQuery 选择方法时不能偷懒，尽管 jQuery 的简单让人产生偷懒的欲望。简单让您放松了警惕。搜索机制变得如此简单，让我们倾向于仅输入一条信息。然而，您应该总是尽可能多地输入信息，尤其是已知信息。清单 2 显示了一个很好的例子。

技巧 #3 - 缓存选择器
最 后一个性能技巧利用了几乎所有 jQuery 选择器都返回 jQuery 对象这个特性。这意味着在理想的情况下，您仅需要运行选择器一次，并且能够轻松地将所有函数连接在一起，或缓存结果供以后使用。您也不要担心缓存，因为与 总体可用内存相比，返回的对象是很小的。

清单 3 给出了一些关于如何利用缓存的例子。

在我的最后一个关于性能的示例代码中，将查看我在本系列的第一篇文章中提到的小部件（见 参考资料）。这个小部件是在表的左上角上的复选框，它允许您选择或取消选择该列上的所有复选框。这个小部件在电子邮件应用程序中非常常见，用于选择或取消选择所有消息。

关于性能的要点

使 用 JavaScript 时，速度和性能绝对不是小问题。在现实中，创建 jQuery 的开发人员和处理浏览器内置 JavaScript 引擎的开发人员都非常关注性能问题。事实上，在最近 6 个月以来，浏览器开发的最重要问题就是 JavaScript 引擎的速度。浏览器开发者都致力于在下一年迅速提升 JavaScript 的执行性能，从而大大提高 jQuery 代码和 JavaScript 引擎的速度。来自这些 “速度之战” 的消息表明，提升 JavaScript 性能是大势所趋。领导 jQuery 项目的 John Resig 一直都在谈论他的最新 “Sizzle” 选择引擎。他从头编写了一个选择引擎，并声称初步结果表明它比 Firefox 要快 4 倍。这是巨大的速度提升！在我撰写本文的最后部分时，jQuery 1.3 已经发布，并且包含了 Sizzle 选择引擎。jQuery 声称，在所有浏览器上运行的总体结果表明选择引擎的 1.3 版本比 1.2.6 版本的快 49%。此外，1.3 发布版在 HTML 注入（向 DOM 添加新的元素）上改进了 6 倍，在函数定位上改进了 3 倍。在我完成本文时，很多人都更新到了最新的 jQuery 发布版，这是非常令人激动的！

影响 JavaScript 性能的另一个因素是浏览器，如前所述，它的影响是所选的库的 9 倍。Firefox 和 Chrome 在 “最快 JavaScript 引擎” 之战中各有胜负，而 Safari 的参与让竞争更加激烈。从我们上面的测试中，可以看到 Chrome 在 JavaScript 引擎性能方面远远超过 Firefox，但是 Firefox 3.1 将包含新的 Tracemonkey JavaScript 引擎，届时其速度将比当前的 JavaScript 引擎 3.0 快 20 至 40 倍（这是他们声称的，不是我的观点），真不可思议！

在未来一两年内，您将看到底层 JavaScript 引擎和 JavaScript 库的速度得到巨大改进，从而导致使用 JavaScript 的 Web 应用程序将变得更加复杂。

如 果您正在决定是使用 JavaScript 库还是自己编写 JavaScript，那么需要考虑的另一件事情是处理和调试 JavaScript 库所需的全部工作。最近几年以来，有数百位用户一直在维护库中的每一个函数。您可能要忙到深夜，甚至筋疲力尽地编写自己的函数。您更相信谁呢？另外，即使 您能编写出比 jQuery 库更快的代码，您是否想过使用 jQuery 库能够获得更多的优势？您是否为了辛苦地编写自己的代码而放弃使用非常便利的 jQuery 及其函数库？自己编写代码不仅需要大量时间，并且还会产生更多 bug，因此我还是建议使用现成的 jQuery 库。

我最后讨论的要点可能会让一些人沮丧，但是我们必须考虑编写这些 jQuery 库的程序员。他们当中的一些是最棒的，并且他们编写的超级优秀的代码（一般人不能编写这样出色的代码）都收入到这些库中。我承认自己远远不如编写 jQuery 库的程序员。因此，为何不利用他们的智慧？

结束语

本 文从总体上讨论了 jQuery 和 JavaScript 库的性能。通过对选择方法进行大量的测试，您看到这些库之间的速度存在巨大的差距，并且 jQuery 是最快的库之一。不过，即使您选择了最快的 JavaScript 库，还是不能解决 Web 应用程序的性能问题，因为浏览器对性能的影响比库强 9 倍。如果您能够控制用户使用特定的 Web 浏览器，那么就让他们使用最快的浏览器。找到能够最快地运行您的 Web 应用程序的浏览器，并让用户通过使用它从中受益。理想情况下，让最慢的 JavaScript 浏览器消失意味着出现更快的 Web 应用程序。

我还提供了关于 jQuery 性能的 3 个技巧。尽管有好几个站点都提供了关于 jQuery 性能的技巧，但是这 3 个技巧是最有效的。3 个技巧肯定比 50 个技巧容易记住，但其他技巧也是很好的，我将在 参考资料 部分指出另外一些技巧。不过，如果您在编写代码时记住了这 3 个技巧，将会获得巨大的性能提升。应该永远记住的 3 个 jQuery 技巧是：通过 ID 搜索比通过 CLASS 搜索快 100 倍，尽可能多地提供搜索信息，以及尽量缓存选择。

最 后，我们快速查看了 jQuery 和浏览器的 JavaScript 引擎即将推出的改进。在我撰写本文的结尾部分时，jQuery 1.3 已经发布了，它承诺在选择和代码的其他方面实现跳跃式性能改进。此外，Firefox 还承诺它的下一代 JavaScript 引擎会快 20 至 40 倍！这些迹象表明，在未来的一两年内，JavaScript 环境会在性能上取得重大突破。在不久的将来，复杂的 Web 应用程序会日益流行，因为快速运行这些程序的条件已经成熟。

在本文结束时，我们应该回过头来重新检验这句话 “jQuery 在简单的页面上无可挑剔，但在复杂的页面上性能极其低下。在解决性能问题之前，您必须对复杂页面使用常规的 JavaScript。”根据我的经验，jQuery 的 “性能问题” 一样出现在 “常规的 JavaScript” 中。事实上，真正影响性能的不是 jQuery 或 JavaScript，而是浏览器。因此我同意这样的观点：使用设计不良的 jQuery 代码的复杂页面运行在 IE6 上时会导致糟糕的性能。不过，我希望您已经了解我要阐述的思想：只要拥有良好的 jQuery 代码、运用 3 个最重要的技巧并选择最快的浏览器，那么即使运行最复杂的页面也不会出现明显的性能问题。

废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到).

1. load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。

url (String) : 请求的HTML页的URL地址。

data (Map) : (可选参数) 发送至服务器的 key/value 数据。

callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。

这个方法默认使用 GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。

这个方法可以很方便的动态加载一些HTML文件，例如表单。

示例代码：

$(".ajax.load").load("http://www.cnblogs.com/QLeelulu/archive/2008/03/30/1130270.html .post",
function (responseText, textStatus, XMLHttpRequest){
this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0]
//alert(responseText);//请求返回的内容
//alert(textStatus);//请求状态：success，error
//alert(XMLHttpRequest);//XMLHttpRequest对象
});

注：不知道为什么URL写绝对路径在FF下会出错，知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径，所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的，发现传上来后没办法获取结果，所以把运行按钮去掉了。

2. jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求

参数：

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示，会做为QueryString附加到请求URL中。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。示例代码：

$.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){
//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.
this; // 在这里this指向的是Ajax请求的选项配置信息，请参考下图
alert(data);
//alert(textStatus);//请求状态：success，error等等。
当然这里捕捉不到error，因为error的时候根本不会运行该回调函数
//alert(this);
});

点击发送请求：

jQuery.get()回调函数里面的 this ，指向的是Ajax请求的选项配置信息：

3. jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求

参数：

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。示例代码：

Ajax.aspx：

Response.ContentType = "application/json";
Response.Write("{result: '" + Request["Name"] + ",你好！(这消息来自服务器)'}");

jQuery 代码：

$.post("Ajax.aspx", { Action: "post", Name: "lulu" },
function (data, textStatus){
// data 可以是 xmlDoc, jsonObj, html, text, 等等.
//this; // 这个Ajax请求的选项配置信息，请参考jQuery.get()说到的this
alert(data.result);
}, "json");

点击提交：

这里设置了请求的格式为"json"：

如果你设置了请求的格式为"json"，此时你没有设置Response回来的ContentType 为：Response.ContentType = "application/json"; 那么你将无法捕捉到返回的数据。

注意一下，alert(data.result); 由于设置了Accept报头为“json”，这里返回的data就是一个对象，并不需要用eval()来转换为对象。

4. jQuery.getScript( url, [callback] ) : 通过 GET 方式请求载入并执行一个 JavaScript 文件。

参数

url (String) : 待载入 JS 文件地址。

callback (Function) : (可选) 成功载入后回调函数。

jQuery 1.2 版本之前，getScript 只能调用同域 JS 文件。 1.2中，您可以跨域调用 JavaScript 文件。注意：Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本，请加入延时函数。

这个方法可以用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件.下面看一些示例代码：

加载并执行 test.js。

jQuery 代码:

$.getScript("test.js");

加载并执行 AjaxEvent.js ，成功后显示信息。

jQuery 代码:

$.getScript("AjaxEvent.js", function(){
alert("AjaxEvent.js 加载完成并执行完成.你再点击上面的Get或Post按钮看看有什么不同？");
});

加载完后请重新点击一下上面的 Load 请求看看有什么不同。

jQuery Ajax 事件

Ajax请求会产生若干不同的事件，我们可以订阅这些事件并在其中处理我们的逻辑。在jQuery这里有两种Ajax事件：局部事件 和 全局事件。

局部事件就是在每次的Ajax请求时在方法内定义的，例如：

$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ...
});

全局事件是每次的Ajax请求都会触发的，它会向DOM中的所有元素广播，在上面 getScript() 示例中加载的脚本就是全局Ajax事件。全局事件可以如下定义：

$("#loading").bind("ajaxSend", function(){
$(this).show();
}).bind("ajaxComplete", function(){
$(this).hide();
});

或者：

$("#loading").ajaxStart(function(){
$(this).show();
});

我们可以在特定的请求将全局事件禁用，只要设置下 global 选项就可以了：

$.ajax({
url: "test.html",
global: false,// 禁用全局Ajax事件.
// ...
});

下面是jQuery官方给出的完整的Ajax事件列表：

$.ajax({
type: "get",
url: "http://www.cnblogs.com/rss",
beforeSend: function(XMLHttpRequest){
//ShowLoading();
},
success: function(data, textStatus){
$(".ajax.ajaxResult").html("");
$("item",data).each(function(i, domEle){
$(".ajax.ajaxResult").append("<li>"+$(domEle).children("title").text()+"</li>");
});
},
complete: function(XMLHttpRequest, textStatus){
//HideLoading();
},
error: function(){
//请求出错处理
}
});

$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
});
$.ajax({ data: myData });

<p id="results"><b>Results: </b> </p>
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" name="check" value="check1"/> check1
<input type="checkbox" name="check" value="check2"
checked="checked"/> check2
<input type="radio" name="radio" value="radio1"
checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2
</form>

解决:

jquery和prototype冲突解决, 网上流传的一篇文章,我这里测试结果是错误的! http://ajaxbbs.net/blog/post/71/

另一种方式是:
<script type=”text/javascript”>
      jQuery.noConflict();
</script>

参考: http://www.d5s.cn/archives/6, 但我这里测试也有问题!

本人测试通过的方式:

1、将jquery.js放到prototype.js前面（这个是必须的!）。
2、在jquery.js后面将$变量重命名。
方法如下：

<script type="text/javascript"  src="jquery.js"></script>
<script type="text/javascript">
var jQuery=$;
</script>

<script type="text/javascript" type="text/javascript" src="window.js"></script>
<!--上面这个window.js调用了jquery框架的方法-->
<script type="text/javascript" type="text/javascript" src="prototype.js"></script>

3、将原来使用的$方法名一律替换为jQuery名，如$("obj")替换为jQuery("obj")。

例如下面的一段代码, 混合了 jQuery和基于Prototype的 EasyValidation:

<!--  jquery, 注意加载顺序 -->
<script src="js/jquery-1.2.6.pack.js"></script>
<script type=”text/javascript”>
      var jQuery=$;
</script>

<!-- 表单验证 -->
<script src="easy_validation/lib/prototype.js" type="text/javascript"></script>
<script src="easy_validation/lib/effects.js" type="text/javascript"></script>
<script src="easy_validation/src/validation_cn.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="easy_validation/styles/style_min.css" />

    <div id="contents"></div>
  <script>
  jQuery(document).ready(function(){
    //jQuery("#contents").load("test.jsp");
    jQuery("#contents").load("test.jsp?username=BeanSoft")
  });
  </script>
          <!-- 为form增加required-validate class,标识需要验证form -->
        <form id='helloworld' action="#" class='required-validate'>
<input name="user.name" class="required min-length-6 max-length-20 validate-alphanum" value="beansoft">
     *密码:
      <input name="user.password" type="password" class="required min-length-6 max-length-20" value="123456" >

    *密码(重复):
      <input name="password1" type="password" class="required equals-user.password" value="123456" >

            <input type='submit' value='Submit'/>
            <input type='reset' value='Reset'/>
        </form>

1、关于页面元素的引用

通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换

只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：

$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

3、如何获取jQuery集合的某一项

对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个<div>元素的内容。有如下两种方法：

$("div").eq(2).html();              //调用jquery对象的方法
$("div").get(2).innerHTML;       //调用dom的方法属性

4、同一函数实现set和get

Jquery中的很多方法都是如此，主要包括如下几个：

$("#msg").html();              //返回id为msg的元素节点的html内容。
$("#msg").html("<b>new content</b>");      
//将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

$("#msg").text();              //返回id为msg的元素节点的文本内容。
$("#msg").text("<b>new content</b>");      
//将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b>

$("#msg").height();              //返回id为msg的元素的高度
$("#msg").height("300");       //将id为msg的元素的高度设为300
$("#msg").width();              //返回id为msg的元素的宽度
$("#msg").width("300");       //将id为msg的元素的宽度设为300

$("input").val(");       //返回表单输入框的value值
$("input").val("test");       //将表单输入框的value值设为test

$("#msg").click();       //触发id为msg的元素的单击事件
$("#msg").click(fn);       //为id为msg的元素单击事件添加函数

同样blur,focus,select,submit事件都可以有这两种调用方法

5、集合处理功能

对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式：

6、扩展我们需要的功能

$.extend({
       min: function(a, b){return a < b?a:b; },
       max: function(a, b){return a > b?a:b; }
});       //为jquery扩展了min,max两个方法

使用扩展的方法（通过“$.方法名”调用）：

alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

7、支持方法的连写
所谓连写，即可以对一个jquery对象连续调用各种不同的方法。

例如：

$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});

8、操作元素的样式

主要包括以下几种方式：

$("#msg").css("background");              //返回元素的背景颜色
$("#msg").css("background","#ccc")       //设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200");       //设定宽高
$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
$("#msg").addClass("select");       //为元素增加名称为select的class
$("#msg").removeClass("select");       //删除元素名称为select的class
$("#msg").toggleClass("select");       //如果存在（不存在）就删除（添加）名称为select的class

9、完善的事件处理功能

Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。
如：
$("#msg").click(function(){alert("good")})    //为元素添加了单击事件
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})   //为三个不同的p元素单击事件分别设定不同的处理

jQuery中几个自定义的事件：

（1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。

//当鼠标放在表格的某行上时将class置为over，离开时置为out。
$("tr").hover(function(){
$(this).addClass("over");
},
       function(){
       $(this).addClass("out");
});

（2）ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

$(document).ready(function(){alert("Load Success")})
//页面加载完毕提示“Load Success”,不同于onload事件，onload需要页面内容加载完毕（图片等），而ready只要页面html代码下载完毕即触发。与$(fn)等价

（3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。

       //每次点击时轮换添加和删除名为selected的class。
       $("p").toggle(function(){
              $(this).addClass("selected");  
       },function(){
              $(this).removeClass("selected");
       });

（4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如：
       $("p").trigger("click");       //触发所有p元素的click事件

（5）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中（添加）删除绑定的事件。
例如：
$("p").bind("click", function(){alert($(this).text());}); 
//为每个p元素添加单击事件
$("p").unbind();       //删除所有p元素上的所有事件
$("p").unbind("click")       //删除所有p元素上的单击事件

$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})      
//为索引分别为0，1，2的p元素分别设定不同的字体颜色。

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})      
//实现表格的隔行换色效果

$("p").click(function(){alert($(this).html())})             
//为每个p元素增加了click事件，单击某个p元素则弹出其内容

使用jQuery,Ajax恐怕不能变得再简单了. jQuery有一系列的函数,可以使简单的事情变得真正简单,让复杂的事情也能变得尽可能
的简单.

Ajax的一个一般用法就是加载一段html代码到页面上的某一区域. 要实现这个,你只要简单的选中这个元素,然后使用load()函数.
下面是个例子,用来更新一些统计信息.

$('#stats').load('stats.html');通常,你可能需要向服务器端的页面传递一些参数. 你可能猜到了, 使用jQuery来实现的话会十分简单.你可以选择使用$.post()或者$.get(), 当然要根据你的具体需要. 如果需要, 你可以传递一个可选的数据对象和一个回调函数.Listing4是一个发送数据以及使用回调函数的简单例子:

[url=]Listing 4. Sending data to a page with Ajax[/url]

$.post('save.cgi', ...{
    text: 'my string',
    number: 23
}, function() ...{
    alert('Your data has been saved.');
});

如果你真的想要一些复杂的Ajax代码,那就是用$.ajax()函数. 你可以指定数据类型为xml, html, script或者json, jQuery 会为你自动准备好结果一遍你的回调函数能够立即使用这些数据. 你还可以设定 beforeSend,                        error, success, 以及                        complete 回调函数来给用户一些ajax体验的更多提示信息. 另外,还有一些参数,可以让你设置ajax请求的超时时间,或者一个页面的"最后更改"状态. Listing5展示了一个获取xml文档并使用我上面提到的一些参数的简单例子:

[url=]Listing 5. Complex Ajax made simple with $.ajax()[/url]

$.ajax(...{
    url: 'document.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function()...{
        alert('Error loading XML document');
    },
    success: function(xml)...{
        // do something with xml
    }
});

当你成功的获得xml反馈的时候, 你可以使用jQuery来遍历xml文档,就像你操作html的方式一样.这使操作一个xml文件以及整合内容到页面上变得十分的简单. Listing6 扩展了success函数,根据xml文档里的每个<item>在页面上增加一个了list(列表)条目.

[url=]Listing 6. Working with XML using jQuery[/url]

success: function(xml)...{
    $(xml).find('item').each(function()...{
        var item_text = $(this).text();

        $('<li></li>')
            .html(item_text)
            .appendTo('ol');
    });
}

      jQuery是一个不错的javascript产品，我曾经想总结一些javascript的一些常用功能，以备自己调用，然而看了jQuery，发现他做的太强了，不得不向他学习。“永远学习强者”，但是也告诫自己，不要被它们绑住了双手，否则你的创造性就会被扼杀，我建议当工具使用，不必死计其语法，否则自己就“晕”了。我希望有更多有创造性的产品出现。

      获取jQuery最新版本：http://jquery.com/src/

一、基本操作：

1、当文档（dom）加载完毕后，立即执行内容：

$(document).ready(function() ...{
    // do stuff when DOM is ready
});

2、为所有的A标记添加一个事件。 ：）当然也可以是其它的，任意发挥吧。

$("a").click(function() ...{
        alert("Hello world!");
    });

3、使用选择器与事件
    jQuery中提供了两种方法来选择HTML元素，第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器（如：$("div > ul a")）；第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。

//在一个菜单应用中，将其子菜单中的A标记加样式
    $(document).ready(function() ...{
    
        $("#Menu ul a").hover(function()...{
            $(this).addClass("blue");
        },function()...{
            $(this).removeClass("blue");
        });

注：id选择加#号前缀，其下级标记用空格隔开。：）是不是很容易啊
        hover为其事件，其它事件有click,mouseover,mouseout,change...等。可参考:http://visualjquery.com

4、用这些选择器和事件你已经可以做很多的事情了，但这里有一个更强的好东东！

$(document).ready(function() ...{

    $("#orderedlist").find("li").each(function(i) ...{

        $(this).html( $(this).html() + " BAM! " + i );

    });

});

注：find() 让你在已经选择的element中作条件查找,因此 $("#orderedlist).find("li") 就像 $("#orderedlist li")一样。each()方法迭代了所有的li，并可以在此基础上作更多的处理。 大部分的方法,如addClass(), 都可以用它们自己的 each() 。在这个例子中, html()用来获取每个li的html文本, 追加一些文字，并将之设置为li的html文本。

 5、不希望某些特定的元素被选择。jQuery 提供了filter() 和not() 方法来解决这个问题

$(document).ready(function() ...{
    $("li").not("[ul]").css("border", "1px solid black");
});

 注：这个代码选择了所有的li元素，然后去除了没有ul子元素的li元素。注意体会方便之极的css()方法，并再次提醒请务必实际测试观察效果，比方说换个CSS样式呢？再加一个CSS样式呢？像这样：$("li").not("[ul]").css("border", "1px solid black").css("color","red")。

 6、可以在子元素和属性(elements and attributes)上用作过滤器，比如你可能想选择所有的带有name属性的链接:

$(document).ready(function() ...{

    $("a[@name]").background("#eee");

});

注：这个代码给所有带有name属性的链接加了一个背景色。

6.1常见的情况是以name来选择链接，你可能需要选择一个有特点href属性的链接，这在不同的浏览器下对href的理解可能会不一致，所以我们的部分匹配("*=")的方式来代替完全匹配("=")：

$(document).ready(function() ...{

    $("a[@href*=/content/gallery]").click(function() ...{

        // do something with all links that point somewhere to /content/gallery

    });

});

小示例，比如一个FAQ的页面，答案首先会隐藏，当问题点击时，答案显示出来，jQuery代码如下：

$(document).ready(function() ...{
    $('#faq').find('dd').hide().end().find('dt').click(function() ...{
         var answer = $(this).next();
         if (answer.is(':visible')) ...{
             answer.slideUp();
         } else ...{
             answer.slideDown();
         }
     });
});

注：在点击事件中的，我们用 $(this).next() 来找到dt下面紧接的一个dd元素，这让我们可以快速地选择在被点击问题下面的答案。

7、除了选择同级别的元素外，你也可以选择父级的元素。可能你想在用户鼠标移到文章某段的某个链接时，它的父级元素--也就是文章的这一段突出显示，试试这个：

$(document).ready(function() ...{
    $("a").hover(function() ...{
        $(this).parents("p").addClass("highlight");
    }, function() ...{
        $(this).parents("p").removeClass("highlight");
    });
});

8、在我们继续之前我们先来看看这一步： jQuery会让代码变得更短从而更容易理解和维护，下面是

$(document).ready(callback)的缩写法：

$(function() ...{
    // code to execute when the DOM is ready
});

应用到我们的Hello world例子中，可以这样:

$(function() ...{

    $("a").click(function() ...{

        alert("Hello world!");

    });

});

：）是不是很容易呀，多亏了jQuery团队的努力呀！