prototype.js是一个很强大的Javascript函数库,它可以让你很轻松的使用一些特效,实现AJAX的功能.虽然prototype.js是为了Ruby On Rails开发的,它的纯Javascript的性质也使得它很容易用在其他的网络程序中.可惜的是,Prototype.js还没有强大的文档解释,尽管它的代码非常有条理,但是也给初学者造成了一定的麻烦.作者在README里说:
基本用法:以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'')来执行.
在Rails中Ajax的函数被封装成Ruby的函数,所以不必直接采用Ajax.Request,Ajax.Updater.但是知道它是怎么工作的也很有用.
分享到:
相关推荐
prototype.js是一个非常优雅的javascript基础类库,对javascript做了大量的扩展,而且很好的支持Ajax,国外有多个基于此类库实现的效果库,也做得很棒。 prototype.js不仅是一个有很大实用价值的js库,而且有很...
prototype.js 1.6中文手册、prototype.js 1.6英文手册、
prototype.js文件使用和讲解prototype.js文件使用和讲解prototype.js文件使用和讲解prototype.js文件使用和讲解
prototype.js 1.6 中英文手册 和 prototype.js 1.6
prototype.js是一个非常优雅的javas cript基础类库,对javas cript做了大量的扩展,而且很好的支持Ajax,国外有多个基于此类库实现的效果库,也做得很棒。 prototype.js不仅是一个有很大实用价值的js库,而且有很高...
大名鼎鼎的 prototype.js,帮助有这方面需要的朋友.
万一你没有使用过大名鼎鼎的prototype.js,那么让我来告诉你,prototype.js是由Sam Stephenson写的一个javascript类库。这个构思奇妙,而且兼容标准的类库,能帮助你轻松建立有高度互动的web2.0特性的富客户端...
prototype.js开发手册.pdf
prototype.js 1.4-1.6[全], 需要的朋友可以看看!
资源名称:PROTOTYPE.JS 1.4版开发者手册内容简介:prototype.js 是什么?万一你没有使用过大名鼎鼎的prototype.js,那么让我来告诉你,prototype.js是由Sam Stephenson写的一个javascript类库。这个构思奇妙,...
prototype开发者手册(中文版)+prototype.js
开发者网站: http://prototype.conio.net/ prototype学习资料包括: prototype14参考 prototype 1.3 源码解读.txt prototype 1.5 参考图 prototype 1.5pre1.js prototype 1.4.js
prototype.js源码及PDF文档, 推荐下载!
json.js json2.js json.jar prototype.js prototype.chm
Prototype.js (ver:1.5.1.1) Prototype.js 帮助(ver:1.5.1)英文PDF Prototype.js 帮助(ver:1.4)中文CHM Prototype.js 帮助(ver:1.4)中文PDF
ajax.js是本人从prototype-1.3.1.js提取的ajax库 为方便调用,本人另写了两个函式:mmAjaxUpdater和mmAjaxRequest,在实践中,这两个函数只兼容prototype1.3.1版本。因此对以上函数进行重写,现在已兼容所有版本的...
prototype.js的系列文章——$H()函数 百度的Ajax.js文件 常用JS prototype.js的系列文章——$R()函数 prototype.js的系列文章——Ajax.Request类 prototype.js的系列文章——Ajax.Updater类 prototype.js的系列文章...