选择器速度

发布日期: 作者:

注意: Jack 已经 修复了这篇文章中提到的几乎所有问题 – 做得棒!


我们一直推迟讨论 jQuery 选择器在 1.1 新版本中的速度问题,直到我们的发布更接近完成——然而,似乎这个过程已经被 加快了。所以,既然已经公开了,让我们来看看 jQuery 选择器的速度。

简而言之:为了 jQuery 1.1,我们真的付出了很大的努力,让 它的选择器变得非常快。事实上,根据我们所有的测试,我们比任何其他选择器库都快。在开发 1.1 版本时,Dean Edwards 的 cssQuery 的性能远远超过了任何其他选择器库。它非常全面,而且速度非常快。

今天,Jack Slocum 宣布了他的新 DOMQuery 选择器库。简而言之:标准提高了。他的库非常非常快。可能可以说是目前速度最快的。

然而,在比较他的库和我们的库时,犯了一些错误,我们希望澄清一下。(由 Jack 和 jQuery 双方犯下)(为了参考,这是我用于测试的 比较套件。)

jQuery 完全支持所有属性选择器。
例如,[@foo],[@foo=bar] 等。显著的区别是 jQuery 在这种情况下使用 XPath 风格的语法。由于 Jack 的测试中没有考虑到这一点,所以看起来我们在所有属性选择器测试中都失败了。

我们的“elem:empty”工作得很好。
你可以在 Jack 的测试中看到,所有选择器(除了 DOMQuery)都无法使用 :empty——这更多地是因为他将结果与 DOMQuery 进行了比较,而 DOMQuery 得出了错误的结果。规范规定,如果某个元素不包含任何子元素或文本节点,则它为空。在这种情况下,似乎没有考虑到这一点。

[foo!=bar],:first,:last 不属于任何规范。
… 尽管它们出现在测试套件中。顺便说一下,jQuery 确实实现了 :first 和 :last——但没有实现 [foo!=bar](似乎只在 cssQuery 中出现?)。总的来说,与其他人进行比较非常奇怪,因为这不是你被设计用来做的事情。

span:not(span.hl-code) 匹配什么?
这是一个奇怪的灰色区域,我还没有看到任何地方讨论过,而且规范也无济于事。结果集应该是所有没有 hl-code 类的 span——还是什么都没有,因为你已经过滤掉了所有 span。例如

// Finds nothing in both
span:not(span)
=> []

// Finds spans that don't have a class of 'foo', in both
span:not(.foo)
=> [ <span>, <span>, ... ]

// jQuery's interpretation of the combination:
$("span:not(span.foo)")
=> []

// DOMQuery's interpretation of the combination:
Ext.select("span:not(span.foo")
=> [ <span>, <span>, ... ]

我们完全承认,我们在这方面可能错了——但我很好奇想听听其他人的意见,以及他们对规范的解读。

DOMQuery 没有考虑重复项。
目前,执行 Ext.select("div div") 返回的元素比执行 Ext.select("div") 返回的元素多——执行 Ext.select("div div div") 返回的元素集又是不同的,但仍然比仅仅执行 Ext.select("div") 返回的元素多。事实上,考虑重复项是 JavaScript 选择器库中的一大难题——目前,jQuery 是唯一一个能够正确处理它的库。

这其中的一大要点是,考虑重复项可能非常昂贵(从计算的角度来看)——所以 DOMQuery 没有考虑重复项,这就让它看起来速度更快了。例如

// DOMQuery
Ext.select("div").elements.length
=> 246
Ext.select("div div").elements.length
=> 624
Ext.select("div div div").elements.length
=> 523

// jQuery
jQuery("div").length
=> 246
jQuery("div div").length
=> 243
jQuery("div div div").length
=> 239

DOMQuery 不支持多个过滤器:elem.foo[foo=bar] 或 elem.foo.bar
在实现这一点之前,与任何其他库进行比较都是不公平的。构建一个能够完全处理这些方面的库(例如:cssQuery、jQuery)需要付出很大的代价。(无论是在代码大小还是速度成本方面。)

DOMQuery 的 #id 选择器不检查上下文
你会注意到,如果你尝试执行以下查询:

