jQuery 1.1.4:更快,更多测试,为 1.2 做好准备

发布于 作者

我们很高兴地宣布 jQuery 的最新版本:jQuery 1.1.4。如果没有任何重大错误,此版本将是 1.1.x 分支的最后一个版本 - 引导我们进入 9 月发布的 jQuery 1.2

您可以从 jQuery Google Code 页面下载此版本

下载

改进

除了所有正常的 错误修复 之外,此版本还包含许多改进。

任何名称的 jQuery

jQuery 已经迈出了重要一步,成为第一个能够完全重命名自己的主要 JavaScript 库。以前,提供了重命名常用的 ‘$’ 缩写为 ‘jQuery’ 的功能 - 但现在您还可以重命名 ‘$’ 和 ‘jQuery’。这带来了两个非常棒的结果

  • 您现在可以在同一个页面上同时包含多个版本的 jQuery。
  • 您现在可以将 jQuery 嵌入到其他对象和库的命名空间中,例如
    // With the Dojo Toolkit
    dojo.jquery = jQuery.noConflict(true);
    dojo.jquery("#elem div").slideDown("slow");
    // or with Yahoo UI
    YAHOO.query = jQuery.noConflict(true);
    YAHOO.query("span.hidden").removeClass("hidden");

速度改进

如果没有一些速度改进,版本发布将毫无意义。我们抓住机会超越之前发布的所有速度测试套件,并提高 jQuery 中三个最常用的部分的速度:ID 选择器、标签名选择器和 each() 循环。使这些项目尽可能快至关重要,因为它们有可能被无限次重复使用。

这是一个用于分析这三个更改速度的 测试套件

