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




