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. String、Stringbuffer、StringBuilder的区别(转载)

    最近学习到StringBuffer,心中有好些疑问,搜索了一些关于String,StringBuffer,StringBuilder的东西,现在整理一下. 关于这三个类在字符串处理中的位置不言而喻,那 ...

  2. c语言数据结构之 快速排序

    编译器:VS2013 #include "stdafx.h"#include<stdlib.h> //函数声明 void QuickSort(int a[],int n ...

  3. bash获取properties文件资源

    #!/bin/sh prop_value="" function getProperty() { file=$ prop_key=$ prop_value=`cat $file | ...

  4. C# 实现软件的重启

    有些时候我们想用户在设置完之后使程序重新启动生效,这时候我们只需要简单的应用一下代码即可: if (MessageBox.Show("设置保存成功,下次启动时生效,是否马上重启软件?&quo ...

  5. Psam_ISO7816

    ISO7816协议1-4部分下载

  6. SQL增删改语句常用

    创建table: create table tab_name( col1 type; 约束:主键-外键-非空-检查-唯一 col2 type; ); 删除表 : drop table tab_name ...

  7. 初遇 dotcloud

    逛园子的时候看到新浪SAE,正学习建站呢,好东西.(论环境的影响...) 不过发现新浪SAE只支持 Python2,我更喜欢 Python3 e...找找其他的,发现了 dotcloud,遂试试,下面 ...

  8. C# 指定Webbrowser控件所用IE内核版本

    如果电脑上安装了IE8或者之后版本的IE浏览器,Webbrowser控件会使用IE7兼容模式来显示网页内容.解决方法是在注册表中为你的进程指定引用IE的版本号. 比如我的程序叫做a.exe,以64位机 ...

  9. SQLServer 数据库查看死锁、堵塞的SQL语句

    http://www.cnblogs.com/zhuque/archive/2012/11/08/2763343.html 死锁和堵塞一直是性能测试执行中关注的重点. 下面是我整理的监控sql ser ...

  10. jsp脚本元素

    在JSP页面中有三种脚本元素(Scripting Elements):声明.小脚本和表达式. 声明(declaration)用来在JSP页面中声明变量和定义方法.声明是以<%!开头,以%> ...