JS框架使用及迁移(二)

B、方法部分
1、方法调用
Prototype:

Javascript代码 
$$('.class').invoke('show'); 
Element.show($("id")); 

$("id").invoke("show") 是会出错的，因为$("id") 是 HTML 元素对象，并无 invoke 方法。

jQuery:
Javascript代码 
$j("#id").show(); 
$j(".class").show(); 

2、迭代：
Prototype:
Javascript代码 
[ 'hello', 'world'].each(function(s, index) { 
  alert(index + ': ' + s); 
}); 

可见javascript 的数组对象被扩展，加入了迭代功能。

jQuery:
Javascript代码 
$j([ 'hello', 'world']).each(function(s) { 
  alert(s+":"+this); 
}); 

包装成 jQuery 对象，然后操作，这里值得注意的是，在回调函数中，this 被赋值为当前元素。

3、事件监听
jQuery 相比 Prototype 一个很好的地方，就是 ready() 事件。
Javascript代码 
$j(document).ready(function(){}); // 或者 
 
$j(function(){}); 

而 Prototype 早期只能通过
Javascript代码 
Event.observe(window,'load',function(){}) 

后来提供了：
Javascript代码 
document.observe("contentloaded", function() {}) 

现在改为：
Javascript代码 
document.observe('dom:loaded',function(){}) 

值得注意的是，这些方法可以多次调用。并且在事件触发后，能按调用先后的程序执行相关代码。
像 BOM 本身的 window.onload 事件，如果多次赋值，会被覆盖。
Javascript代码 
function out1() 
{ 
    console.log("output 1"); 
} 
function out2() 
{ 
    console.log("output 2"); 
} 
window.onload = out1; 
window.onload = out2; 

以上代码，只会输出 "output 2"，而以下两段代码都会依次输出 "output 3 "、"output 4":
Prototype:
Javascript代码 
document.observe('dom:loaded',function(){ 
    console.log("output 3"); 
}); 
document.observe('dom:loaded',function(){ 
    console.log("output 4"); 
}); 

jQuery:
Javascript代码 
$j(function() { 
    console.log("output 3"); 
 
}); 
 
$j(function() { 
    console.log("output 4"); 
 
}); 

Prototype:
Javascript代码 
Event.observe('btnok', 'click', btnHandler); 

或者
Javascript代码 
$('btnok').observe('click', btnHandler); 

值得注意的是，对于同一个元素的同一个事件，注册同一个 handler ，Prototype 只注册一次。

也就是说，如下两次调用 observe 注册
Prototype
Javascript代码 
function btnHandler() 
{ 
    console.log("btn clicked!"); 
} 
Event.observe('btnok', 'click', btnHandler); 
$('btnok').observe('click', btnHandler); 

但是对于同一个元素、同一个事件，用不同的 handler ，可以注册多次。
Javascript代码 
function btnHandler() 
{ 
    console.log("btn clicked!"); 
} 
function btnHandler1() 
{ 
    console.log("btn clicked  1!"); 
} 
Event.observe('btnok', 'click', btnHandler); 
$('btnok').observe('click', btnHandler1);&