Ext.select("div #badid").elements
=> [div#badid]

你会得到一个名为“badid”的元素——即使该元素实际上并不在 div 内部。由于 DOMQuery 代码中没有进行有效性检查,所以它速度飞快——但也非常错误。

我应该提一下,在 1.1 之前,jQuery 在这一点上也是错误的,所以这是一个很容易忽略的问题。

根元素去哪里了?
你会发现,在 DOMQuery 中搜索“html”和“*”奇怪地缺少了一个显而易见的东西:HTML 元素。将根 DOM 元素排除在所有查询之外似乎有点奇怪;尤其是因为它完全有效:“html > body *”。

…为了公平起见——这里有一个针对我们自身的 :-)

我们的 :nth-child(even/odd) 有缺陷。
目前,它似乎只选择一个元素(!?)。我为此创建了一个 工单,应该会在本周日的 1.1 版本中解决。

总而言之,看到 DOMQuery 速度有了飞跃真是太好了。选择器速度是一个真正需要竞争的领域;每次速度提高,每个人都会受益(用户、开发人员——所有人)。

事实上,仔细研究了他的代码后,我已经有了一些关于如何提高 jQuery 速度的想法!

所以,对 Jack 说:感谢你帮助我们保持警觉——我们期待着看到你的库改进,并让每个人都受益。

jQuery 1.1b

发布日期: 作者:

我们几乎准备好发布 1.1 正式版本了,就在本周日——但为了让你耐心等待,这里还有一组 bug 修复,你可以测试一下。jQuery 开发团队一直在努力工作,修复了本周收到的所有支持请求,并且我们在修复几乎所有出现的错误方面取得了相当大的成功。

我们非常感谢你花时间用你的代码测试新的 1.1b 版本,如果你发现任何 bug,请 提交到 bug 跟踪器

当然,不仅是 bug 修复;我们还有一些新的东西要让你尝试:jQuery 1.0 兼容性插件。正如承诺的那样,此插件提供了 1.0.4 版本中所有现有的方法和选择器。所以,理论上,你应该能够在 jQuery 1.1 中使用新的兼容性插件,一切都应该可以无缝地工作。

以下是如何在 jQuery 1.1 中使用兼容性插件

<html>
<head>
  <script src="jquery-1.1.js"></script>
  <script src="jquery.compat-1.0.js"></script>
  <script>
    $(document).ready(function(){
        // Your old 1.0-centric code
    });
  </script>
</head>
<body></body>
</html>

所以,虽然在可预见的未来完全可以继续使用兼容性插件,但强烈建议你遵循之前提到的 升级计划

所以,再次强调:请帮助我们测试这个 beta 版本! 你越帮助我们测试,最终的 1.1 版本就会越好。感谢你的帮助!

下载

更新: 还有一些事情我忘记提了(凌晨 4 点发布版本,就是这样)

  • .filter([".foo", ".bar"]) 现在是 .filter(".foo, .bar"):一个更简单的解决方案——兼容性插件中已经包含了修复程序。
  • . 我们决定保留 .height() 和 .width()。它们回来了,因为它们非常有用。
  • 文档 已更新至 1.1b 版本(所以对于那些仍然看到 .filter([...]) 或没有看到 .height() 和 .width() 的人——现在已经修复了。)

jQuery 1.1a

发布日期: 作者:

正如 之前宣布的那样,今天我们为您带来了 jQuery 1.1 的 alpha 版本。我们非常感谢您能够帮助我们测试这个 alpha 版本,以便我们能够在本周末发布正式版本——恰逢 jQuery 的一周年纪念日!(1 月 14 日)

这将是一个非常棒的版本。事实上,这个版本如此出色,我们将在整个本周向您介绍新功能,以及如何更好地使用它。推广团队已经安排了一系列活动,让您熟悉并准备好使用这个 jQuery 的伟大新版本。

以下是 jQuery 1.1 的快速介绍

  • 它的选择器比 jQuery 1.0.4 中的选择器快 10-20 倍。
  • 文档 已完全改版。
  • API 的复杂度降低了 47%
  • 它包含大量的 bug 修复。
  • 它包含了许多很棒的新功能。
  • … 它仍然是您所熟悉的只有 19KB 的小巧代码。

我们将在接下来的几天内详细介绍,但就目前而言,它正在成为一个很棒的版本。

下载

API 更改

注意: 我们将在本周末发布 jQuery 1.1 正式版本时,同时发布一个向后兼容性插件。

需要重点注意的是,API 已经进行了很多更改。有些是添加,有些是重新组织。如果您想帮助我们测试这个 alpha 版本,请记住这些更改。

