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);
移除事件綁定處理過程 btnHandler 用如下語句：
Javascript代碼
$('btnok').stopObserving('click', btnHandler);
jQuery 則為:
Javascript代碼
$j('#btnok').bind('click', btnHandler);
或者更靈活簡潔的方法：
Javascript代碼
$j('#btnok').click(btnHandler);
值得註意的是，對於同一個元素的同一個事件，註冊同一個 handler ，jQuery 可註冊多次。
Javascript代碼
function btnHandler()
{
console.log("btn clicked!");
}
$j('#btnok').bind('click', btnHandler);
$j('#btnok').click(btnHandler);
在點擊瞭元素 btnok 後，如上代碼會有連續兩次輸出。
對於同一個元素、同一個事件，用不同的 handler ，當然可以註冊多次。
Javascript代碼
function btnHandler()
{
console.log("btn clicked!");
}
function btnHandler1()
{
console.log("btn clicked 1!");
}
$j('#btnok').bind('click', btnHandler);
$j('#btnok').click(btnHandler1);
移除事件綁定處理過程 btnHandler 用如下語句：
Javascript代碼
$j('#btnok').unbind('click', btnHandler);
4、事件冒泡
使用場景，比如有時候，需要對鏈接進行點擊事件處理，並且不想讓它進入鏈接 href 屬性指的目標頁面，而是想讓它有別的操作。
Protoype
Javascript代碼
$('link').observe('click', function(event){
console.log(this); //輸出 link 元素
console.log(this.readAttribute('href'));
event.stop();
});
jQuery:
Javascript代碼
$j('#link').click(function(event){
console.log(this); //輸出空, event.target 才是 html 元素對象
console.log($j(event.target).attr('href')); //用 $j 轉化成為 jQuery 對象才能調用 attr 方法
event.preventDefault();
});
在如上代碼中，點擊瞭鏈接之後，不會被重定向到目標頁面。而是執行完輸出之後直接停止。