prototype.js是一個很強大的Javascript函數(shù)庫,它可以讓你很輕松的使用一些特效,實現(xiàn)AJAX的功能.雖然prototype.js是為了Ruby On Rails開發(fā)的,它的純Javascript的性質(zhì)也使得它很容易用在其他的網(wǎng)絡程序中.可惜的是,Prototype.js還沒有強大的文檔解釋,盡管它的代碼非常有條理,但是也給初學者造成了一定的麻煩.作者在README里說:

Prototype is embarrassingly lacking in documentation. (The source code should be fairly easy to comprehend; I’m committed to using a clean style with meaningful identifiers. But I know that only goes so far.)

基本用法:以Element Class為例,prototype給每個主要的分類都分成了一個Class,使用起來很方便,要產(chǎn)生特定的效果的話只要用new Class.function(<argument>)就可以了.比如:

<DIV id="div1"><a href="#" onclick="new Element.toggle(''div2'')">Click Me</a></DIV>

<DIV id="div2">Hello!</DIV>

當點擊Click Me的時候,div2就會交替隱藏或顯示.注意,你可以給toggle加上無限個parameter,比如Element.toggle(''div2'',''div3'',''div4'')...

下面是每個重要的類和函數(shù)的解釋:

prototype 1.2.0 的函數(shù)簡介

函數(shù)名	解釋	舉例
Element.toggle	交替隱藏或顯示	"Element.toggle(''div1'',''div2'')
Element.hide	隱藏	"Element.hide(''div1'',''div2'')
Element.show	顯示	"Element.show(''div1'',''div2'')
Element.remove	刪除	"Element.remove(''div1'',''div2'')
Element.getHeight	取得高度	"Element.getHeight(''div1'')
Toggle.display	和Element.toggle相同	"Toggle.display(''div1'',''div2'')
Insertion.Before	在DIV前插入文字	"Insertion.Before(''div1'',''my content'')
Insertion.After	在DIV后插入文字	"Insertion.After(''div1'',''my content'')
Insertion.Top	在DIV里最前插入文字	"Insertion.Top(''div1'',''this is a text'')
Insertion.Bottom	在DIV里最后插入文字	"Insertion.Bottom(''div1'',''this is a text'')
PeriodicalExecuter	以給定頻率調(diào)用一段JavaScript	"PeridicalExecutor(test, 1)"這里test是Javascript的函數(shù),1是頻率(1秒).
$	取得一個DIV, 相當于getElementById()	$(''div1'')
Field.clear	清空一個輸入框	"Field.clear(''textfield1'')
Field.focus	把 焦點集中在輸入框上	"Field.focus(''select1'')
Field.present	判斷內(nèi)容是否為空	"alert(Field.present(''textfield1''))"
Field.select	選擇輸入框的內(nèi)容	"Field.select(''textfield1'')"
Field.activate	把 焦點集中在輸入框上并選擇輸入框的內(nèi)容	"Field.activate(''textfield1'')"
Form.serialize	把表格內(nèi)容轉(zhuǎn)化成string
Form.getElements	取得表格內(nèi)容為數(shù)組形式
Form.disable	disable表格所有內(nèi)容	Form.disable(''form1'') (這個好象不work)
Form.focusFirstElement	把焦點集中在表格第一個元素上	Form.focusFirstElement(''form1'')
Form.reset	Reset表格	Form.reset(''form1'')
Form.Element.getValue	取得表格輸入框的值	Form.Element.getValue(''text1'')
Form.Element.serialize	把表格中輸入框內(nèi)容轉(zhuǎn)化成string	Form.Element.serialize(''text1'')
$F	等同于Form.Element.getValue()	$F(''text1'')
Effect.Highlight	高亮特效.	Effect.Highlight(''text1'')
Effect.Fade	褪色特效
Effect.Scale	放大縮小(百分比）	Effect.Scale(''text1'', 200) 這里200 = 200%, 即兩倍
Effect.Squish	消失特效．文字縮小后消失	Effect.Squish(''text1'')
Effect.Puff	消失特效．文字放大后消失	Effect.Puff(''text1'')
Effect.Appear	出現(xiàn)特效
Effect.ContentZoom	ZOOM特效．
Ajax.Request	傳送Ajax請求給服務器	Ajax.Request(''http://server/s.php'')
Ajax.Updater	傳送Ajax請求給服務器并用答復的結(jié)果更新指定的Container	Ajax.Updater(''text1'',''http://server/s.php'')

Ajax的函數(shù)實際上還有一個可選參數(shù),就是options.在未指明的情況下,Ajax使用的是''POST''發(fā)送請求,而且是異步執(zhí)行,如果想要改用''GET''和同步,就可以用Ajax.Request(''http://server/s.php'',''get'','''',''a=1&b=2'')來執(zhí)行.

在Rails中Ajax的函數(shù)被封裝成Ruby的函數(shù),所以不必直接采用Ajax.Request,Ajax.Updater.但是知道它是怎么工作的也很有用.