:nth-child() 现在从 1 开始,而不是从 0 开始。 我们对 CSS 3 选择器的实现从 0 开始编号,而不是从 1 开始。这是一个 bug 修复,但可能会影响您的代码。

// 1.0.x: Get the first column from a table
$("td:nth-child(0)")

// 1.1: Get the first column from a table
$("td:nth-child(1)")

以下 方法已在此版本中重命名/重新组织,以下是如何继续使用它们,就像您预期的那样

旧方法 (1.0.x) 新方法 (1.1)
.ancestors() .parents()
.宽度() .css(“宽度”)
.高度() .css(“高度”)
.顶部() .css(“顶部”)
.左边() .css(“左边”)
.位置() .css(“位置”)
.浮动() .css(“浮动”)
.溢出() .css(“溢出”)
.颜色() .css(“颜色”)
.背景() .css(“背景”)
.id() .attr(“id”)
.标题() .attr(“标题”)
.名称() .attr(“名称”)
.href() .attr(“href”)
.src() .attr(“src”)
.rel() .attr(“rel”)
.oneblur(fn) .one(“blur”,fn)
.onefocus(fn) .one(“focus”,fn)
.oneload(fn) .one(“load”,fn)
.oneresize(fn) .one(“resize”,fn)
.onescroll(fn) .one(“scroll”,fn)
.oneunload(fn) .one(“unload”,fn)
.oneclick(fn) .one(“click”,fn)
.onedblclick(fn) .one(“dblclick”,fn)
.onemousedown(fn) .one(“mousedown”,fn)
.onemouseup(fn) .one(“mouseup”,fn)
.onemousemove(fn) .one(“mousemove”,fn)
.onemouseover(fn) .one(“mouseover”,fn)
.onemouseout(fn) .one(“mouseout”,fn)
.onechange(fn) .one(“change”,fn)
.onereset(fn) .one(“reset”,fn)
.oneselect(fn) .one(“select”,fn)
.onesubmit(fn) .one(“submit”,fn)
.onekeydown(fn) .one(“keydown”,fn)
.onekeypress(fn) .one(“keypress”,fn)
.onekeyup(fn) .one(“keyup”,fn)
.oneerror(fn) .one(“error”,fn)
.unblur(fn) .unbind(“blur”,fn)
.unfocus(fn) .unbind(“focus”,fn)
.unload(fn) .unbind(“load”,fn)
.unresize(fn) .unbind(“resize”,fn)
.unscroll(fn) .unbind(“scroll”,fn)
.ununload(fn) .unbind(“unload”,fn)
.unclick(fn) .unbind(“click”,fn)
.undblclick(fn) .unbind(“dblclick”,fn)
.unmousedown(fn) .unbind(“mousedown”,fn)
.unmouseup(fn) .unbind(“mouseup”,fn)
.unmousemove(fn) .unbind(“mousemove”,fn)
.unmouseover(fn) .unbind(“mouseover”,fn)
.unmouseout(fn) .unbind(“mouseout”,fn)
.unchange(fn) .unbind(“change”,fn)
.unreset(fn) .unbind(“reset”,fn)
.unselect(fn) .unbind(“select”,fn)
.unsubmit(fn) .unbind(“submit”,fn)
.unkeydown(fn) .unbind(“keydown”,fn)
.unkeypress(fn) .unbind(“keypress”,fn)
.unkeyup(fn) .unbind(“keyup”,fn)
.unerror(fn) .unbind(“error”,fn)

我意识到这是一个很长的列表 - 但你会惊讶于其中有多少人没有使用。通过移除所有这些方法,我们已经能够将 jQuery API 的大小减少了 47%。我们将在稍后提供有关 API 更改的更多信息,但现在,这份列表应该可以帮助你解决代码中的任何重大差异。

如果你有任何问题,请随时在评论中发布,我们会尽快回复。

通往 1.1 的道路

发布于 作者

只是快速更新,让大家知道发生了什么: jQuery 开发团队目前正在开发即将发布的 jQuery 1.1 版本。因此,SVN 在接下来的几周内将发生重大变化。以下是目前的计划

  • jQuery 1.1a **1 月 7 日** - 快速发布 alpha 版本,帮助每个人测试他们的代码,并将代码迁移到即将发布的 1.1 版本。
  • jQuery 1.1 **1 月 14 日** - 这将是正式发布,与 jQuery 的一周年纪念日相一致。

