<一>主要方法
1.$()
2.$F()
3.$A()
4.$H()
5. $R()
6.Try.these()
7.Ajax.Request
8.Ajax.Updater
$('bookdiv').update('<p>...</p>');?//更新innerHtml
$('bookdiv').show();
$('bookdiv').hide();
$('bookdiv').toggle();? //切換visiable
$('bookdiv').visiable();? //返回是否visiable
$('bookdiv').scrollTo();
值得留意的還有和CSS一樣的批量選擇語法$$(),
如$$('div#left_books).each(....) ,CSS的語法指它的#. 等符號及嵌套的定義
<二>總結
1.Element系列有很多實用的函數:
visible(element);? //返回是否visiable
Element.show();
Element.hide();
Element.toggle();? //切換visiable
Element.scrollTo();
Element.empty();
update(element, html); //更新innerHtml
......
2.Form系列有很多實用的函數:
serialize(form):將Form中所有Input對象的值轉化為一個URL String,方便把Form轉為用 URL Get方式的Ajax提交,
最經典的用Ajax提交Form的例子:
? <form action="/action/here" method="post"???
??????? onsubmit="new Ajax.Updater('div_to_be_updated', '/action/here', {parameters:Form.serialize(this)});?????????????
??????? return false;">
?
下面兩個函數可以監察Form里數值變化的情況,典型應用是離開本頁時,提醒用戶還有沒有保存的修改。和傳統的檢查方式相比,下面的函數是用戶有input的動作時主動調度myCallBackFunction設置一個flag,而不是頁面提交時才進行批量檢查,加速提交的速度。
new Form.EventObserver($("myform"), myCallBackFunction);
new Form.Element.EventObserver($("myfield", myCallbackFunction);
focusFirstElement(form)
findFirstElement(form)
getInputs(form [, typeName [, name]])
getElements(form)
......
3.Event系列有很多實用的函數:
Event.element(event),返回觸發事件的element.
Event.findElement(event,tagName),搜索DOM tree里事件的響應鏈里的第一個符合tagName的element.
pointerX(event),pointerY(event)等
4.Ruby風格
1.循環函數
?elements.each( function(element){
???alert(element);??
?});
?
2.不定參數
new Ajax.Updater('mydiv', '/foo/bar', {asynchronous:true});
5.Observe模式
Observe模式,就是連接仍然以<a href="foo.jsp" >形式編寫鏈接,用Observe為其加入onClick事件的偵聽。 這樣,當搜索引擎訪問時,就會訪問傳統的URL;而用戶使用瀏覽器訪問時,就會被Observe轉為使用onClick事件的Ajax效果。
??? SpringSide推薦用$${},批量選擇element進行設置onclick 事件,ajax的訪問原來的<a href>。
$$('div#left_books * a\[href\]').each(function(element){
Event.observe(element,'click',handlerCilckEvent,false);
});
function handlerCilckEvent(event){
???var element = Event.element(event);
?? new Ajax.Updater('bookdiv',element.href);
}
6.script.aculo.us
script.aculo.us 在Prototype的基礎上進行了二次開發。
//script.aculo.us 提供了非常方便的使用ajax 調用服務器端自動填充文本框功能。
new Ajax.Autocompleter(id_of_text_field, id_of_div_to_populate, url, options);
?
?
參考文件
prototype.js源代碼
http://www.sergiopereira.com/articles/prototype.js.html
http://www.prototypedoc.com/