Prototype库详解

1.Prototype库只是一个JavaScript函数库，它提供了大量工具方法来简化DOM操作，还扩展了Array、String等内建类，并新增了一些类、对象。Prototype共4000多行，主要功能分为三个部分：

简单、易用的工具函数

扩展了一些原有类，增加了一些自定义的对象

简化了Ajax开发的相关类

引入一个JavaScript函数库

<script type="text/javascript" scr="prototype-1.6.0.3.js">

使用Prototype对象

Prototype库提供了一个Prototype对象，提供了如下几个属性

Version：版本号

Browser：浏览器

BrowserFeatures：浏览器是否支持指定的特性

emptyFunction：空函数

K：返回参数本身

 

2.Prototype工具函数

1）.使用$()函数：

$(String tagName)：直接获取id为tagName的HTML元素

$(String tagName1,String tagName2)：获取id为tagName1、tagName2的HTML元素数组

2）.使用$$()函数：

$$()函数和$()函数的功能相同，都可用于访问文档的HTML元素，只是该元素的参数是一个或多个合法的CSS选择器，返回对应HTML元素所组成的数组

var eleList = $$("span");   //返回页面中所有<span.../>元素

var eleList = $$("#a");   //返回页面中ID为a的元素

var eleList = $$(".pt");   //返回页面中class为pt的元素

3）.使用$A()函数：

$A()函数能把单个的集合对象转换成一个Array对象

//获取id为menuBar的元素，再获取该元素的所有div子元素，返回一个HTMLCollection

var fileList = $("menuBar").getElementByTagName("div");

//将fileList转换为一个数组

var fileArray = $A(fileList);

4）.使用$F()函数：

$F()函数用于布偶去表单控件的值，比如input、textArea、select元素等，该函数既可用表单控件的id值作为参数，也可直接使用表单控件作为参数

$()函数返回的是一个HTML元素对象，而$F()返回的只是一个字符串值

5）.使用$H()函数：

$H()函数用于将JavaScript对象转换成Hash对象

var nav = $H(navigator);  //将navigator对象里的属性名和属性值转换成对应的Hash对象

6）.使用$R()函数

$R()函数是一个省略的写法，用于构造一个ObjectRange对象，ObjectRange是Prototype库的一个自定义类，是new ObjectRange(lowBound,upperBound,excludeBounds)的缩写形式

$R(start,end[,exclusive=false])：start为ObjectRange的起始值，end为ObjectRange的结束值，exclusive为ObjectRange是否排除两个边界值

//构造一个ObjectRange对象

var range = $R(10,20,false);

//遍历ObjectRange对象的每个元素

range.each(function(value,index)

{

      document.writeln(value+"<br />");

});

7）.使用Try.these()函数

Try.these()函数允许传入一系列的函数作为参数，Try.these()函数将以此调用传入的一系列函数，找到第一个能成功返回值的函数，并将该函数的返回值作为try.these()函数的返回值，如果没有将返回undefined。Try.these()的参数是多个函数的引用，而不是函数的调用。因此作为Try.these()参数的多个函数后不能有括号

function a () { return "hello";}

var b = Try.these(a);

 

3.Prototype的JSON支持

JSON常常作为Ajax技术的数据交换格式，Prototype库的JSON支持为Date、Object、Array、Hash、Number类增加了toJSON()方法，用于将这些对象转换成一个JSON格式的字符串。Prototype库还为String类增加了如下三个与JSON相关的方法：

isJSON()：判断指定字符串是否为合法的JSON字符串

evalJSON()：用于将指定字符串转换成JSON对象

toJSON()：用于将指定字符串转换成JSON字符串

 

4.Prototype的自定义对象和类

使用Element对象

addClassName(element,className)

className(element)

cleanWhitespace(element)

empty(element)

getDimensions(element)

getHeight(element)

getStyle(element,cssProperty)

hasClassName(element,className)

等一堆方法

使用Element.Methods

使用Enumerable

 

使用Form.Element操作表单控件

clear(field)

disable(element)

enable(element)

present(field)

focus(field)

select(field)

activate(field)

getValue()

serialize(element)

 

使用Form操作表单

disable(form)

enable(form)

focusFirstElement(form)

findFirstElement(form)

getElements(form)

getInputs(form[,typeName[,name]])

reset(form)：重设表单

request：该方法是发送异步请求的简单方法，它使用Ajax.Request对象发送异步请求，该方法会将表单内所有空间转为请求参数，并向表单action属性指定的URL发送异步请求，调用该方法时还可指定一个options参数，该参数将直接传给Ajax.Request对象的options参数

serialize(form)：返回指定表单内的所有表单控件所转换的查询字符串。即返回形如'field1=value1&field2=value2&field3=value3'的字符串

 

使用Hash对象

使用Event对象

使用Template对象

 

使用Class对象

create([superclass][,methods...])：定义一个新类，该新类继承superclass类里的所有方法

addMethods(methods)：扩展已有的类

 

两个常用的监听器

Form.Observer(form,interval,callback)：如果表单form内任何表单控件的值发生改变，interval秒后自动触发callback函数。该表单既可以是表单的id属性，也可以是表单本身

Form.Element.Observer(element,interval,callback)：如果表单控件element的值发生改变，interval秒后自动触发callback函数

 

5.Prototype常用的扩展

扩展Array

扩展document

扩展String

扩展Function

扩展Number

 

6.Prototype的Ajax支持

使用Ajax.Request类：

Ajax.Requst(URL,options)：创建一个Ajax.Request对象，对应于发送一次请求，参数URL是异步请求的地址。options参数指定发送请求的各种详细选项：

asynchronous

contentType

encoding

method

parameters

evalJS

evalJSON

Ajax.Response类：

利用Form.request方法：

Form.request()方法实际上是Ajax.Request的封装，该方法会将表单所有表单控件转换为请求参数，默认向表单action指定的URL发送异步请求

使用Ajax.Updater类：

每创建一个Ajax.Updater对象，就可完成一次Ajax交互。由于Ajax.Updater直接使用服务器响应来更新页面容器，因此创建Ajax.Updater时需要额外指定一个containers参数

Ajax.Updater(containers,url,options)

使用Ajax.PeriodicalUpdater类