需要注意的是,**jQuery 1.1 与 1.0 不兼容**。变化将以不同的方式发生,但到目前为止,以下是计划更改的内容

  • 类似 .oneclick() 和 .unclick() 的方法将被 .one(“click”) (新) 和 .unbind(“click”) 所取代。我们发现这些方法的使用频率不足以支持它们所需的 70 多个 API 条目。
  • 选择器 :nth-child(), :gt(), :lt() 和 :eq() 将从 1 开始计数,而不是 0,这与 CSS 规范一致。(这是一个错误修复,但会导致意外的 API 更改)
  • 一些 CSS 辅助方法将被弃用,例如: .color() 和 .background()。你应该开始迁移到使用 .css(“color”) 和 .css(“background”)。
  • 一些属性辅助方法,例如 .title() 和 .rel() 将被弃用。你应该开始使用 .attr(“title”) 和 .attr(“rel”)。

这在很大程度上是为了减少 jQuery API 中包含的方法数量。减少 70 多个条目将显著减少文档的大小,同时使其更易于维护和阅读。

如果你对 jQuery 代码库的发展方向感兴趣,请随时订阅 jQuery 开发邮件列表,在那里 jQuery 开发团队会深入讨论所有这些问题。

**更新:** 我忘了提到,会有一个兼容性插件来帮助你迁移到 jQuery 1.1。这样,你就可以在可预见的将来继续使用 .oneclick() (以及所有其他方法)(即使它可能不在 jQuery 核心代码中)。

认识 jQuery 背后的人

发布于 作者

我想借此机会向大家介绍一下 jQuery 背后的人。关于谁为该项目工作以及他们做了什么来帮助项目发展,说得还远远不够。这个事实,再加上最近的重新组织,使现在成为向你展示 jQuery 在幕后是如何运作的最佳时机。

jQuery 是一项不可思议的工程,有 11 人直接投入时间来推进 jQuery 项目(还有无数人贡献了插件、错误修复和知识)。考虑到他们的工作对于该项目来说是无价的,所以有必要关注所有帮助该项目的人的工作。

预计在接下来的一个月(直到 1 月 14 日 - jQuery 的一周年“生日”),jQuery 项目将会取得许多进展。

现在是参与 jQuery 项目的好时机。找到你感兴趣的团队,加入他们的邮件列表 - 然后参与进来。任何帮助都是受欢迎的。如果你没有时间贡献给该项目,经济贡献总是受欢迎的(并且有助于维护服务器以及你对该项目期望的质量水平)。

所以,不费吹灰之力,我向你介绍: **jQuery 背后的人**。

开发团队

开发团队维护 jQuery 的核心部分: 代码本身; 从项目开始以来一直在推动项目向前发展。它一直在慢慢增长,在最近几个月里,它一直在满足对功能和错误修复的需求。

开发团队的职责就是: 提高 jQuery 代码库的质量(通过添加新功能)并修复现有问题(为每个人创建一个更稳定的库)。此外,该团队还负责记录所有 jQuery API、构建一个稳定的 测试套件 并维护 jQuery 构建系统(通过该系统构建所有 jQuery 代码、文档和测试)。

John Resig (马萨诸塞州,美国)

John 是一位居住在马萨诸塞州波士顿的程序员和作家。他负责管理 jQuery 库的发展方向。这包括对现有(和预期)功能进行批判性分析并做出明智的决策。他还负责管理开发资源以及项目不同方面花费的时间。

Jörn Zaefferer (贝格诺伊斯塔特,德国)

Jörn 是一位居住在德国的程序员。他是 jQuery 开发过程的驱动力,贡献了大量错误修复并发布了 1.0.x 版本中的许多版本。他还负责完全重建 jQuery 测试套件 并编写了大部分测试用例。在过去的几个月里,他一直是 jQuery 开发过程的驱动力,帮助 jQuery 更接近一个优秀的 1.1 版本。

Brandon Aaron (德克萨斯州,美国)

Brandon 是一位居住在德克萨斯州的开发人员,也是开发团队的新成员。他为 1.0.x 版本贡献了大量错误修复,现在他正在对 jQuery 核心的动画和 CSS/DOM 方面进行批判性分析。他希望显着提高代码的速度和清晰度。这将使我们能够执行暂停/恢复动画等操作。

Paul Bakaus (美因茨,德国)

