jQuery 现已发布,仅在 MIT 许可证 下。此许可证比以前使用的 Creative Commons 许可证 更开放(更适合软件开发)。简而言之,对于不熟悉 MIT 许可证的人来说,它几乎和将内容置于公共领域一样自由。唯一的规定是您必须保留版权以及源代码,然后一切都会很好。选择此许可证是邮件列表中 长时间讨论 的结果,目的是找出对所有人来说最好的选择,包括所有想要使用它的公司。如果您对这可能对您造成的影响有任何疑问(注意:它可能不会),请给 邮件列表 发信,我们会帮助您解决问题。
作者存档:John Resig
15 天 jQuery
一个惊人的新 jQuery 资源刚刚发布:15 天 jQuery。这是一个由 Jack Born 运营的新网站,致力于提供简单的教程,帮助您开始使用 jQuery。Jack 在他的项目中使用 jQuery 后创建了这个网站
我认为 [jQuery] 是 Javascript 的瑞士军刀 - 它小巧、多功能,并且几乎没有学习曲线…… 如果你在完成这些教程后还没有成为高级 Javascript 代码的黑带大师,那么你将获得 110% 的退款。
到目前为止,他已经发布了四个供您浏览的教程,但计划在接下来的两周内发布完整的 15 个教程。之后,Jack 将继续探索并发布文章 - 因此您应该立即 订阅,趁它还年轻!
对于 jQuery 或 Javascript 编程的新手来说,这绝对是一个非凡的资源。我特别喜欢 斑马条纹 教程,它引导您了解如何使用 jQuery 轻松简便地执行常见操作。
事件选择器对决
简单挑战:找到两个不同元素(使用它们的 #ID 作为参考)下所有 LI 元素,并绑定一个单击处理程序,该处理程序会更改 LI 的文本颜色。以下是如何在所有流行的事件/选择器库中执行此操作。
Behaviour + Prototype
Behaviour.register({ '#item li': function(element) { Event.observe(element, 'click', function(event) { Event.element(element).setStyle({color: '#c00'}); }); }, '#otheritem li': function(element) { Event.observe(element, 'click', function(event) { Event.element(element).setStyle({color: '#c00'}); }); } });
Prototype 1.5.0
$$('#item li, #otheritem li').each(function(li){ Event.observe(li, 'click', function(event) { Event.element(li).setStyle({color: '#c00'}); }); });
event:Selectors
EventSelectors.start({ '#item li:click, #otheritem li:click': function(){ this.setStyle({'color': '#c00'}); } });
jQuery
$("#item li, #otheritem li").click(function(){ $(this).css('color', '#c00'); });
我认为代码本身说明了一切,哪个更易于使用和理解。我发现 Prototype 正在 迁移 到更接近 jQuery 目前的状态 - 同时 jQuery 本身正在开发一些非常酷的新东西。一定要关注新版本,它们很快就会发布。
Plazes 重构
最近,Plazes(一个流行的地理位置网络应用程序)对其服务进行了重新设计。如果您仔细看看它是如何实现其酷炫效果的,您会发现它在幕后很好地利用了 jQuery。
查看它的最佳位置是在 Plazes 人员 页面。该页面的目的是让您可以浏览并查看其他人的连接情况以及他们当前的位置。此页面具有一些很酷的功能,您可以试用
- 尝试移动/缩放地图 - 屏幕左侧的人员列表会动态更改和重新加载。
- 在地图顶部的输入框中,输入部分城市名称,它会使用最相关的名称自动完成它。
- 单击左侧菜单中的用户将带您到他们在地图上的位置。
总而言之,这是一个很好的例子,展示了 jQuery、Google 地图以及 优秀的开发团队 将所有内容整合在一起所带来的可能性。
Firebug 调试器
Joe Hewitt 正在更新他出色的 Firebug Firefox 扩展。如果您不熟悉它,您应该了解它。它提供详细的每页错误跟踪、XMLHTTPRequest 跟踪、DOM 导航 - Javascript 开发人员需要的一切。
Firebug 的新版本增加了另一项功能:Javascript 调试。这将允许您在代码中设置断点、暂停应用程序、重新启动它等等。如果您觉得这很有趣,您应该联系 Joe,因为他需要测试人员来帮助他启动这个项目。
Thickbox
jQuery 可视化地图

Jeffery Chiang 最近向 jQuery 邮件列表提交了一个 jQuery 库的出色可视化表示。它显示了所有不同的插件以及它们支持的方法/功能(借鉴自 jQuery 文档)。类似的图表已经为 Prototype 库完成 - 但它们都没有 jQuery 的酷炫 Devo 帽子。如果有人想冒险,使用此地图的样式将使文档页面重新设计得非常棒。
获奖的 Opera 小部件使用 jQuery
Audun Wilhelmsen (skyfex),一位居住在挪威的 jQuery 用户,最近参加了 The Gathering,这是世界上最大的计算机活动之一。在那里,他参加了 Opera 赞助的 小部件开发比赛。新的 Opera 9 Beta 拥有完整的小部件框架,肯定会挑战 Yahoo! 小部件和 OSX Dashboard。
在评委做出最终分析后,他们决定 Audun 获胜。这不仅对他来说是好消息(他赢得了价值 6000 美元的超级游戏机),而且也证明了 jQuery 对快速 Javascript 开发的有效性。
Audun 的获奖应用程序名为 KnowledgeMate。您将搜索内容输入单个字段,它会同时搜索多个搜索引擎(包括图像搜索引擎),并返回相关结果。它速度很快、外观精美,非常实用。我强烈建议下载新的 Opera beta 版以试用此小部件,即使没有其他原因。恭喜 Audun!
手风琴、值、onComplete 和错误修复!
这是过去一周左右发布的所有修复和新功能。我很快就会将有关它们的更多信息添加到文档中。
新演示
- 手风琴打开/关闭 - 同时切换打开/关闭多个条目!
新功能
- empty() - 您可以删除元素的所有子节点。
// Deletes the contents of all DIV elements $("div").empty();
- is(Expression) – 测试匹配的元素是否与该表达式匹配。等同于:$().filter(Expression).size() > 0.
// Tests to see if a DIV has a class of test if ( $("div").is(".test") ) { alert( "test div found!" ); }
- html() – 如果不向 html() 方法提供任何参数,它将返回第一个元素的 innerHTML。
// Copy the HTML contents into a Textarea $("textarea").val( $("#block").html() );
- val() – 与 html() 方法相同,但用于 value 参数(如果提供参数,则设置值,没有参数 - 返回第一个值)。
// Copy a value from one input to another $("input#hidden").val( $("input#name").val() );
- $.postXML() 和 $.getXML – 对于 AJAX 插件,与 $.post() 和 $.get() 相同,但强制尝试获取返回的 XML,无论 Content-Type 如何。
// Get the XML contents of a file $.getXML("file.xml",function(xml){ $(xml).find("title") // ... });
- 添加了一个新的“正常”速度(400 毫秒)用于动画。
// Slide a DIV in at normal speed $("div").slideDown("normal");
- 现在为动画设置onComplete 处理程序变得更加容易。
$("div").show("slow",function(){ alert("all done!"); });
错误修复
- Opera 和 AJAX 插件现在可以很好地协同工作。
- 解决了追加文本节点的问题。
- 针对 IE 和 AJAX 插件的处理进行了优化。
- 修复了通过标签检索 #id 表达式的问题。
- 实施了删除包含连字符的类的修复。
- 修复了将事件绑定到动态创建的 HTML 的错误。
- 修复了 show() 默认情况下无法显示显示设置为 none 的元素的错误。
- 解决了另一个 Prototype 1.3 和 jQuery 错误。
- 解决了动画对 overflow 属性的破坏问题。
- 最后:臭名昭著的高度/宽度自动动画错误已解决!
jQuery 每周汇总
Mark Panay 撰写了 对 JQuery for Web Designers 的后续文章。这一次他强调了内容简洁,并使用 jQuery 来展示博客文章和文章的完整正文。这与我在我的最新项目 Ouioo 中使用的技术非常类似。
此外,Mark 推出了一个新的 音乐创业公司,其网站使用了 jQuery fx 和 AJAX。引用 Mark 的话
[jQuery] 替换了之前的“行为、原型和 AHAH”脚本,因此节省了我大约 150k……:) 并使代码更简洁、更易于修改。也只花了 30 分钟。
最后,Frank Quednau 发布了一篇博客文章和一个 jQuery 查询演示。如果你好奇 jQuery 到底能够查询什么,这是一个很好的沙盒,你可以进去玩玩。