简单挑战: 找到两个不同元素(使用它们的 #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 本身正在凭借一些非常酷的新功能快速发展。一定要密切关注新版本的发布,因为它们很快就会发布。