Paul 是一位居住在德国的程序员,也是 jQuery 的赞助贡献者。他与 jQuery 的合作重点是将 jQuery 转变为一个高速库,能够处理困难的大规模拖放操作。他主要负责创建最近的 尺寸插件,并提出对 jQuery CSS 方法的许多改进建议。他所有的工作都与 界面插件 相关联,并试图创建一个高速拖放解决方案。

Stefan Petre (罗马尼亚)

Stefan 是一位居住在罗马尼亚的开发人员,也是 界面插件 的创建者。他与该插件的合作一直受着创建快速、交互式、基于 Web 的应用程序的愿望驱动。界面已被采用为正式赞助的 jQuery 插件(以及其他一些高质量插件)。Paul 和 Stefan 目前正在共同努力提高界面插件的整体质量(包括速度和代码质量)。

Mike Alsup (纽约,美国)

Mike 是一位居住在纽约的开发人员,负责维护 jQuery 的官方 表单插件。他花费大量时间将 Ajax 表单提交过程统一并测试到一个插件中。此外,他的许多工作也渗透到改进 jQuery 核心 Ajax 代码的质量和一致性方面。

推广团队

这是一个全新的 jQuery 团队。该小组的重点是关注 jQuery 社区的脉搏(无论是在 家里 还是在 大范围 内),并尽一切努力提供帮助。这通常意味着构建新的教程,解释困难的问题,或者与其他团队沟通需要更新或更改的内容。

可以将该小组视为一种开发关系 - 将 jQuery 用户的愿望传达给开发/Web/设计团队,同时努力将 jQuery 带给尚未找到它的人。

Rey Bango (佛罗里达州,美国)

Rey Bango 是一位居住在南佛罗里达州的顾问,专门从事富互联网应用程序的开发。他一直在使用 jQuery,并将它的优势传播给大量的人。他已经帮助 许多 知名 的 Cold Fusion 开发人员完成转换。他还负责启动并帮助运行 jQuery 按钮竞赛

Karl Swedberg (密歇根州,美国)

卡尔是一位住在密歇根州的开发者,他维护着网站 Learning jQuery。他撰写了大量的教程,并帮助人们更好地理解 jQuery 的工作原理。他经常活跃在 jQuery 邮件列表中,帮助新用户适应使用该库。作为布道者团队的一员,他将继续他的工作,找到需要帮助理解库的细微之处的人,并为他们提供必要的资源,帮助他们快速上手。

网页团队

网页团队全权负责创建新的 jQuery 网站。这是一个已经筹划了很长时间的团队,但终于开始付诸行动了。这在很大程度上是因为这是一个非常艰巨的项目。

简而言之,在接下来的几周内将推出许多新功能。整个过程将需要一些时间,但结果将非常有意义。您可以期待的首批功能包括一个合适的讨论区(连接到现有的 邮件列表)和一个用于存储所有现有 插件 的合适存储库。

所有这些都将使用 Drupal CMS 构建。最近,我们帮助 Drupal 转向使用 jQuery 作为其主要 JavaScript 库(为即将发布的 5.0 版本提供支持所有基于 Drupal 的网站)。在与 Drupal 开发团队合作时,他们非常乐意以任何可能的方式为新网站提供帮助。除了这种支持外,Drupal 引擎功能强大,提供了我们为新网站提供支持所需的几乎所有功能。

除了 Drupal 开发团队外,以下 Drupal 用户也自愿贡献时间和精力来帮助构建新的 jQuery 网站。

Mike Hostetler (美国,科罗拉多州)

Mike 是一位住在科罗拉多州的开发者。他在设置基于 Drupal 的网站方面拥有丰富的经验。尤其值得注意的是,他已经为另一个开源项目 QCodo 设置了一个 Drupal 社区和插件区域。他已经开始工作,设置了网页团队将要工作的基础区域,并将 SVN 插件存储库直接集成到基于网络的插件存储库中(为所有需要它的人提供统一的访问权限)。他的工作将作为网页团队其他开发工作的基础。

Tane Piper (英国,爱丁堡)

Tane 是一位住在英国的开发者。他在 PHP 和 Drupal 方面拥有丰富的经验。Tane 最近使用 Drupal 设置了网站 getjQuery.org,当时我看到了将他招募进来的机会,帮助他将许多他想要的功能添加到官方 jQuery 网站(例如,讨论区和插件存储库,仅举几例)。

设计团队

