事件选择器对决

发表于 作者

简单挑战: 找到两个不同元素(使用它们的 #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 Maps 和一个 很棒的开发团队 结合在一起的成果的绝佳示例。

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 小工具使用 jQuery

发表于 作者

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

在评委对最终结果进行分析后,他们决定 Audun 是获胜者。这不仅对他来说是个好消息(他赢得了价值 6000 美元的巨型游戏机),而且也表明了 jQuery 在快速 Javascript 开发中的有效性。

Audun 的获奖应用程序被称为 KnowledgeMate。你在一个字段中输入你的搜索内容,它会同时搜索多个搜索引擎(包括图片搜索引擎),并返回相关结果。速度非常快,外观简洁,非常实用。我强烈建议你下载新的 Opera beta 来试用这款小工具,即使只是为了这一点。祝贺你,Audun!