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