设计团队是 jQuery 开发流程中最近添加的另一个团队。该团队的目标是实施 jQuery 网站的全面重新设计,以及所有即将推出的子部分(这与网页团队协同工作,实施其工作的设计)。

该团队包含许多独立的方面(例如,图标设计、品牌设计、图形设计和 XHTML/CSS 组成),这些方面将通过不同的网页项目联系在一起。

Bradley Sepos (美国,俄亥俄州)

Bradley 是一位住在俄亥俄州的独立设计师。他已经开始了一些优秀的工作,创建了一些新的 jQuery.com 设计的优秀模型。他将负责完成 jQuery 主着陆页的完整设计。他还将负责为网站的其余部分(以及整个 jQuery 项目)制定一个完整的品牌和设计指南。

Skye Giordano (美国,密苏里州)

Skye 是一位住在密苏里州的教授,教授网页设计。他一直在与 Bradley 合作设计新网站。在接下来的几周内,他将专注于网站的某个特定部分,从头到尾完全设计。(例如,讨论区或插件区域——这还没有确定。)

帮助您理解 jQuery

发布于 作者

一些 最近文章 讨论了为 JavaScript 库提供“非常好的”教程的必要性。

与往常一样,我们一直在努力使 jQuery 文档更完善,更实用,因此我想提出以下问题:哪些教程可以帮助您更好地使用或学习 jQuery? 请确保它很简单(例如,“构建一个下拉菜单”),而不是非常复杂(例如,“构建一个完整的购物车系统”)。请随时在评论中发布您的建议,这将帮助我们更好地了解人们的需求以及哪些需要更好地解释。

我们最近开始着手对 jQuery 文档维基 进行重组。现在它非常混乱,到处都是。但是,正如您从 新维基的结构 中看到的,我们正在努力更全面地展示 jQuery 本身。在这些主题中,我们希望包含一些有用的“常见案例”教程,这些教程将帮助您更好地理解 jQuery API 中的函数。

所以请您:(考虑到您对 新维基 结构的了解)什么可以帮助您更好地学习和使用 jQuery?

jQuery 1.0.4

发布于 作者

另一个极好的 jQuery 版本已准备好供您使用。此版本包含许多错误修复(如往常一样),以及对 jQuery 的 Ajax 功能的一些急需改进。

与往常一样,如果您对新版本有任何疑问或疑虑,请随时在 jQuery 邮件列表 上进行讨论。如果您认为发现了一个错误,请 将其添加到错误跟踪器

因此,不多说,下面是 jQuery 1.0.4

下载

更改和功能

  • 大量错误修复 (完整列表)
  • $.ajax() 的扩展:$.ajax 接受其他选项:beforeSend、async 和 processData;返回 XMLHttpRequest 以允许手动中止请求,有关详细信息,请参见文档。

    示例:使用 beforeSend 向 Ajax 请求添加额外的标头

    $.ajax({
      type: "POST",
      url: "/files/add/",
      beforeSend: function(xhr) {
        xhr.setRequestHeader( "Content-type", "text/plain" );
      },
      data: "This is the contents of my text file."
    });

    示例:执行同步 Ajax 请求。

    // Get the HTML of a web page and save it 
    // to a variable (the browser will freeze until the 
    // entire request is completed).
    var html = $.ajax({
      type: "GET",
      url: "test.html",
      async: false
    }).responseText;
    
    // Add the HTML into the page
    $("#list").html( html );

    示例:使用 processData 发送 JavaScript 对象。

    // The data to send to the server
    var params = {
      name: "John",
      city: "Boston"
    };
    
    // Send the data, but have it be converted into
    // a format the server can understand (w/ processData)
    $.ajax({
      type: "POST",
      url: "/user/add/",
      data: params,
      processData: true
    });

    示例:在特定延迟时间后中止 Ajax 请求。

    // Perform a simple Ajax request
    var req = $.ajax({
      type: "GET",
      url: "/user/list/",
      success: function(data) {
        // Do something with the data...
        // Then remove the request.
        req = null;
      }
    });
    
    // Wait for 5 seconds
    setTimeout(function(){
      // If the request is still running, abort it.
      if ( req ) req.abort();
    }, 5000);

  • AJAX 模块:公共 $.ajax API 现在在内部使用(用于 $.get/$.post 等);加载脚本现在在所有浏览器中工作得更可靠(Safari 除外,它仍在开发中)。
  • 新的全局 Ajax 处理程序:ajaxSend——在发送 Ajax 请求之前调用。

    示例:使用 ajaxSend 事件向所有 Ajax 请求添加额外的标头。

    $(document).ajaxSend(function(xhr){
      xhr.setRequestHeader("X-Web-Request", "MySite.com");
    });

  • 全局 Ajax 处理程序的扩展:ajaxSend、ajaxSuccess、ajaxError 和 ajaxComplete 获取作为参数传递的 XMLHttpRequest 和设置。

    示例:阻止发送过多数据的任何 POST 请求。

    $(document).ajaxSend(function(xhr,options){
      if ( options.type == "POST" && options.data.length > 1024 )
        xhr.abort();
    });

    示例:为使用 Ajax POST 提交的请求显示特殊消息。

    $("#dataSent").ajaxSend(function(xhr,options){
      if ( options.type == "POST" )
        $(this).show();
    });

  • 事件处理的扩展:pageX 和 pageY 现在在所有浏览器中都可用。(IE 不提供本机 pageX/Y。)

    示例:让工具提示跟随用户的鼠标在页面上移动。

    $(document).mousemove(function(e){
      $("#mousetip").css({
        top: e.pageY + "px",
        left: e.pageX + "px"
      });
    });

  • 改进的文档:$(String) 方法现在有两个单独的描述,一个用于选择元素,另一个用于动态创建 html。
  • FX 模块:动画添加的大多数内联样式现在在动画完成后会被删除,例如,动画高度时的 height 样式(例外:display 样式)。

