jQuery 1.2 发布

发表于 作者

下载

jQuery 1.2
jQuery 压缩版 (使用 gzip 压缩后 14kb)
jQuery 打包版 (26kb)
jQuery 常规版 (77kb)

新功能

部分 .load()

部分 .load() 允许您将 HTML 文档的片段加载到您的页面中,并通过 jQuery 选择器进行筛选。这与普通的 Ajax .load() 类似,只是您在检索的 URL 后面立即指定一个选择器。

跨域 $.getScript

您现在可以使用 getScript 动态加载并执行远程脚本。这可以用于加载 jQuery 插件或其他代码模块。

跨域 $.getJSON (使用 JSONP)

JSONP 是一种允许您跨多个域传输 JSON 数据的技术。

jQuery 现在原生支持 JSONP - 如果您尝试从远程 URL 加载 JSON(通过 $.getJSON 或 $.ajax),那么将提供一个额外的回调函数供服务器解释。此外,如果服务器需要一个特殊的字段来指定您自己的回调函数名称,您可以在查询字符串中包含一个 “=?”,以提供该字段。

序列化大修

.serialize() 方法进行了重大改动,将 jQuery Forms 插件 提供的功能移植回 jQuery 核心。这意味着表单数据的序列化现在应该与浏览器通常发送到服务器的数据非常接近。

此外,还引入了一个新的 .serializeArray() 方法,它会序列化所有表单和表单元素(与 .serialize() 方法相同),但会返回一个 JSON 数据结构供您使用。这在处理您希望处理的大型表单时特别有用。

禁用缓存

在 $.ajax 调用中,您现在可以通过提供一个额外的 cache: false 标志来防止浏览器缓存请求。这将确保您可能执行的任何 GET 请求都将绝对检索页面的最新版本。
cache: false 始终向服务器发送新请求。

« 返回完整的 [[Release:jQuery 1.2|jQuery 1.2 版本说明]]。

.val() 大修

简单的 .val() 方法得到了很多关注,使其更加有用。您现在可以设置一组单选按钮和复选框的选中状态,以及设置选择选项的选中状态。您可以通过传入您要选择/选中项的值或名称的数组来实现这一点。(在 Firefox2 中失败,单选按钮在 IE7 中失败)现在可以在选择元素上调用 .val(),以获取它们的值。

.offset()

