jQuery 1.0.1

发布于 作者:

第一个 1.0 之后的版本已经准备就绪——(正如你可能预料的那样)这是一个错误修复版本。过去几天我一直在修复一些最紧迫的 1.0 错误,我认为它已经准备好了。所以,无需多言——这里是 jQuery 1.0.1

我强烈建议你升级到这个版本,因为它只会帮助你的开发更加顺利(我预计接下来的几个点版本将不会包含太多新功能)。以下是此版本中修复的内容

还有一些不太紧急的错误修复正在排队等待,并且很快会有很多不错的增强功能(特别是针对 AJAX 函数,感谢 Will Jessup)。下一步是完成 API 文档的最终润色,并将 proj.jquery.com 迁移到 jquery.com。

与往常一样,如果你发现任何错误,请随时将其发布到 错误跟踪器(这有助于我跟踪所有内容并保持组织)。

更新:我已经应用了两个快速修复到此更新,这两个修复都解决了此错误更新中的重大问题。这就是我在早上某个糟糕的时间发布这个版本的结果。请确保从此页面获取最新的源代码。

jQuery 1.0

发布于 作者:

我想借此机会宣布全新的 jQuery 1.0!这个版本投入了大量的工作。修复了许多错误,添加了大量新功能,并彻底改进了 jQuery 开发流程。

实际上,这个版本非常大,需要几天时间才能发布(这包括 jQuery 网站的新版本)。请耐心等待我们过渡到完整版本。还有一些需要解决的问题(主要是完成新的文档),但一切都在流程中,并且将在未来几天内准备就绪。

现在,这里有一些相关的链接供你入门

如果你想构建自己的 jQuery 副本,你可以从 Subversion 中检出它并从命令行构建它。你可以通过以下方式获取最新的 jQuery

svn co svn://jquery.org.cn/home/jquery/src/jquery

还有更多内容即将到来。本周我将每天发布一篇帖子,详细介绍 jQuery 1.0 的某个方面,并附带一些屏幕录像,演示你可以使用所有新代码做什么。请,如果你发现任何错误,请在错误跟踪器中提交它们

我想感谢所有使这个版本成为可能的人。这需要付出很多努力,但旅程才刚刚开始。我迫不及待地想深入研究我们计划的一些非常令人兴奋的进展。编码愉快!

更新:这里有一个有趣的事实。jQuery 1.0 的发布几乎比它在我的博客上 首次构思 晚一年。有趣的是这些事情是如何发生的。

更新:非常酷的 Visual jQuery 网站也发布了新文档的预览版本,其风格非常出色。他们更新的文档的最终版本将在未来几天内发布。

为什么 jQuery 的理念更好

发布于 作者:

关于 jQuery 和 Prototype 之间代码大小的帖子有很多。这些帖子的基本前提(我同意)是,由于 jQuery 代码的结构,许多典型的 JavaScript 设计模式在框架中比 Prototype 更加简洁明了。

很长一段时间以来,我一直是一个 Prototype 的忠实用户。我在开始 Rails 工作时发现了这个框架,对于 Rails 开发者来说,几乎没有替代品。Prototype,尽管它很丑陋,但已经内置到 Rails 中,放弃 Rails 提供的生产力收益并手动编写 JavaScript 代码非常困难。更进一步说,这就是我开始致力于 jQuery on Rails 的原因,旨在允许 Rails 开发者将 jQuery 用作 Prototype 的直接替代品。

但是回到这篇文章的目的,jQuery 的编程理念与 Prototype 的区别不仅仅在于代码大小。事实上,这种差异与 Java 和 Ruby 之间的差异非常相似,因此 Rails 社区如此彻底地拥抱 Prototype 具有讽刺意味。

让我们看一些代码比较。首先,在特定节点之后添加一些任意 HTML。

在 Prototype 中

new Insertion.After('myId', 'Arbitrary HTML');

在 jQuery 中

$('#myId').after('Arbitrary HTML');

现在,我们并没有通过减少代码混乱来做太多(尽管 jQuery 的代码更清晰),但 Prototype 和 jQuery 采用的方法存在根本差异。

Prototype 创建了一系列单体,每个类都封装了一些功能。然后开发者传入一个 ID 和一些其他参数,类就会做它应该做的事情。非常类似于 Java 封装功能的的方式(例如 Math 类)。注意: 这并不是说 Java 不能以这种方式做事。

jQuery 以一种根本不同的方式处理这个问题。它将一组 HTML 节点视为要传递消息的对象(更像传统的 Ruby 方式)。因此,与其拥有一个在 HTML 节点之后添加文本的单独类,jQuery 将功能粘合到 jQuery 对象上,该对象由 $ 函数返回。相比之下,Prototype 的 $ 函数返回一个普通的 DOM 节点。