可扩展的侧边栏菜单屏幕截图

发布于 作者

这是第一个(希望是很多)屏幕截图,它将提供一个快速教程,展示 jQuery 实践中的简单演示。我计划至少再做 2-3 个,这些屏幕截图基于我最近的演讲——希望我能在接下来的几周内陆续发布。(哦,对不起,如果我听起来很累——因为我确实很累。)尽情享用!



jQuery 演示 - 可扩展的侧边栏菜单Vimeo

或者:观看 原始 (.mov, 3.85MB) 视频。(我怀疑这个版本更清晰——但并非所有人都支持 Quicktime 文件)

文件下载

jQuery 按钮竞赛获奖者

发布于 作者

投票 结果已出!以下是 jQuery 按钮竞赛 的获奖者。

获奖者

  1. 一等奖(93 票):两本书——Ajax Design Patterns 和 John Resig 的即将出版的 Pro JavaScript Techniques
    Ned Collyer,澳大利亚:

    HTML:(将此复制到您的网站以使用此按钮)

  2. 二等奖(83 票):一本书——Foundations of Ajax
    Cyril Demars,法国:

    HTML:(将此复制到您的网站以使用此按钮)

  3. 三等奖(75 票):10 美元现金,您可以选择将其存入您的 PayPal 帐户!
    Altstack,日本:

    HTML:(将此复制到您的网站以使用此按钮)

我对结果非常满意,作品的大小和风格都很不错——每个人都有一些东西。如果每位获奖者都可以 联系我,我们会立即安排您的奖品。

请记住:即使您 最喜欢的参赛作品 没有获奖,这并不意味着您不能用它来推广 jQuery。

另外,jQuery 网站的重新设计(和重组)正在如火如荼地进行中。有一些专业的网页设计师慷慨地贡献自己的时间,使新网站栩栩如生。预计很快就会看到这方面的一些更新。

我要再次感谢所有参与者——这是一场很棒的比赛。我非常高兴,希望您也是!

为 jQuery 按钮投票

发布于 作者

投票现已结束! 感谢大家的参与!结果可以在以下位置找到:jQuery 按钮比赛获胜者.


下一轮jQuery 按钮比赛即将到来!经过仔细评审,评委们将 123 个 jQuery 按钮提交作品缩减至 30 个。我们对提交作品的质量和数量感到非常惊讶,并想亲自感谢所有参与者。有很多优秀的参赛作品,但最终以下 30 个按钮因其清晰度、构图和独创性而脱颖而出。

现在轮到您来帮忙了!为了将结果缩减到最终的三个获胜按钮,我们需要您投票选择您喜欢的按钮。您可以投票给任意数量的按钮,但每人只能投票一次。

投票选出您最喜欢的按钮

您的投票会被记录,并且只会被计算一次——但您可以随意投票给您喜欢的任何按钮。

投票将于周一晚上 11:59(美国东部时间,GMT -0500)结束。所以现在就投票吧,让您的决定发挥作用!