prototype.js简介
2007-11-21 14:22

prototype.js是一个很强大的Javascript函数库,它可以让你很轻松的使用一些特效,实现AJAX的功能.虽然prototype.js是为了Ruby On Rails开发的,它的纯Javascript的性质也使得它很容易用在其他的网络程序中.可惜的是,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,使用起来很方便,要产生特定的效果的话只要用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简介的更多相关文章

  1. prototype.js 和 jQuery.js中 ajax 的使用

    这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部 ...

  2. HTML基础--JS简介、基本语法、类型转换、变量、运算符、分支语句、循环语句、数组、函数、函数调用.avi

    JS简介 1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司(已被Oracle收 ...

  3. 01 Node.js简介, 安装&配置

    Node.js 简介 Node.js 是什么 Node.js 有着强大而灵活的包管理器(node package manager,npm) 目前, 已经有强大第三方工具模块, 例如数据库连接, 网站开 ...

  4. Vue.js简介

    Vue.js简介 Vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab,虽然是Vue是一个个人项目,但在发展前景上个人认为绝不输于Google的AngularJ ...

  5. prototype.js $F()函数介绍

    $F()是一个能够简化编码量的函数, 对于字段输入控件有效,包括input.textarea.select等,该函数的输入参数为这些输入控件元素对象的id或元素对象本身,函数负责返回 这些输入控件元素 ...

  6. prototype.js 源码解读(02)

    如果你想研究一些比较大型的js框架的源码的话,本人建议你从其最初的版本开始研读,因为最初的版本东西少,易于研究,而后的版本基本都是在其基础上不断扩充罢了,所以,接下来我不准备完全解读prototype ...

  7. prototype.js 源码解读(01)

    prototype.js是一个设计的非常优雅且很有实用价值的js基础类库,其源码非常值得研究.研究它的源码不仅能提升个人水平,而且对你打下坚实的js基础也很有帮助.因本人技术水平有限,该解读仅供参考. ...

  8. JavaScript prototype.js提升JavaScript开发效率

    参考链接:http://www.yiibai.com/prototype/ Prototype提供主要方法类别: Prototype概述 Prototype实用功能 Prototype实用方法 Pro ...

  9. Gulp.js简介

    Gulp.js简介 我们讨论了很多关于怎么减少页面体积,提高重网站性能的方法.有些是操作是一劳永逸的,如开启服务器的gzip压缩,使用适当的图片格式,或删除一些不必要的字符.但有一些任务是每次工作都必 ...

随机推荐

  1. js按钮浮动随手指方向移动而移动

    window.document.getElementById("moveDIV").addEventListener("touchmove", function ...

  2. javascript函数一共可分为五类: ·常规函数 ·数组函数 ·日期函数 ·数学函数 ·字符串函数

    javascript函数一共可分为五类:    ·常规函数    ·数组函数    ·日期函数    ·数学函数    ·字符串函数    1.常规函数    javascript常规函数包括以下9个 ...

  3. java的三大框架(二)---Struts2

    Strtu2框架 1.控制器:ActionServlet充当控制层 2.模型层:由ActionForm及业务JavaBean实现 3.视图:用户的看到并与之交互的界面   由struts标签库和jsp ...

  4. 安装mysql因为/tmp权限不足而导致ERROR 1045 (28000): Access denied for user root@localhost (using password: NO)的解决方案

    本机是centos 6.5  安装的mysql是5.1的版本. 在安装mysql之后,第一次启动mysql服务的时候,需要/tmp有777(rwxrwxrwx)的权限,然而楼主的/tmp是755(rw ...

  5. hdu1087 dp

    题意:给定一串数字,要求选取一个严格递增的子序列,使序列和最大. dp[i] 表示以 i 为结尾的子序列的最大和,dp[i] = max{dp[j]+a[i]}(j 从 0 到 i-1),dp[0]是 ...

  6. wordmate 词典安装

    wordmate,使用 StarDict 的词典,可称为 Android 上的 StarDict 安装 wordmate 后,会在 SD 卡中生成 wordmate 文件夹,词典便放在此目录 下载词典 ...

  7. HTML 图像显示

    HTML 图像显示:图像标签:<img>,源属性:Src<img>是空标签,没有闭合标签,它只包含属性:显示图像时需要调用源属性src:src的值是图像的地址:语法:<i ...

  8. python socket

    #!/usr/bin/env python import sys import time import socket s = socket.fromfd(sys.stdin.fileno(),sock ...

  9. 在 anyproxy 上做 mock 和 fuzz 测试

    引言 写这个工具,主要有几个原因: 最近老大在尝试不同视角的测试----健壮性测试,任务下来,所以挽起袖子就开撸了 app很可能因为后端api做了变更,返回了一个异常的值而出现难以预知的问题,健壮性受 ...

  10. SVN设置钩子

    在post-commit 文件后增加两行: WEB_DIR="/data/www/wb.abc.cn/2.4" /usr/bin/svn update $WEB_DIR --use ...