$(“#id”) 改进

浏览器 jQuery 1.1.3 jQuery 1.1.4 改进百分比
IE 6 651ms 70ms 830%
Firefox 2 1355ms 27ms 4919%
Safari 3 101ms 14ms 620%
Opera 9 270ms 62ms 335%
平均改进 1676%

$(“elem”) 改进

浏览器 jQuery 1.1.3 jQuery 1.1.4 改进百分比
IE 6 661ms 451ms 47%
Firefox 2 1717ms 143ms 1100%
Safari 3 99ms 83ms 19%
Opera 9 226ms 198ms 14%
平均改进 295%

.each() 改进

浏览器 jQuery 1.1.3 jQuery 1.1.4 改进百分比
IE 6 200ms 30ms 567%
Firefox 2 468ms 29ms 1514%
Safari 3 17ms 11ms 54%
Opera 9 45ms 25ms 80%
平均改进 554%

测试套件大修

这是一个非常重要的消息 - 对于大多数开发者来说尤其如此。为了稳定性,jQuery 测试套件 已从根本上进行了彻底的重新设计和改进。一套全新的动画和 Ajax 测试已集成进来,使 jQuery 的总测试数量达到超过 800 个测试

此外,测试套件 在我们支持的所有主要浏览器中均通过,没有任何错误:Firefox 2、Safari 3、Internet Explorer 6 和 Opera 9(出于简洁起见,Safari 2 和 IE 7 未显示)。证明

将来,我们将努力提高对 jQuery 的事件、属性和 CSS 部分的覆盖范围 - 毫无疑问,很快就会达到超过 1000 个测试。

此外,需要注意的是,jQuery 测试套件现在已嵌入到 Mozilla 测试套件中 - 在即将发布的 Firefox 3 版本的每次提交中运行。您可以放心,在 Firefox 的最新版本中,一切都将按预期正常运行。

错误修复

此版本修复了 53 个票证。您可以在 错误跟踪器 上阅读完整的详细信息(包括 jQuery 1.1.3.1 中的修复)。

已解决了许多重大问题,包括与 HTML 脚本评估、Safari CSS 计算样式访问和 Ajax 设置操作相关的问题。

新功能

引入了一些新功能。其中前两个,.slice() 和 :has(),将成为 jQuery 1.2 的一部分,但它们的存在是由一些已弃用的功能(见下文)所决定的。对 extend() 和 noConflict() 的新更改是为了解决 jQuery 中一些长期存在的问题。

.slice()

您可能在 JavaScript 数组中存在的 .slice() 方法中认识到此方法名称 - 您很幸运,因为它的行为完全相同。这是用于将 jQuery 对象切开并获取其中元素的绝佳方法。以下所有都是使用 slice() 方法的有效方式

$("div").slice(0,1); // First div
$("div").slice(-1); // Last div
$("div").slice(1,-1); // All divs but the first and last
$("div").slice(1,3); // The second and third div
$("div").slice(7,8); // The eighth div

:has()

这个新的选择器是当前检查另一个元素内部元素的方式的替代方法(div[p])。您现在可以使用此选择器,就像使用那个特定的 XPath 选择器一样,例如

// All divs with a paragraph inside
$("div:has(p)")
// All anchors with an image inside
$("a:has(img)") 
// All divs that have an anchor inside that have an image inside
$("div:has(a:has(img))")

深层递归.extend()

这是 jQuery .extend() 方法的一个经常被请求的补充。此更改允许您深度合并嵌套对象(而不是让它们相互覆盖)。这可以通过一个例子最好地说明

// Normal .extend()
jQuery.extend(
  { name: "John", location: { city: "Boston" } },
  { last: "Resig", location: { state: "MA" } }
);
// Result:
// => { name: "John", last: "Resig", location: { state: "MA" } }
// New Deep .extend()
jQuery.extend( true,
  { name: "John", location: { city: "Boston" } },
  { last: "Resig", location: { state: "MA" } }
);
// Result:
// => { name: "John", last: "Resig",
//      location: { city: "Boston", state: "MA" } }

.noConflict(true)

如前所述,.noConflict() 的此补充允许您完全重命名 ‘jQuery’ 命名空间和 ‘$’ 缩写,同时还可以回滚这些引入可能进行的任何更改。您可以像这样使用此新的快捷方式

// Give jQuery a custom name:
var jq = jQuery.noConflict(true);
jq("#id div").hide();

// Both Fail - $ and jQuery have been renamed:
$("#id div").hide();
jQuery("#id div").hide();

此技巧也可以用于将 jQuery 推送到现有命名空间中,例如

// Put jQuery in a namespace:
var obj = {};
obj.jq = jQuery.noConflict(true);
obj.jq("#id div").hide();

已弃用的功能

我们在 jQuery 1.1.4 中弃用了一些方法,为即将发布的 jQuery 1.2 中的 API 更改做准备。在可能的情况下,我们提供了用于执行操作的替代方法。

与 jQuery 1.1 版本一样,jQuery 1.2 将提供一个向后兼容插件。因此,如果您希望继续使用这些特定技术,您可以使用该插件并继续这样做。

此外,为了处理 XPath 更改,将发布另一个独立的插件,用于处理 jQuery 中的 XPath 选择器功能。此插件将在 jQuery 1.2 版本发布时提供。

选择器

$("div//p") XPath 后代选择器
请使用 CSS$("div p")选择器代替。或者,在 jQuery 1.2 发布时,使用新的 XPath 插件。

$("div/p") XPath 子选择器
请使用 CSS$("div > p")选择器代替。或者,在 jQuery 1.2 发布时,使用新的 XPath 插件。

$("p/../div") XPath 父选择器
请使用$("p").parent("div")选择器代替。或者,在 jQuery 1.2 发布时,使用新的 XPath 插件。

$("div[p]") XPath 包含谓词选择器
请使用新的$("div:has(p)")选择器代替。或者,在 jQuery 1.2 发布时,使用新的 XPath 插件。

$("a[@href]") XPath 属性选择器
注意:虽然此选择器在此版本中被弃用,但它不会在 jQuery 1.2 中删除。在 jQuery 1.2 中,建议您使用 CSS 选择器$("a[href]")代替。或者,在 jQuery 1.2 发布时,使用新的 XPath 插件。

DOM 操作

$("div").clone(false)
使用参数调用 clone 方法已被弃用(clone 方法本身保留了下来)。不要再调用.clone(false)您现在应该这样做.clone().empty()代替。

DOM 遍历

$("div").eq(0)
此方法已被弃用,建议使用新的 .slice() 方法(它与数组的 slice 方法的工作方式相同。您可以像这样复制 .eq()

$("div").slice(0,1);

此外,.eq(0) 可以通过以下方式复制

$("div:eq(0)")
$("div:first")

$("div").lt(2)
此方法已被弃用,建议使用新的 .slice() 方法(它与数组的 slice 方法的工作方式相同。您可以像这样复制 .lt()

$("div").slice(0,2);

此外,.lt(2) 可以通过以下方式复制

$("div:lt(2)")

$("div").gt(2)
此方法已被弃用,建议使用新的 .slice() 方法(它与数组的 slice 方法的工作方式相同。您可以像这样复制 .gt()

$("div").slice(3);

此外,.gt(2) 可以通过以下方式复制

$("div:gt(2)")

Ajax

$("#elem").loadIfModified("some.php")
此便利方法已被删除,建议使用 $.ajax() 的长格式

$.ajax({
  url: "some.php",
  ifModified: true,
  success: function(html){
    $("#elem").html(html);
  }
});

$.getIfModified("some.php")
此便利方法已被删除,建议使用 $.ajax() 的长格式

$.ajax({
  url: "some.php",
  ifModified: true
});

$.ajaxTimeout(3000)
此便利方法已被删除,建议使用更明确的 $.ajaxSetup() 的长格式

$.ajaxSetup({timeout: 3000});

$(...).evalScripts()
此方法在 jQuery 中不再需要 - 在将 HTML 字符串注入到文档中时,所有包含在其中的脚本都会自动执行。不需要替代方法。


与往常一样,如果您在 jQuery 1.1.3.1 和 jQuery 1.1.4 之间遇到任何错误,请告诉我们。谢谢!