Prototype 通过其在框架最新 RC 中添加的 $$ 方法尝试实现类似的功能,但存在根本差异。虽然 Prototype 的 $$ 返回一个 DOM 元素数组,但 jQuery 的 $ 是整个框架的基础。几乎所有 jQuery 函数都绑定到 jQuery 对象,该对象由 $ 方法返回。
jQuery 方式的好处显而易见

  • 可链性。 由于 jQuery 对象将功能粘合到它们身上,它们会返回其他 jQuery 对象,开发者可以将其他消息传递给这些对象。jQuery 网站上的一个简单的例子是$(“p.surprise”).addClass(“ohmy”).show(“slow”);
  • 使用 CSS 选择器和 XPath 运算符。 由于 jQuery 将消息传递给对象,因此它可以(并且已经)将额外的选择器功能实现到 $ 方法中。粘合到 jQuery 对象上的方法只是看到一个类似数组的对象,其中包含一系列 DOM 元素。它不在乎我们如何获得它们。因此,插件开发者可以将额外的解析器添加到 $ 方法中,或者很容易地将额外的函数粘合到 jQuery 对象上。
  • 这带来了插件开发。 jQuery 的方式非常适合插件开发。很容易添加利用 jQuery 对象的功能,并且 jQuery 插件通常比其对应插件更短。
  • 自动循环。 jQuery 方法需要自动循环遍历数组中的所有 DOM 元素,并应用所需的方法。因此,$(expression).after(‘some HTML’) 会透明地在表达式返回的每个元素之后添加 HTML。例如,$(‘p’).after(‘some HTML’) 会在页面上的每个 <p> 之后添加 ‘some HTML’。
  • 建立在自身之上。 随着 jQuery 的成熟,在现有架构之上构建插件变得更容易。由于所有 jQuery 函数都自动循环,因此使用现有的 jQuery 函数意味着几乎消除了烦人的迭代。

还有更多,但贯穿所有好处的线索来自于 John Resig 以非常细致的方式使 jQuery 对象/数组接受传递的消息,而不是构建各种单体功能块,每个块都必须从头开始构建。

其他一些例子
Prototype 中的 AJAX 更新程序

new Ajax.Updater('placeholder', url, { method: 'get', parameters: par });

jQuery 中的 AJAX 更新程序

$('#placeholder').load(url + par);

注意: 此示例没有处理如果我们想将响应加载到每个 <p> 对象中时,我们获得的迭代好处。

在 Prototype 中向元素添加一个类

Element.addClassName('element', 'className');

在 jQuery 中向元素添加一个类

$('#element').addClass('className');

在 Prototype 中向一组元素添加一个类

