[转]prototype.js常用函数及其用法

ChenReal
函数名解释举例
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以给定频率调用一段JavaScriptPeridicalExecutor(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.disabledisable表格所有内容Form.disable('form1') (这个好象不work)
Form.focusFirstElement把焦点集中在表格第一个元素上Form.focusFirstElement('form1')
Form.resetReset表格Form.reset('form1')
Form.Element.getValue取得表格输入框的值Form.Element.getValue('text1')
Form.Element.serialize把表格中输入框内容转化成stringForm.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.ContentZoomZOOM特效-
Ajax.Request传送Ajax请求给服务器Ajax.Request('http://server/s.php')
Ajax.Updater传送Ajax请求给服务器并用答复的结果更新指定的ContainerAjax.Updater('text1','http://server/s.php')

基本用法:prototype.js给每个主要的类都分了一个Class,使用起来很方便.要产生特定的效果,只要用new Class.function()就可以了.例如:

<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',...)