prototype.js是一個很強大的Javascript函數庫,它可讓你很輕鬆的使用一些特效,實現AJAX的功能.雖然prototype.js是爲了Ruby On Rails開發的,它的純Javascript的性質也使得它很容易用在其餘的網絡程序中.惋惜的是,Prototype.js尚未強大的文檔解釋,儘管它的代碼很是有條理,可是也給初學者形成了必定的麻煩.做者在README裏說:php
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,使用起來很方便,要產生特定的效果的話只要用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'')...服務器
下面是每一個重要的類和函數的解釋:網絡
prototype 1.2.0 的函數簡介
| 函數名 |
解釋 |
舉例 |
| 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 |
以給定頻率調用一段JavaScript |
"PeridicalExecutor(test, 1)"這裏test是Javascript的函數,1是頻率(1秒). |
| $ |
取得一個DIV, 至關於getElementById() |
$(''div1'') |
| Field.clear |
清空一個輸入框 |
"Field.clear(''textfield1'') |
| Field.focus |
把 焦點集中在輸入框上 |
"Field.focus(''select1'') |
| Field.present |
判斷內容是否爲空 |
"alert(Field.present(''textfield1''))" |
| Field.select |
選擇輸入框的內容 |
"Field.select(''textfield1'')" |
| Field.activate |
把 焦點集中在輸入框上並選擇輸入框的內容 |
"Field.activate(''textfield1'')" |
| Form.serialize |
把表格內容轉化成string |
|
| Form.getElements |
取得表格內容爲數組形式 |
|
| Form.disable |
disable表格全部內容 |
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 |
把表格中輸入框內容轉化成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 |
出現特效 |
|
| Effect.ContentZoom |
ZOOM特效． |
|
| Ajax.Request |
傳送Ajax請求給服務器 |
Ajax.Request(''http://server/s.php'') |
| Ajax.Updater |
傳送Ajax請求給服務器並用答覆的結果更新指定的Container |
Ajax.Updater(''text1'',''http://server/s.php'') |
Ajax的函數實際上還有一個可選參數,就是options.在未指明的狀況下,Ajax使用的是''POST''發送請求,並且是異步執行,若是想要改用''GET''和同步,就能夠用Ajax.Request(''http://server/s.php'',''get'','''',''a=1&b=2'')來執行.ide
在Rails中Ajax的函數被封裝成Ruby的函數,因此沒必要直接採用Ajax.Request,Ajax.Updater.可是知道它是怎麼工做的也頗有用.函數