$$('.element').each(function(node) {
Element.addClassName(node, 'className');
}

在 jQuery 中向一组元素添加一个类

$('.element').addClass('className');

最后一个例子最清楚地说明了方法论的差异。由于 jQuery 正在将消息传递给 jQuery 对象,因此代码几乎没有改变。jQuery 不在乎我们现在正在向一组对象而不是一个对象添加一个类;底层代码相同(将类添加到对象集合中的元素)。Prototype 另一方面需要一个迭代器。

随着你的代码变得更加复杂,jQuery 的扩展性很好,而像 Prototype 这样的框架则会变成嵌套循环的常态。

[更新] 一位精明的读者(Mislav)指出,Prototype 确实做了一些 jQuery 所做的事情。Prototype 似乎将 Element 类绑定到 DOM 元素,允许像 $(‘myElement’).hide() 这样的事情,等等。但是,它仅适用于 Element 模块,并且似乎仅适用于单个 DOM 元素。将 Elements 模块绑定很酷,但它更多的是事后才想到的,而不是 jQuery 将其作为基本设计决策所做的。

jQuery Boston

发布于 作者

如果波士顿(马萨诸塞州)有任何 jQuery 用户,我将在8月23日为当地 Drupal 组织做一个关于 jQuery 的演示。我不确定是否会录制和/或转录 – 但我会在演示结束后将任何幻灯片或示例发布到网上。

有关活动的更多信息,请访问 Drupal 网站

另外,我很想组织一次 jQuery 聚会,也许与大型会议(OSCON、AJAX Experience?)合作。但这又是另一篇帖子要写的事情了。

YShout – 使用 jQuery 实现的实时聊天

发布于 作者

View of the Chat Area

Yuri Vishnevsky 刚刚发布了一个新的 AJAX 聊天应用程序,它很好地利用了 jQuery。这个应用程序允许您将聊天区域嵌入到网站的某个部分,并使其随着用户的聊天实时更新。它非常流畅,而且运行良好。

YShout 包含许多不错的功能
– Unicode 支持
– 一个管理区域
– 防洪控制
– 以及历史记录查看器

您可以在 演示 中查看它在 项目页面 上的实际运行情况。

YShout Admin Area

从 jQuery 用户的角度来看,最有趣的部分可能是,这不是他的应用程序的第一个版本 – 而是第三个 – 并且是完全从 Prototype 重写为 jQuery 的结果。Yuri 声明了切换的原因是“文件大小加上方法链”以及“直观的语法”。

如果您喜欢这个应用程序,您应该 Digg Yuri 的文章,我相信许多其他网站管理员也会喜欢将它放在他们的网站上。

您自己的 Digg 间谍,使用 jQuery

发布于 作者

Digg-like Spy with jQuery

Remy Sharp 刚刚 发布 一个新的 jQuery 插件,它允许您模拟 Digg 的非常酷的 Spy 功能。

对于那些不熟悉的人来说,DiggSpy 功能会随着人们投票、审核或评论文章而实时淡入显示。这是一个非常流畅的功能,可以查看 Digg 社区的脉搏。

Remy 借鉴了 Digg Spy 的概念,并创建了一个 jQuery 插件,可以自动从服务器提取新项目,并优雅地淡入显示。此外,它还会淡出不再重要的旧项目。

作为证明易用性的例子,另一位 Digg 用户已经拿到了这个插件,并将其 实施在他的网站上,考虑到这个插件发布的时间很短,这非常令人印象深刻。

如果您喜欢这个插件,您应该 Digg Remy 的文章,我相信许多 Digg 用户都希望拥有自己的 Spy 来玩耍。

ThickBox 2.0,基于 jQuery

发布于 作者

ThickBox,由 Cody Lindley 编写的浏览器Lightbox-like模态窗口框架,运行在 jQuery 库 之上,进行了一点升级。 新的 2.0 版本增加了 greybox 功能(iFramed 内容)、图像集支持(类似于 Lightbox 2.0 的功能),并且现在运行在 jQuery 1.0 上,还有其他改进。

你可能会问自己

“如果 ThickBox 2.0 做同样的事情,我为什么不直接使用 Lightbox 2.0 呢?”

答案很简单。未压缩的情况下,jQuery 库和 ThickBox 插件脚本总共只有 51kb(如果 jQuery 被压缩,则只有 27kb),而 Lightbox Javascript 文件单独加起来超过 100kb。想想节省的带宽和提高的最终用户加载时间。

难道没有人会考虑孩子们最终用户吗?

ThickBox 相比 Lightbox 的另一个优势是,如果浏览器窗口太小而无法全尺寸显示图像而无需滚动,图像会 自动调整大小。 此外,在 ThickBox 中单击模态窗口外部会关闭它,而在 Lightbox 中,必须单击“关闭”按钮才能将其从屏幕上移除。

访问 ThickBox 演示网站,获取有关安装说明、不同技术的演示(包括 iFramed 内容和 AJAX 内容)以及支持信息。

目前支持和测试的浏览器包括 Internet Explorer 6 和 7、OS X 和 Windows 上的 Firefox 1.5+、Opera 9+ 以及 Safari 1.3.2 和 2.0.3,但它应该可以在任何现代浏览器上运行。 ThickBox 受 MIT 许可证 保护。

jQuery Suckerfish 菜单

发布于 作者

我想我们都听说过或使用过 Suckerfish CSS 菜单,由 Pattrick Griffiths 和 Dan Webb 为 A List Apart 编写。如果不是,它是一种使用基于标准的语义 HTML 和 CSS 创建下拉菜单的好方法。不幸的是,由于 IE 仍然占据浏览器市场的主导地位,我们仍然需要一种方法来处理 IE 中的悬停状态。为此,我们需要一点 JavaScript 来将鼠标悬停和鼠标移出事件附加到 HTML 元素。

Myles Angell 决定 使用 jQuery 重写 Suckerfish 的 JavaScript。Myles 使用 jQuery 的 基本效果 来显示和隐藏子菜单,并使用 jQuery 的 BaseStyle 基本模块方法 来突出显示当前鼠标悬停的菜单项。非常流畅。

查看 Myles 的 其他 jQuery 实验。对于 jQuery 初学者来说,这些是很好的入门示例。 树形视图 是另一个引起我注意的实验。

使用 jQuery 创建的 3D 宇宙

发布于 作者

Universe Screenshot

Will Jessup 刚刚发布了一个关于 jQuery(以及 JavaScript 总的来说)可能性的精彩演示:宇宙的 3D 模型。尝试在屏幕上垂直移动鼠标以从不同角度查看宇宙,水平移动鼠标以加快旋转速度。所有图片均由 NASA 提供。

Will 使用了许多技术来真正正确地模拟 3D 体验

  • 他根据元素的深度调整图像的不透明度和 z-index。
  • 高度和宽度也动态调整 – 但都使用 fontSize 和 EMs 布局,允许您使用文本模拟景深(除了静态图像或元素)。
  • 背景根据旋转的速度和方向移动。

另外,请查看 他的代码,了解使用的特定缓存优化(例如,保存单个 jQuery 对象的引用并一遍又一遍地调用它,而不是每次旋转时都重新查询)。

请务必 Digg 这个,因为它是一个很好的 jQuery 强大功能的示例。