从 [https://jqueryjs.cn/plugins/project/dimensions Dimensions 插件] 中移植过来,[[CSS/offset|.offset()]] 方法允许您找到元素相对于文档左上角的偏移量(以 “top” 和 “left” 表示)。

.height() / .width() 用于文档和窗口

.height() 和 .width() 现在可以在文档和窗口对象上使用;允许获取文档主体和窗口视窗的高度和宽度。

.stop()

停止所有指定元素上当前运行的动画。如果任何动画已排队等待运行,那么它们将立即开始。

%/em 动画

动画现在可以使用 em 值或百分比值以及像素值进行。它们甚至可以在同一个 animate() 调用中混合使用。

颜色动画

一个新的 [https://jqueryjs.cn/plugins/project/color 官方 jQuery 插件],通过使用新的 jQuery.fx.step 支持动画元素的 CSS 颜色。

支持的 CSS 属性:‘backgroundColor’;‘borderBottomColor’;‘borderLeftColor’;‘borderRightColor’;‘borderTopColor’;‘color’;‘outlineColor’。

颜色可以指定为预设的一系列命名颜色;以 rgb 格式(例如 ‘rgb(221,221,221)’);十六进制(例如 ‘#dddddd’);或简写十六进制(例如 ‘#ddd’)。

相对动画

相对动画的行为与普通动画相同,但它们的单位被指定为相对于元素当前位置的相对位置,而不是绝对位置。

您可以通过将数字和(可选)单位写成字符串,并在前面加上 “+=”(用于相对于当前位置添加的相对动画)或 “-=”(用于从当前位置减去的相对动画)来指定相对动画。

同步动画

与以往一样,jQuery 中的动画会自动排队,这允许 animate() 调用进行链式操作。

现在,如果在 animate() 的选项中包含 queue: false 标志,那么该动画将不会进入队列,而是会立即开始运行。

.queue() / .dequeue()

两个现有的内部 jQuery 排队方法已进行调整,并变得更加有用,适用于一般动画用途。

.queue() 可用于访问和操作特定元素的动画队列。

添加了以下排队方法
* .queue()
返回对第一个元素队列的引用(这是一个函数数组)。
* .queue(Function)
将一个新的函数添加到所有匹配元素队列的末尾,该函数将被执行。
* .queue(Array)
将所有匹配元素的队列替换为这个新的队列(函数数组)。

并添加了以下出队方法:.dequeue() 从队列的开头移除一个排队的函数并执行它。

可扩展动画

您现在可以使用一个函数扩展 jQuery 动画,该函数在动画的每个步骤(更改正在动画的元素的样式)中被触发。它可以扩展到特定的 CSS 属性,甚至可以创建一个自定义动画类型。

例如,您可以将一个额外的 step 函数传递给 .animate(),以执行动画同步等操作。

命名空间事件

这是一个对插件作者特别有用的功能。您现在可以为绑定的事件处理程序提供一个私有名称,允许您稍后再次移除它们(而无需维护所有您正在监督的处理程序的私有缓存)。

.triggerHandler()

一个新的方法,可以与原始的 .trigger() 一起使用。此方法会触发元素上所有绑定的事件处理程序(针对特定事件类型),而不会执行浏览器的默认操作。

.wrapInner() / .wrapAll()

.wrapInner() 用于包装每个匹配元素的内部子内容(包括文本节点);.wrapAll() 将匹配集合中的所有元素包装在一个包装元素中(这与 .wrap() 不同,在 .wrap() 中,匹配集合中的每个元素都将被一个元素包装)。

.replaceWith() / .replaceAll()

replaceWith 将所有匹配的元素替换为指定的 HTML 或 DOM 元素。.replaceAll 将由指定选择器匹配的元素替换为匹配的元素。

带有事件的克隆

.clone() 方法现在可以接受一个可选参数,如果为 true,它还会克隆所有克隆元素上的所有事件处理程序。

:has(selector)

这将匹配所有包含至少一个匹配指定选择器的元素的元素。这是 XPath 选择器[selector]的替代,它包含在 jQuery 1.1 和更早版本中 - :has() 的行为完全相同。

:header

这将匹配所有标题(h1、h2、h3、h4、h5 和 h6 标签)。这在为页面构建目录时非常有用(尤其是在标题的顺序很重要的情况下)。

:animated

匹配当前正在至少一个动画中被动画化的元素。

XPath 选择器插件

由于 XPath 选择器已从 jQuery 1.2 中删除,因此引入了一个新的 [https://jqueryjs.cn/plugins/project/xpath XPath 选择器插件]。您可以使用此插件获得自 jQuery 创建以来就存在的 CSS/XPath 混合选择器。

.map()

将一组元素转换为另一组值(这些值可能是也可能不是元素)。您可以使用它来构建值列表、属性、CSS 值 - 甚至执行特殊、自定义的选择器转换。这作为使用 $.map() 的方便方法提供。

.prevAll() / .nextAll()

允许您找到当前元素之前或之后的所有同级元素。

.slice()

此方法的行为与数组的原生 .slice() 方法相同,允许您将 jQuery 集合切成可重复使用的部分。

.hasClass()

新的 .hasClass() 方法是一个简单的方便方法,它位于 [[Traversing/is|.is()]] 之上,处理其最常见的用例(检查类名)。

.andSelf()

将 jQuery 堆栈上的两个先前集合合并为一个匹配集合。

.contents()

查找匹配元素内部的所有子节点(包括文本节点)。如果您对 iframe 元素执行此操作,它会返回其内部文档。

如何升级

如果您尚未这样做,请升级到 jQuery 1.1.4。这将有助于消除您使用的 jQuery 最后版本和当前版本之间的大多数意外情况。浏览弃用和移除的功能列表,确保您在代码中没有使用任何这些功能。如果您使用的任何插件仍然需要一些旧的功能,您可以随时包含 jQuery 1.1 兼容性插件或 XPath 兼容性插件,具体取决于情况。

jQuery 1.1 兼容性插件

在 jQuery 1.2 版本中,删除了一些功能。包含此插件将使您在 jQuery 1.2 的副本中拥有所有已删除的功能。

插件的典型用法如下所示

XPath 兼容性插件

由于 XPath 选择器已从 jQuery 1.2 中删除,因此引入了一个新的 XPath 选择器插件。您可以使用此插件获得自 jQuery 创建以来就存在的 CSS/XPath 混合选择器。

颜色动画插件

一个新的官方 jQuery 插件,通过使用新的 jQuery 动画 API 支持动画元素的 CSS 颜色。支持的 CSS 属性包括:‘backgroundColor’、‘borderBottomColor’、‘borderLeftColor’、‘borderRightColor’、‘borderTopColor’、‘color’、‘outlineColor’。

已删除的功能

我们移除了 jQuery 1.2 中一些使用较少、容易造成混淆或效率低下的方法。在可能的情况下,我们提供了执行这些操作的替代方法。

在 jQuery 1.2 中,与 jQuery 1.1 版本一样,提供了一个向后兼容插件。因此,如果您希望继续使用这些特定方法,则可以使用该插件继续进行。

此外,为了处理 XPath 更改,另一个单独的插件已可供使用,它将在 jQuery 中处理 XPath 选择器功能。

DOM 操作

使用参数调用 clone 方法即将被弃用(clone 方法本身将保留)。不要再调用.clone(false)您现在应该使用.clone().empty()代替。

DOM 遍历

.eq() 方法即将被弃用,将使用新的 .slice() 方法(其工作方式与数组的 slice 方法相同)。您可以像这样复制 .eq()

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

.lt() 方法即将被弃用,将使用新的 .slice() 方法(其工作方式与数组的 slice 方法相同)。

.gt() 方法即将被弃用,将使用新的 .slice() 方法(其工作方式与数组的 slice 方法相同)。

.contains() 方法即将被弃用,将使用普通的 .filter() 语句。您可以像这样复制 .contains()

$("div").filter(":contains(Your Text)");

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 字符串中的所有脚本都会自动评估。不需要替代方法。

jQueryCamp '07(波士顿)

发布时间: 作者:

我们将在 10 月 27 日在马萨诸塞州波士顿举办首个 为期一整天的 jQuery 小型会议。目前,jQuery 团队 的大部分成员将出席并发表演讲 - 因此,如果您有兴趣与一些帮助 jQuery 成形的人员会面,并与其他开发人员聊天,那么这是一个绝佳的机会!

本次活动将在 Ajax Experience 会议 之后立即举行。许多人参加了这两个活动,通常由其雇主作为商务旅行赞助。如果您需要更多有关活动的详细信息以进行协调,请联系

务必将自己添加到 注册列表 中,以便我们知道需要多大的场地。希望在那儿见到大家!

如果您或您的公司有兴趣赞助此活动,请联系 John Resig。我们通常需要几百美元来帮助支付食物费用 - 如果我们获得了足够的资金,我们将为参加者提供 T 恤。

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.2 中,与 jQuery 1.1 版本一样,将提供一个向后兼容插件。因此,如果您希望继续使用这些特定技术,则可以使用该插件继续进行。

此外,为了处理 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 之间遇到任何错误,请告诉我们。谢谢!

旧金山 jQuery 聚会和 Ajax 体验

发布日期: 作者:

旧金山 jQuery 聚会和 Ajax 体验西部

2007 年 Ajax 体验西部
Ajaxian 和 TechTarget 的朋友们组织了一场很棒的会议,时间是 7 月 25 日至 27 日。演讲者来自各个领域,他们将介绍关于丰富 Web 开发世界中最新和最优秀的主题。查看完整的演讲者列表和日程安排。演讲者包括 Mozilla 的 CTO、JavaScript 创建者Brendan
Eich
。Internet Explorer 平台架构师Chris Wilson,以及 Adobe 的首席软件架构师Kevin Lynch。这场会议将会是一个生动有趣的信息交流平台。

更令人兴奋的是,还会有两名 jQuery 代表进行演讲:John ResigGlen Lipka

John 将进行 3 场演讲,其中两场关于 jQuery

此外,John 还将在周五午餐时参加一个关于 Ajax 未来发展的讨论小组。

Glen 将进行一场关于 jQuery 的演讲

还会有其他许多 jQuery 用户和团队成员参加(包括Yehuda KatzMichael Geary)。

旧金山 jQuery 聚会

7 月 26 日,我们将邀请 jQuery 社区的所有成员在Gordon Biersch 旧金山啤酒厂聚会,一起喝酒、吃点心、调试代码。我们是开源的,所以请带上您的信用卡(BYOCC)。

Yehuda Katz 为前 1000 25 位为社区成员买饮料的 jQuery 用户准备了特别的 jQuery SWAG。此外,我们应该还会有一些新出版的《学习 jQuery》书籍的额外副本,该书由Karl Swedberg & Jonathan Chaffer 撰写。

我们希望您能参加。请注册,我们在那儿见!

更多信息
http://upcoming.yahoo.com/event/220122/

jQuery 1.1.3.1

发布日期: 作者:

这是一个针对 jQuery 1.1.3 的快速错误修复版本。在 1.1.3 版本发布后,出现了大约六个主要问题,我们认为这些问题很重要,需要立即解决,并进行后续发布。完整的已解决问题列表可以在错误跟踪器上找到。

如果您尚未升级到 1.1.3,请直接升级到 1.1.3.1。此外,如果您在使用 1.1.3 时遇到任何问题,请尝试此版本。

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

下载

与往常一样,如果您遇到任何问题,请务必通过向jQuery 错误跟踪器提交错误报告来告知我们。

关于客户端表单验证和框架

发布日期: 作者:

Interaction Design 博客上有一篇关于客户端表单验证的好文章。它描述了在构建自己的客户端验证框架时需要牢记的重要事项。

当然,除了构建自己的框架外,还可以使用现有的框架。这种方法带来了一些重要的优势,其中包括“足够多的眼睛,所有的错误都很浅”的原则。

让我们看看验证插件在文章中列出的要点上目前的表现如何

1. 使用表单验证框架或表单验证库

已完成。

2. 专注于解决主要的验证问题

一旦您开始开发和实施验证,就很容易尝试解决所有类型的输入所需的潜在验证。我的建议是尝试在前端验证中捕获 75-85% 的潜在用户输入错误。尝试捕获所有错误会导致以下问题

  • 代码膨胀,您的框架会变得太大
  • 由于可能出错的验证组合太多,因此几乎不可能测试客户端验证
  • 业务规则将移至前端。(稍后将介绍如何通过使用 Ajax 来避免这种情况)

嗯,代码膨胀是一个问题,我试图通过大量的重构来解决它。当前的代码库有 1446 行(大约一半是内联文档)。几周前,Dan G. Switzer 检查了该插件,并在几个小时内为特定的代码相关问题提供了极大的帮助。

关于测试:验证插件的当前测试套件运行了 65 个测试,包含超过 350 个断言。jQuery 的测试套件运行了大约 500 个断言。我认为我的代码覆盖率很好,因为我尽可能地为所有出现的错误添加了测试。回归问题很可能会被测试套件捕获,同时它在开发过程中也有很大帮助。

针对浏览器事件和使用 AJAX 进行测试仍然是一项非常困难的任务,即使使用 jQuery 测试套件中的 AJAX 支持也是如此。

关于业务规则移至前端:这更多是一个设计和架构问题。使用即将发布的 1.2 版本中支持的 AJAX 来避免这种情况。

3. 在提交表单之前进行表单验证

这里的意思是在用户输入内容时进行验证,而不是等待提交事件。1.0 版本之前的版本允许您指定单个事件来检查单个元素,例如 blur 或 keyup。这在某些情况下有效,而在其他情况下则令人烦恼,因为用户点击输入框后会看到令人讨厌的错误消息。为了解决这些问题,在 1.1 版本中发布了更复杂的方法。基本上,该插件会等到用户模糊了已输入不完整内容的字段后才会进行验证。如果该字段已被标记为无效(例如,在尝试提交无效表单后),则所有元素都会在 keyup(文本输入)或 click(复选框、单选按钮)时进行验证。当前的实现还不完美,当然,欢迎反馈。

4. 使用 Ajax 表单验证来验证业务数据输入

1.2 版本中 AJAX 验证的一个小预告

$("#myform").validate({
  rules: {
    username: {
      required: true,
      minLength: 2,
      remote: "users.php"
    }
  },
  messages: {
    username: {
      required: "Enter your username",
      minLength: "At least 2 characters are necessary",
      remote: String.format("The name {0} is already in use")
    }
  }
});

API 允许您使用与本地验证相同的声明性风格来进行远程验证。String.format 创建另一个函数,该函数稍后将使用用户输入的值调用,从而生成类似“名称 asdf 已经存在”的错误消息。

查看AJAX 验证预览以获取更多详细信息。

5. 对您的 JavaScript 表单验证进行广泛的测试

这在上面已经涵盖了。

6. 将输入数据重写为有效格式

这很有趣。基本的想法是接受“20070515”作为有效的日期,将其转换为“2007-05-15”以进行验证。我还没有看到任何针对此功能的具体请求,因此,如果有谁感兴趣,请告诉我。同时,一个好主意可能是使用掩码输入插件来帮助用户输入正确的格式。

7. 在设计过程的后期添加 JavaScript 表单验证

这是一个非常好的建议。由于 jQuery 的非侵入性,它在这方面帮助很大。无需任何 JavaScript 即可设计表单,然后在后期添加它,尽可能地改善用户体验(UX)。

8. 使脚本与 i18n 和 l10n 兼容

换句话说:避免硬编码字符串,而是尽可能容易地用当前语言环境替换它们。

验证插件允许您通过简单地覆盖默认消息来翻译所有默认消息。只需在插件文件之后包含一个文件,其中包含类似以下内容的信息

$.extend($.validator.messages, {
  required: "Eingabe nötig",
  email: "Bitte eine gültige E-Mail-Adresse eingeben",
  ...
});

这种方法非常有效。您可以在同一个文件中收集其他翻译,例如日期选择器的标签。

然后,包含适用于用户语言环境的正确翻译文件仅仅是一个服务器端问题。

其他问题,例如不同的数字或日期格式,可以通过编写自定义方法或覆盖默认方法(在 $.validator.methods 中)来解决。默认情况下提供德语日期和数字格式的方法:date(默认的 JavaScript Date 格式)、dateISO(1990-01-01 或 1990/01/01)、dateDE(01.01.1990 或 2.12.2012)以及 number(100,000.59)和 numberDE(100.000,59)。尽管目前还没有任何方法验证任何范围,例如 0001-13-50 也是有效的 ISO 日期。

9. 向验证框架添加回调函数

验证插件提供的最重要的回调函数是 submitHandler。当提交有效表单时,它会被调用,允许您例如通过 AJAX 提交表单。其他可用函数包括 errorPlacement,用于自定义错误消息在 DOM 中的插入位置,例如用于表格布局。

在 1.2 版本中,添加了一个用于无效表单的回调函数,该函数在每次用户提交表单且表单无效时被调用。到目前为止,showErrors 回调函数可以用于此目的,但它也会在每次验证单个元素时被调用。新的回调函数可以用于更新类似“表单下方有 6 个问题”的消息。可以使用现有的 errorContainer 选项来显示和隐藏此类消息。

10. 使您的框架/库可扩展

使用您自己的内容扩展验证插件的最重要方法是 $.validator.addMethod。它允许您添加任何所需的验证方法。通过将您自己的自定义方法保存在自己的文件中,可以轻松地更新插件本身。

AJAX 验证的第一种方法很可能会发展为 $.validator.addRemoteMethod,提供所有必要的远程 AJAX 方法的样板代码,但允许您使用任何所需的协议。使用 GET 或 POST、将单个值或整个表单发送到服务器、服务器返回 true 或 false,或者返回用于显示的错误消息,无论您首选或需要使用哪种格式,都没有关系。当然,实现该方法需要更多工作,但它提供了极大的灵活性。您对此的反馈至关重要,因为我不想随意猜测您可能需要什么。

希望这能很好地说明表单验证的当前状态及其进展,并能帮助您决定是否使用它。

jQuery 1.1.3:速度提高 800% 以上,仍然只有 20KB

发布日期: 作者:

我很高兴地宣布 jQuery 1.1.3 版本发布。经过数月的测试、开发和更多测试,我们现在发布了一个非常稳定的版本,可以下载。该版本修复了大约80 多个错误,并进行了一些增强。主要亮点包括

  1. 速度提升,DOM 遍历速度比 1.1.2 版本快 800% 以上。
  2. 事件系统重写,更优雅地处理键盘事件。
  3. 效果系统重写(以及配套的 fx 测试套件),特点是执行速度更快,跨平台支持更好。

更新 - 7 月 4 日我们刚刚完成了一个快速错误修复版本,版本号为 1.1.3.1,修复了 几个未解决的问题

下载

像往常一样,如果您发现此版本有任何错误,请发布到 jQuery 错误追踪器

1.1.3 特性

选择器速度大幅提升

由于用户的强烈要求,我们深入研究并对 jQuery 的选择器引擎进行了重大改进。以下是对 jQuery 本身速度提升的细分。所有数据都基于 SlickSpeed 测试套件。

浏览器 jQuery 1.1.2 jQuery 1.1.3 改进百分比
IE 6 4890ms 661ms 740%
Firefox 2 5629ms 567ms 993%
Safari 2 3575ms 475ms 753%
Opera 9.1 3196ms 326ms 980%
平均改进 867%

此外,我们还使用 SlickSpeed 测试套件,对一些流行的选择器库进行了改进代码库的测试。

浏览器 Prototype jQuery Mootools Ext Dojo
IE 6 1476ms 661ms 1238ms 672ms 738ms
Firefox 2 219ms 567ms 220ms 951ms 440ms
Safari 2 1568ms 475ms 909ms 417ms 527ms
Opera 9.1 220ms 326ms 217ms 296ms 220ms

查看 速度套件 结果时需要注意几点

  • 我们的速度比 jQuery 1.1.2 快 800% 以上。
  • 我们在最流行的浏览器 Internet Explorer 6 中是最快的框架。
  • 我们是唯一一个不会给出错误结果的框架。
  • 所有这些都不会对您造成任何损失 - jQuery 仍然是您一直期待和喜欢的 20KB。

新选择器

Unicode 选择器:对于那些想要使用 Unicode 属性值、ID、类名或标签名的用户来说,这是一个巨大的补充。您现在可以直接在 jQuery 选择器中使用它们

$("div.台北")
$("div#台北")
$("foo_bar台北")
$("div[@id=台北]")

转义选择器:您可以使用此功能(这是一个经常被请求的功能)来选择使用特殊字符的 ID(或其他选择器)的元素,例如,这将找到 ID 为“foo.bar”的 div

$("div#foo\\\\.bar")

不等式选择器:虽然此选择器不是 CSS 规范的一部分,但它经常被使用,并且包含在其他选择器库中,因此我们决定将其添加进来

$("div[@id!=test]")

:nth-child() 改进:此选择器允许您定位特定子元素。从 jQuery 的开始,我们就支持 :nth-child(1) 和 :nth-child(odd) 等选择器,现在我们添加了高级 :nth-child 选择器,例如

$("div:nth-child(2n)")
$("div:nth-child(2n+1)")
$("div:nth-child(n)")

空格分隔的属性:在 jQuery 1.0 中被移除后,此选择器现在应用户的强烈要求被重新引入。它允许您定位空格分隔属性(如类或 rel 属性)中的单个项目。

$("a[@rel~=test]")

动画改进

速度:动画现在明显更快更流畅。此外,您可以运行更多同时动画,而不会出现任何速度下降。

测试:我们现在有一个专门用于动画的测试套件 - 这使我们能够修复许多以前无法定位的动画错误。

DOM 事件监听器

在内部,jQuery 事件系统已进行了彻底的检修,以使用 DOM 事件系统,而不是传统的“onclick”样式的绑定事件处理程序。此改进允许您在使用库时更加不显眼(不会影响周围其他库的流程)。此外,它还有助于解决绑定到 Iframe 的事件监听器存在的一些未解决问题。

事件规范化

在规范化键盘和鼠标事件方面取得了一些重大进展。您现在可以访问 event.which 属性以获取有关所按特定键或按钮的大多数详细信息。

多个 .is()

.is() 方法现在可以接受多个选择器,用逗号分隔。这使您可以测试 jQuery 集与多个选择器的匹配情况。

$("div").is(":visible, :first")

浏览器版本

插件作者普遍要求的功能是,能够确定用户使用的是哪个浏览器版本。我们现在公开了一个额外的属性,可以通过它访问此信息。

jQuery.browser.version

更多错误修复

请查看 工单列表 以获取此版本中解决的所有问题的完整列表。

jQuery 的未来

我们一直非常关注 jQuery 项目的进展方向。我们现在专注于许多不同的方面,但首要任务仍然是推动 jQuery 核心库的进步。我们已经规划了接下来的两个版本,您可以在下面了解更多信息

jQuery 1.1.4

这将是 jQuery 1.1 分支的最后一个版本 - 另一个包含一些小改进的错误修复版本。此版本还将根据即将发布的 jQuery 1.2 版本将一些方法标记为已弃用。

我们目前计划在 7 月底发布此版本。

jQuery 1.2

这将是 jQuery 的下一个主要版本,包含大量新功能。此版本的完整详细信息可以在 jQuery 1.2 路线图 中找到。

我们非常感谢您对此版本的评论和反馈。它仍在规划中,因此一切尚未完全确定。我们目前计划在 8 月底发布 jQuery 1.2。

jQuery 图书

我们现在有 4 本 jQuery 书籍正在编写,更重要的是,它们都是由 jQuery 团队成员编写的(这样您就知道您获得的信息是可靠的)。

书籍及其作者如下

  • Learning jQuery 由 Karl Swedberg 和 Jonathan Chaffer 撰写 - 预计于 2007 年 7 月初出版(Packt Publishing)。
  • jQuery 参考指南 由 Karl Swedberg 和 Jonathan Chaffer 撰写 - 预计于 2007 年夏季出版(Packt Publishing)。
  • jQuery Quickly 由 Yehuda Katz 和 Bear Bibeault 撰写(Manning Publishing)。
  • Designing with jQuery 由 Glen Lipka 撰写(Manning Publishing)。

这真是个好消息。我已经阅读了一些预发布章节,我认为您会从这些书籍中获得真正的享受。

jQuery 演讲和会议

我想宣布一些关于 jQuery 的演讲将在未来几个月举行。具体来说,将在 Ajax Experience 会议上发表一些关于 jQuery 的演讲。

在旧金山 Ajax Experience 上,John Resig 将会做一个关于 jQuery 的入门介绍,然后是关于 jQuery 的高级演讲。Glen Lipka 将会做一个关于使用 jQuery 进行设计的演讲。

在波士顿 Ajax Experience 上,John 和 Glen 将再次发表演讲,并将加入 Paul Bakaus,一起做一个关于使用 jQuery 开发高强度应用程序和游戏的演讲。

由于 jQuery 团队的许多成员都将在波士顿 Ajax Experience 上参加,我们想宣布,我们计划在 Ajax Experience 结束后第二天举办一个为期一天的小型 jQuery 会议。这将是您与 jQuery 团队见面并提出任何困扰您的问题的绝佳机会。我们还将做一些关于 jQuery 特定方面的演讲。我们很快就会公布更多详细信息。

jQuery UI

今天,我们很高兴地宣布一个我们一直在进行的秘密项目:jQuery UI。这个项目由 Paul Bakaus 编写,是一个全新的拖放库,从头开始开发,速度和可扩展性都得到了考虑。此外,代码被精心设计,具有完整的文档和测试 - 允许许多其他开发者使用和帮助扩展它。

此库将包含可拖动、可放置、可排序、可调整大小和滑块的完整代码。

您可以在 SVN 库 中查看 Paul 的一些早期作品。

资金和感谢

全新的 jQuery UI 库标志着 jQuery 项目迈出了新的一步:这是一段代码,其开发由您,jQuery 用户的捐款提供支持!

这得益于以下两个方面:首先是您对 jQuery 项目的持续支持和 捐款,其次是 Media Temple 提供的大方服务器捐赠。这使我们能够将财政资源集中在其他最有利于所有人的项目上。

因此,我想借此机会请求您额外捐款,以帮助我们继续为激动人心的新作品提供资金,这些作品可以供您在您的网站上使用。任何帮助都将不胜感激。

金额(美元)

再次感谢 jQuery 团队和所有为这个版本做出贡献的人。虽然工作量很大,但我希望您会像我们一样对这个版本感到满意。谢谢 - 谢谢您使用 jQuery!

Visual jQuery 杂志:第二部分

发布于 作者

那些熟悉 jQuery 的人应该知道,在去年 9 月,我发布了第一期 Visual jQuery 杂志。10 月,该杂志的法语版也发布了。

该杂志采访了一些重要的 jQuery 社区成员(如创建者 John Resig、插件编辑 Dave Cardwell 等),介绍了 jQuery 的功能和实现,甚至还介绍了其他一些 Javascript 库,配有高质量的图形和原创艺术。

积极的反馈令人难以置信,人们似乎真的很喜欢它。不幸的是,虽然我最初计划将该杂志做成月刊,但由于我的日程越来越繁忙,它就搁置了。从第一期开始,我找到了新工作(当时是新工作;现在已经大约八九个月了),搬到全国各地(从纽约到加州),并且写完了第一本书的大部分内容(敬请关注详细信息!)。很明显,事情一直都很忙。

第二期的缺失从第一期开始就一直困扰着我,我决定是时候让它出现了(我承认,这很大程度上要归功于我的好朋友 Rey Bango 最近重新努力推动 jQuery 的发展)。幸运的是,该杂志的主设计师以及法国开发人员/翻译团队都表达了帮助制作第二期杂志的意愿,这使得这个目标更加切实可行。

第一期是一个实验,并且进行得非常顺利。但由于是第一期,所以它更像是“Yehuda 秀”。我希望第二期能够有更多贡献者的合作;有很多 jQuery 主题需要探索,并且有很多团队成员和用户有着迷人的故事可以讲述。

因此,我要将这个消息发布出去。我正在寻找 Visual jQuery 杂志 第二期的投稿。文章的长度可以有很大的变化,从简短的三段短文到三页的长篇报道。它们可以是教程、特写文章、采访等等,我相信您一定会有很多想法。只是一些简短的(而且相当灵活的)指导方针

  • 文章必须以杂志或报纸的形式呈现(如果您的投稿确实是一篇文字作品 - 插图也会被考虑)。我对这一点要求并不严格,但它应该是一篇你可以想象出现在杂志上的文章。
  • 文章必须是关于对 jQuery 社区有影响力的及时主题,具有广泛的吸引力。
  • 文章不能是广告(但它可以很明显地介绍您编写的插件,如果它具有广泛的吸引力)。
  • 文章必须真实准确。
  • 杂志编辑部将对您的文章进行语法、空间和风格方面的编辑。在出版前,您将收到一份经过编辑的稿件以供您批准。
  • 杂志编辑部将根据需要添加图形和其他视觉元素。
  • 在您投入大量时间进行写作之前,请先发送一篇提案或简要描述您的投稿内容,这样我们可以避免出现空间不足的情况,并确保所有值得印刷的内容都能刊登。请将投稿和读者来信发送至editor AT visualjquery DOT com。

    正如我在这个项目一开始就说过的那样,我认为这本杂志确实有潜力将 jQuery 世界向新用户开放,我希望通过推动社区产出内容的界限,我们可以让 jQuery 在其当前的积极方向上继续前进。就我而言,我对此感到非常兴奋。

    我也将接受广告,所有收益将捐赠给 jQuery 项目。如果您有兴趣,请给我发邮件!

    新的插件库

    发布于 作者

    jQuery 的一个伟大之处在于它的可扩展性,这一点从为其开发的许多优秀的插件中可见一斑。jQuery 团队,尤其是 Web 团队,一直在幕后努力,共同创建了一个 展示这些插件的库

    jQuery Plugin Repository

    新的库提供了一些功能,一定能帮助用户找到他们想要的东西,并确定哪些插件最适合他们的需求。其中包括一个(基于 jQuery 的)评分小部件,让你了解其他人对每个插件的评价程度。评分对所有人可见,您只需在网站上注册用户名和电子邮件地址即可进行评分。您还可以更方便地访问更改日志、演示和文档,以及提交错误报告和功能请求。

    还有一些粗糙的地方需要打磨,网站上的插件列表目前还不多。我们请求插件作者在接下来的几周内将他们的作品发布到新的插件库中,因为我们将逐步淘汰 插件维基页面

    特别感谢 Mike Hostetler 为库的顺利启动付出的宝贵时间。

    访问地址:https://jqueryjs.cn/plugins/