事件选择器对决

发布于 作者:

简单挑战: 找到两个不同元素(使用它们的 #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(一个流行的地理位置 Web 应用程序)对其服务进行了重新设计。如果你仔细观察它的酷炫效果,你会发现它很好地利用了 jQuery。

Plazes 人员 页面上可以最好地看到它的实际应用。该页面的目的是允许你浏览并查看其他人连接了什么以及他们当前的位置。该页面具有许多你可以尝试的酷炫功能

  • 尝试移动/缩放地图——屏幕左侧的人员列表将动态更改并重新加载。
  • 在地图顶部的输入框中,输入城市名称的一部分,它将使用最相关的名称自动完成它。
  • 点击左侧菜单中的用户会将你带到地图上他们所在的位置。

总而言之,这是一个很好的例子,展示了 jQuery、Google 地图和 优秀的开发团队 如何协同工作。

Firebug 调试器

发布于 作者:

Joe Hewitt 正在致力于更新他优秀的 Firebug Firefox 扩展。如果你不熟悉它,你应该了解一下。它提供了详细的页面错误跟踪、XMLHTTPRequest 跟踪、DOM 导航——所有 JavaScript 开发人员需要的东西。

Firebug 的新版本正在添加一项新功能:JavaScript 调试。这将允许你在代码中设置断点,暂停应用程序,重新启动它,以及所有其他很酷的功能。如果这听起来对你有兴趣,你应该联系 Joe,因为他需要测试人员来帮助他完成这项工作。

Thickbox

发布于 作者:

Cody Lindley 刚刚发布了 Lightbox/Greybox 的全新版本,名为 Thickbox。此版本比其他库提供了更好的附加功能。特别是,此版本完全不具有侵入性——它使用自然的 href、src 和 title 属性来填充框,当它弹出时。即使你禁用了 JavaScript,它仍然表现自然。它还能够动态加载 HTML 块并在叠加层中显示它。总而言之,这是一个很棒的版本,其中最重要的是它使用 jQuery 来完成所有操作。所以请查看它,试用它,并让 Cody 知道你的想法!

jQuery 可视化地图

发布于 作者:

Jeffery Chiang 最近向 jQuery 邮件列表提交了 jQuery 库的优秀可视化表示。它显示了所有不同的插件以及它们支持的方法/功能(借用自 jQuery 文档)。类似的图表已经为 Prototype 库完成——但没有一个拥有 jQuery 的酷炫 Devo 帽子。如果有人感到冒险,使用此地图的样式将为文档页面的出色重新设计。

获胜的 Opera Widget 使用 jQuery

发布于 作者:

Audun Wilhelmsen(skyfex),一位居住在挪威的 jQuery 用户,最近参加了 The Gathering,世界上最大的计算机活动之一。在那里,他参加了 Opera 赞助的 widget 开发竞赛。新的 Opera 9 Beta 具有一个完整的 widget 框架,肯定会挑战 Yahoo! Widgets 和 OSX Dashboard。

在评委完成最终分析后,他们决定 Audun 获胜。这不仅对他来说是个好消息(他赢得了一台价值 6000 美元的超级游戏机),而且它只是表明了 jQuery 在快速 JavaScript 开发方面的有效性。

Audun 的获奖应用程序名为 KnowledgeMate。你将搜索输入到单个字段中,它将同时搜索多个搜索引擎(包括图像搜索引擎),并返回相关结果。它速度很快,外观精美,而且非常方便。我绝对建议下载新的 Opera beta 来试用此 widget,如果不是为了其他目的的话。祝贺 Audun!