[转]prototype.js函数介绍

向右看齐 2022-09-18 09:54 85阅读 0赞

\[转\] [http://okone96.itpub.net/post/9033/283688][http_okone96.itpub.net_post_9033_283688]

<table> 
 <tbody> 
  <tr> 
   <td>函数名</td> 
   <td>解释</td> 
   <td>举例</td> 
  </tr> 
  <tr> 
   <td>Element.toggle</td> 
   <td>交替隐藏或显示</td> 
   <td>Element.toggle(''div1'',''div2'')</td> 
  </tr> 
  <tr> 
   <td>Element.hide</td> 
   <td>隐藏</td> 
   <td>Element.hide(''div1'',''div2'')</td> 
  </tr> 
  <tr> 
   <td>Element.show</td> 
   <td>显示</td> 
   <td>Element.show(''div1'',''div2'')</td> 
  </tr> 
  <tr> 
   <td>Element.remove</td> 
   <td>删除</td> 
   <td>Element.remove(''div1'',''div2'')</td> 
  </tr> 
  <tr> 
   <td>Element.getHeight</td> 
   <td>取得高度</td> 
   <td>Element.getHeight(''div1'')</td> 
  </tr> 
  <tr> 
   <td>Toggle.display</td> 
   <td>和Element.toggle相同</td> 
   <td>Toggle.display(''div1'',''div2'')</td> 
  </tr> 
  <tr> 
   <td>Insertion.Before</td> 
   <td>在DIV前插入文字</td> 
   <td>Insertion.Before(''div1'',''my content'')</td> 
  </tr> 
  <tr> 
   <td>Insertion.After</td> 
   <td>在DIV后插入文字</td> 
   <td>Insertion.After(''div1'',''my content'')</td> 
  </tr> 
  <tr> 
   <td>Insertion.Top</td> 
   <td>在DIV里最前插入文字</td> 
   <td>Insertion.Top(''div1'',''this is a text'')</td> 
  </tr> 
  <tr> 
   <td>Insertion.Bottom</td> 
   <td>在DIV里最后插入文字</td> 
   <td>Insertion.Bottom(''div1'',''this is a text'')</td> 
  </tr> 
  <tr> 
   <td>PeriodicalExecuter</td> 
   <td>以给定频率调用一段JavaScript</td> 
   <td>PeridicalExecutor(test, 1)"这里test是Javascript的函数,1是频率(1秒).</td> 
  </tr> 
  <tr> 
   <td>$</td> 
   <td>取得一个DIV, 相当于getElementById()</td> 
   <td>$(''div1'')</td> 
  </tr> 
  <tr> 
   <td>Field.clear</td> 
   <td>清空一个输入框</td> 
   <td>Field.clear(''textfield1'')</td> 
  </tr> 
  <tr> 
   <td>Field.focus</td> 
   <td>把焦点集中在输入框上</td> 
   <td>Field.focus(''select1'')</td> 
  </tr> 
  <tr> 
   <td>Field.present</td> 
   <td>判断内容是否为空</td> 
   <td>alert(Field.present(''textfield1''))"</td> 
  </tr> 
  <tr> 
   <td>Field.select</td> 
   <td>选择输入框的内容</td> 
   <td>Field.select(''textfield1'')"</td> 
  </tr> 
  <tr> 
   <td>Field.activate</td> 
   <td>把焦点集中在输入框上并选择输入框的内容</td> 
   <td>Field.activate(''textfield1'')"</td> 
  </tr> 
  <tr> 
   <td>Form.serialize</td> 
   <td>把表格内容转化成string</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>Form.getElements</td> 
   <td>取得表格内容为数组形式</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>Form.disable</td> 
   <td>disable表格所有内容</td> 
   <td>Form.disable(''form1'') (这个好象不work)</td> 
  </tr> 
  <tr> 
   <td>Form.focusFirstElement</td> 
   <td>把焦点集中在表格第一个元素上</td> 
   <td>Form.focusFirstElement(''form1'')</td> 
  </tr> 
  <tr> 
   <td>Form.reset</td> 
   <td>Reset表格</td> 
   <td>Form.reset(''form1'')</td> 
  </tr> 
  <tr> 
   <td>Form.Element.getValue</td> 
   <td>取得表格输入框的值</td> 
   <td>Form.Element.getValue(''text1'')</td> 
  </tr> 
  <tr> 
   <td>Form.Element.serialize</td> 
   <td>把表格中输入框内容转化成string</td> 
   <td>Form.Element.serialize(''text1'')</td> 
  </tr> 
  <tr> 
   <td>$F</td> 
   <td>等同于Form.Element.getValue()</td> 
   <td>$F(''text1'')</td> 
  </tr> 
  <tr> 
   <td>Effect.Highlight</td> 
   <td>高亮特效.</td> 
   <td>Effect.Highlight(''text1'')</td> 
  </tr> 
  <tr> 
   <td>Effect.Fade</td> 
   <td>褪色特效</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>Effect.Scale</td> 
   <td>放大缩小(百分比）</td> 
   <td> <p>Effect.Scale(''text1'', 200)<br>这里200 = 200%, 即两倍</p> </td> 
  </tr> 
  <tr> 
   <td>Effect.Squish</td> 
   <td>消失特效．文字缩小后消失</td> 
   <td>Effect.Squish(''text1'')</td> 
  </tr> 
  <tr> 
   <td>Effect.Puff</td> 
   <td>消失特效．文字放大后消失</td> 
   <td>Effect.Puff(''text1'')</td> 
  </tr> 
  <tr> 
   <td>Effect.Appear</td> 
   <td>出现特效</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>Effect.ContentZoom</td> 
   <td>ZOOM特效．</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>Ajax.Request</td> 
   <td>传送Ajax请求给服务器</td> 
   <td>Ajax.Request(''http://server/s.php'')</td> 
  </tr> 
  <tr> 
   <td>Ajax.Updater</td> 
   <td>传送Ajax请求给服务器并用答复的结果更新指定的Container</td> 
   <td>Ajax.Updater(''text1'',''http://server/s.php'')</td> 
  </tr> 
 </tbody> 
</table>

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

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

当点击Click Me的时候,div2就会交替隐藏或显示.注意,你可以给toggle加上无限个parameter,比如Element.toggle(''div2'',''div3'',''div4'',...)

[http_okone96.itpub.net_post_9033_283688]: http://okone96.itpub.net/post/9033/283688