Prototype.js使用指南:
Prototype中包含一下几个部分:
base
: Prototype中应用的基本功能,基本上其他所有部分都依赖于它,包括用于面向对象风格的 Class.create和Object.extend,一个Try对象,函数绑定,number扩展,PeriodicalExecuter(周期性执行某个函数的功能)等
string : 对String原型的扩展,为string添加了strip,escapeHTML等等好用的方法
enumerable: 枚举类型(array, hash, range等)的父类对象,提供枚举类型的共同方法
array: 对Array原型的扩展,为array添加了indexOf、without等方法
hash: 为javascript提供了一个好用简单的Hash实现
range: 继承于enumerable,一个范围(例如3— 67 )对象
ajax: 一个功能强大好用的ajax框架
dom: 对基于浏览器的开发提供了很好的跨浏览器封装,并添加很多强大的功能
selector: 提供了使用class,css等选择元素的功能
form: 关于表单的一些功能
event : 简单的夸平台事件封装
position: 提供了一些关于元素位置方面的功能
string : 对String原型的扩展,为string添加了strip,escapeHTML等等好用的方法
enumerable: 枚举类型(array, hash, range等)的父类对象,提供枚举类型的共同方法
array: 对Array原型的扩展,为array添加了indexOf、without等方法
hash: 为javascript提供了一个好用简单的Hash实现
range: 继承于enumerable,一个范围(例如3— 67 )对象
ajax: 一个功能强大好用的ajax框架
dom: 对基于浏览器的开发提供了很好的跨浏览器封装,并添加很多强大的功能
selector: 提供了使用class,css等选择元素的功能
form: 关于表单的一些功能
event : 简单的夸平台事件封装
position: 提供了一些关于元素位置方面的功能
base.js中包含下面的内容:
类的创建与继承:
Class.create(): 创建一个类,例如 person =Class.create()
Object.extend(destination, source): 把source中方法属性copy到destination(使用for property in source),需要注意的是,javascript中除了基本类型(Number, Boolean)外都是引用类型,所以这种copy一般只是copy引用而已,destination和source还是指向同一个方法或对象属性 (function array object )
在面向对象的编程中,一般通过Class.create新建一个类,如果这个类继承于另一个类,一般使用Object.extend ( class .prototype, parentClass.prototype)或者Object.extend( class .prototype, aparentClassInstance)
Object构造函数的扩展:
Object是其他对象实例的构造函数(var a = new Object()),也是所有其他类的父类,对Object直接扩展(注意不是扩展Object.prototype,扩展 Object.prototype相当于添加实例方法)相当于为Object类添加静态方法
Object.inspect( object ): 调用object的inspect(如果定义了)或toString方法,返回一个对象的字符串表示
Object.keys( object ): 返回一个对象的所有属性和方法名称组成的数组, 例如Object.keys(document.body)
Object.values( object ):返回一个对象的所有属性和方法的值组成的数组, 例如Object.values(docuement)
Object.clone( object ): 返回一个对象的clone版本,其实是执行Object.extent方法把object中的方法属性copy到一个新对象中,然后返回这个对象
函数邦定:
定义了Function对象的两个方法,bind和bindAsEventListener,这两个方法是一个函数的两个方法,对于java、c#程序员来说,看到这个也许感到很惊讶,因为在他们看来函数只是一个程序语句组织结构而已— >怎么还有方法,而且还可以扩展?这也是javascript等脚本语言相对于java等一个非常强大的功能,函数也是一个对象,函数名就是这个对象的名称,只要你愿意,你也可以使用 new Function(…)来定义函数,所以为函数定义方法也就很正常不过了
这两个函数的主要作用是为了解决使用javascript面向对象风格编程中this的引用问题,在javasctipt中this关键字始终指向调用该函数的对象或者指向使用call,apply方法指定的对象(具体这方面的知识可以自己google一下,以下系列对prototype的介绍也假设读者对javascript语言比较熟悉了,如果不熟悉可以找本javascript权威指南这本书看看) 要理解这个问题首先要理解 始终指向这个问题,就是this这个关键字比较特殊,不能把他当成一般的变量名看待,最常见的一个错误就是在返回函数的调用中使用this,例如return function() {this.aMethod()} , 当你下次调用这个返回的匿名方法时,这个this引用的内容又指向了调用这个函数的对象了,记住的一点的this是个关键字,不是变量名,不会产生闭包
对Number的扩展(注意num也可以看成对象,其实是在使用的时候系统自动打包成Number对象):
toColorPart:把数字转换为可以用于表示color的16进制值:例如 7.toColorPart()=>"07",28.toColorPart()=>"1C"
succ: 返回num++, 但不改变num本身的值,其实就是 return this +1
times:对从0到这个数字轮流调用一个函数, 例如function a(n) {docuement.write(n)} , 10 .times(a), 将显示012345678910, 注意函数也是一个对象,而且与其他对象并没有实质的区别
Try对象: Try对象提供了一个很有趣的功能, 先看一下如下的代码:
var Ajax = {
getTransport: function() {
return Try.these(
function() {return new XMLHttpRequest()},
function() {return new ActiveXObject(’Msxml2.XMLHTTP’)},
function() {return new ActiveXObject(’Microsoft.XMLHTTP’)} )
|| false;
}
}
Try对象提供了一个方法these, 这个方法接受一个函数类型的参数列表,然后轮流执行这些函数,当其中一个函数没有产生错误时,就停止执行,并且返回这个函数返回的值,自己慢慢体会吧
PeriodicalExecuter(周期性执行器)对象
这个对象是对setInterval方法的简单封装,使用方法如下
var a=new PeriodicalExecuter(callback, frequency ) ,其中callback指要执行的函数名 frequency指 每 次执行的时间间隔
要停止的话,调用这个对象的stop方法就可以了 a.stop()
Class.create(): 创建一个类,例如 person =Class.create()
Object.extend(destination, source): 把source中方法属性copy到destination(使用for property in source),需要注意的是,javascript中除了基本类型(Number, Boolean)外都是引用类型,所以这种copy一般只是copy引用而已,destination和source还是指向同一个方法或对象属性 (function array object )
在面向对象的编程中,一般通过Class.create新建一个类,如果这个类继承于另一个类,一般使用Object.extend ( class .prototype, parentClass.prototype)或者Object.extend( class .prototype, aparentClassInstance)
Object构造函数的扩展:
Object是其他对象实例的构造函数(var a = new Object()),也是所有其他类的父类,对Object直接扩展(注意不是扩展Object.prototype,扩展 Object.prototype相当于添加实例方法)相当于为Object类添加静态方法
Object.inspect( object ): 调用object的inspect(如果定义了)或toString方法,返回一个对象的字符串表示
Object.keys( object ): 返回一个对象的所有属性和方法名称组成的数组, 例如Object.keys(document.body)
Object.values( object ):返回一个对象的所有属性和方法的值组成的数组, 例如Object.values(docuement)
Object.clone( object ): 返回一个对象的clone版本,其实是执行Object.extent方法把object中的方法属性copy到一个新对象中,然后返回这个对象
函数邦定:
定义了Function对象的两个方法,bind和bindAsEventListener,这两个方法是一个函数的两个方法,对于java、c#程序员来说,看到这个也许感到很惊讶,因为在他们看来函数只是一个程序语句组织结构而已— >怎么还有方法,而且还可以扩展?这也是javascript等脚本语言相对于java等一个非常强大的功能,函数也是一个对象,函数名就是这个对象的名称,只要你愿意,你也可以使用 new Function(…)来定义函数,所以为函数定义方法也就很正常不过了
这两个函数的主要作用是为了解决使用javascript面向对象风格编程中this的引用问题,在javasctipt中this关键字始终指向调用该函数的对象或者指向使用call,apply方法指定的对象(具体这方面的知识可以自己google一下,以下系列对prototype的介绍也假设读者对javascript语言比较熟悉了,如果不熟悉可以找本javascript权威指南这本书看看) 要理解这个问题首先要理解 始终指向这个问题,就是this这个关键字比较特殊,不能把他当成一般的变量名看待,最常见的一个错误就是在返回函数的调用中使用this,例如return function() {this.aMethod()} , 当你下次调用这个返回的匿名方法时,这个this引用的内容又指向了调用这个函数的对象了,记住的一点的this是个关键字,不是变量名,不会产生闭包
对Number的扩展(注意num也可以看成对象,其实是在使用的时候系统自动打包成Number对象):
toColorPart:把数字转换为可以用于表示color的16进制值:例如 7.toColorPart()=>"07",28.toColorPart()=>"1C"
succ: 返回num++, 但不改变num本身的值,其实就是 return this +1
times:对从0到这个数字轮流调用一个函数, 例如function a(n) {docuement.write(n)} , 10 .times(a), 将显示012345678910, 注意函数也是一个对象,而且与其他对象并没有实质的区别
Try对象: Try对象提供了一个很有趣的功能, 先看一下如下的代码:
var Ajax = {
getTransport: function() {
return Try.these(
function() {return new XMLHttpRequest()},
function() {return new ActiveXObject(’Msxml2.XMLHTTP’)},
function() {return new ActiveXObject(’Microsoft.XMLHTTP’)} )
|| false;
}
}
Try对象提供了一个方法these, 这个方法接受一个函数类型的参数列表,然后轮流执行这些函数,当其中一个函数没有产生错误时,就停止执行,并且返回这个函数返回的值,自己慢慢体会吧
PeriodicalExecuter(周期性执行器)对象
这个对象是对setInterval方法的简单封装,使用方法如下
var a=new PeriodicalExecuter(callback, frequency ) ,其中callback指要执行的函数名 frequency指 每 次执行的时间间隔
要停止的话,调用这个对象的stop方法就可以了 a.stop()
下面介绍Prototype对String对象的扩展部分:
这部分主要为string对象添加了几个很有用的方法:
strip(): 去掉字符串两边的空白, 例如 " jj " .strip()返回 " jj "
stripTags():去掉字符串中的html标签
stripScripts(): 去掉字符串中的javascript代码段
extractScripts(): 返回字符串中的javascript代码,返回数组
evalScripts(): 执行字符串中的javascript代码
escapeHTML():将字符串中的html代码转换为可以直接显示的格式, 例如将 < 转化为 & lt; ,在ie6中有bug,执行这个操作返回的字符串,将多个连在一起的空白变成了一个,所以很多换行什么的都被去掉了
unescapeHTML(): escapeHTML的反向过程
truncate(length, truncation): 截断,例如 " abcdefghigkl " .truncate( 10 )返回abcdefg…, truncation默认为 " … " toQueryParams(separator) / parseQuery(separator):将一个querystring转化为一个hash表(其实是一个对象,在javascript中对象可以当成hash表来用,因为对象的属性或方法可以通过object[propertyName]来访问)
toArray(): return this .split( ' ’), 转化为一个字符数组
camelize(): 将background - color的形式转化为backgroundColor形式,用在style / css中
capitalize(): 返回一个首字母大写的字符串
inspect(useDoubleQuotes): 返回字符串的表示形式, 例如 " sdfj"sfa " .inspect() 返回 “’sdfj " sfa’”
gsub(pattern, replacement):pattern是一个正则表达式,replacement是一个函数(或者是一个template字符串),对于字符串中每个匹配pattern的部分使用replacement处理,然后将 replacement返回的值将原来匹配的部分替换掉,例如 " skdjfAsfdjkAdk " .gsub( / A / ,function(match) {return match[0].toLowerCase()} ), 将字符串所有的A转化为a, 注意pattern中不要添加g选项,因为gsub会递归的执行match方法
sub(pattern, replacement, count) :gsub的另一种形式,不过可以设置执行的次数
scan(pattern, iterator): 跟gsub差不多,但是返回的是字符串本身,也就是说对于pattern中的每个匹配执行iterator,但是不返回替换的字符串 " skdjfAsfdjkAdk " .gsub( / A / ,function() {alert ‘have a A’} )
underscore(): ‘borderBottomWidth’.underscore() -> ‘border_bottom_width’
dasherize(): ‘Hello_World’.dasherize() -> ‘Hello - World’
Template模板类:
使用方法:
var template = new Template(replacement, pattern);
template.evaluate( object ) 有点像php中的模板,默认(没有提供pattern)将 {propertyName} 形式的东西替换了object的属性值
strip(): 去掉字符串两边的空白, 例如 " jj " .strip()返回 " jj "
stripTags():去掉字符串中的html标签
stripScripts(): 去掉字符串中的javascript代码段
extractScripts(): 返回字符串中的javascript代码,返回数组
evalScripts(): 执行字符串中的javascript代码
escapeHTML():将字符串中的html代码转换为可以直接显示的格式, 例如将 < 转化为 & lt; ,在ie6中有bug,执行这个操作返回的字符串,将多个连在一起的空白变成了一个,所以很多换行什么的都被去掉了
unescapeHTML(): escapeHTML的反向过程
truncate(length, truncation): 截断,例如 " abcdefghigkl " .truncate( 10 )返回abcdefg…, truncation默认为 " … " toQueryParams(separator) / parseQuery(separator):将一个querystring转化为一个hash表(其实是一个对象,在javascript中对象可以当成hash表来用,因为对象的属性或方法可以通过object[propertyName]来访问)
toArray(): return this .split( ' ’), 转化为一个字符数组
camelize(): 将background - color的形式转化为backgroundColor形式,用在style / css中
capitalize(): 返回一个首字母大写的字符串
inspect(useDoubleQuotes): 返回字符串的表示形式, 例如 " sdfj"sfa " .inspect() 返回 “’sdfj " sfa’”
gsub(pattern, replacement):pattern是一个正则表达式,replacement是一个函数(或者是一个template字符串),对于字符串中每个匹配pattern的部分使用replacement处理,然后将 replacement返回的值将原来匹配的部分替换掉,例如 " skdjfAsfdjkAdk " .gsub( / A / ,function(match) {return match[0].toLowerCase()} ), 将字符串所有的A转化为a, 注意pattern中不要添加g选项,因为gsub会递归的执行match方法
sub(pattern, replacement, count) :gsub的另一种形式,不过可以设置执行的次数
scan(pattern, iterator): 跟gsub差不多,但是返回的是字符串本身,也就是说对于pattern中的每个匹配执行iterator,但是不返回替换的字符串 " skdjfAsfdjkAdk " .gsub( / A / ,function() {alert ‘have a A’} )
underscore(): ‘borderBottomWidth’.underscore() -> ‘border_bottom_width’
dasherize(): ‘Hello_World’.dasherize() -> ‘Hello - World’
Template模板类:
使用方法:
var template = new Template(replacement, pattern);
template.evaluate( object ) 有点像php中的模板,默认(没有提供pattern)将 {propertyName} 形式的东西替换了object的属性值
Enumerable.js包含以下部分:
Enumerable是一个抽象对象(需要说明的是,javascript中并没有类的概念,所指的类也就是一个函数,继承一般指的是一个对象(父)将它 的方法属性copy(通过Object.extend, copy的是引用)到子类(函数)的prototype属性(一个对象)中)
Enumerable不能直接使用,它被很多枚举类型(Hash、Array、Range等)所继承,继承的类型都要实现一个_each方法,提供具体类型的枚举方法
Enumerable为其他子类提供了如下的方法:
each(iterator): iterator是一个函数对象, 这个方法调用具体类型的_each方法对自身包含的每个对象调用iterator,例如如果Enumerable具体指的是一个Array,eg: var a = [ 2 , 3 , 4 ], 则a.each(iterator)方法将依次调用iterator( 2 , 0 ) ,iterator( 3 , 1 ), iterator( 4 , 3 ),其中第二个参数指的是索引。这个方法几乎在Enumerable中的每个方法中都要用到
eachSlice(number, iterator):将Enumerable 类型对象每个每个按照number分开,例如[ 1 , 2 , 3 , 4 , 5 ].eachSlice( 3 ) => [[ 1 , 2 , 3 ],[ 4 , 5 ]], 没有提供iterator, 则iterator = Prototype.K: function(k) {return k} ,Prototype中的很多iterator默认值都是这个,或者是Prototype.emptyFunction: function() {} ,其实实际上返回的是[iterator([ 1 , 2 , 3 ]),iterator([ 4 , 5 ])]
all(iterator): 对Enumerable类型中的每个值调用iterator,如果其中有一个返回false,则返回false,否则返回true,相当于判断是否每个值执行iterator都是 " true "
any(iterator): 跟all相反,判断是否每个值都是 " false " (是否有一个值是true)
collect(iterator) / map: 对每个值调用iterator,将结果组成一个新的数组返回
detect(iterator) / find: 对每个值调用iterator,如果有一个不为false,则返回这个执行iterator后不为false的值(不是返回执行iterator后的值),相当于找出第一个真值
findAll(iterator) / select: 相当于detect, 但是找出所有的真值,返回一个数组
grep(pattern, iterator):返回所以符合pattern的值,iterator提供的话,则返回执行iterator的值
include( object)/ member: 数组中是否包含object
inGroupsOf(number, fillWith): eachSlice的变异版本,按照number将对象分开,如果分开后的数组的最后一个值的length小于number, 则用fillwith填充, 例如[ 1 , 2 , 3 , 4 , 5 ].inGroupsOf( 3 ) => [[ 1 , 2 , 3 ],[ 4 , 5 , null ]]
inject(memo, iterator): 注入
invoke(method): 调用
max(iterator): 最大值
min(iterator): 最小值
partition(iterator): 分离
pluck(property): 采集
reject(iterator): 不合格的产品, 于findAll相反
sortBy(iterator): 根据iterator排序,如果调用的对象是Array的话,直接调用内置的sort(iterator)就行了
toArray() / entries: 将调用对象的每个值组成一个数组返回
zip(): 例如[ 2 , 3 , 4 ].zip([ 5 , 6 , 7 ]) => [[ 2 , 5 ],[ 3 , 6 ],[ 4 , 7 ]], 如果最后一个参数类型为function,将返回[iterator([ 2 , 5 ]),iterator([ 3 , 6 ]),iterator([ 4 , 7 ])],
inspect(): Enumerable对象的字符串表示
each(iterator): iterator是一个函数对象, 这个方法调用具体类型的_each方法对自身包含的每个对象调用iterator,例如如果Enumerable具体指的是一个Array,eg: var a = [ 2 , 3 , 4 ], 则a.each(iterator)方法将依次调用iterator( 2 , 0 ) ,iterator( 3 , 1 ), iterator( 4 , 3 ),其中第二个参数指的是索引。这个方法几乎在Enumerable中的每个方法中都要用到
eachSlice(number, iterator):将Enumerable 类型对象每个每个按照number分开,例如[ 1 , 2 , 3 , 4 , 5 ].eachSlice( 3 ) => [[ 1 , 2 , 3 ],[ 4 , 5 ]], 没有提供iterator, 则iterator = Prototype.K: function(k) {return k} ,Prototype中的很多iterator默认值都是这个,或者是Prototype.emptyFunction: function() {} ,其实实际上返回的是[iterator([ 1 , 2 , 3 ]),iterator([ 4 , 5 ])]
all(iterator): 对Enumerable类型中的每个值调用iterator,如果其中有一个返回false,则返回false,否则返回true,相当于判断是否每个值执行iterator都是 " true "
any(iterator): 跟all相反,判断是否每个值都是 " false " (是否有一个值是true)
collect(iterator) / map: 对每个值调用iterator,将结果组成一个新的数组返回
detect(iterator) / find: 对每个值调用iterator,如果有一个不为false,则返回这个执行iterator后不为false的值(不是返回执行iterator后的值),相当于找出第一个真值
findAll(iterator) / select: 相当于detect, 但是找出所有的真值,返回一个数组
grep(pattern, iterator):返回所以符合pattern的值,iterator提供的话,则返回执行iterator的值
include( object)/ member: 数组中是否包含object
inGroupsOf(number, fillWith): eachSlice的变异版本,按照number将对象分开,如果分开后的数组的最后一个值的length小于number, 则用fillwith填充, 例如[ 1 , 2 , 3 , 4 , 5 ].inGroupsOf( 3 ) => [[ 1 , 2 , 3 ],[ 4 , 5 , null ]]
inject(memo, iterator): 注入
invoke(method): 调用
max(iterator): 最大值
min(iterator): 最小值
partition(iterator): 分离
pluck(property): 采集
reject(iterator): 不合格的产品, 于findAll相反
sortBy(iterator): 根据iterator排序,如果调用的对象是Array的话,直接调用内置的sort(iterator)就行了
toArray() / entries: 将调用对象的每个值组成一个数组返回
zip(): 例如[ 2 , 3 , 4 ].zip([ 5 , 6 , 7 ]) => [[ 2 , 5 ],[ 3 , 6 ],[ 4 , 7 ]], 如果最后一个参数类型为function,将返回[iterator([ 2 , 5 ]),iterator([ 3 , 6 ]),iterator([ 4 , 7 ])],
inspect(): Enumerable对象的字符串表示
Array.js包含以下内容:
$A =
Array.from(iterable): 将iterable转化为数组,如果iterable定义了toArray方法,就调用这个方法,否则利用iterable的length属性进行枚举, 如果iterable没有length属性的话就返回空数组[]
Array对象除了扩展Enumerable对象的方法外,另外扩展了如下的几个方法,
注意以下方法除了clear外都不改变原来数组,而是返回一个新数组:
clear(): 清除数组,利用arr.length = 0
first(): 返回第一个元素
last():返回最后一个元素
compact(): 去除数组中值为null或undefined的元素
flatten(): 将数组扁平化,例如[ 3 , 4 ,[ 6 , 7 ]]变为[ 3 , 4 , 6 , 7 ]
without(): 去除指定的元素, 可以指定多个值, 例如[ 4 , 56 , 7 , 8 ].without( 4 , 7 ) 返回[ 56 , 8 ]
indexOf( object ): 返回指定的元素在数组中的索引,不包含则返回 - 1
reverse(inline):Array内置函数reverse的增强,当inline为true时,跟内置的reverse函数效果一样,改变原数组的值,否则不改变原来的值
reduce(): 如果数组只有一个元素,则返回这个元素,否则返回数组本身
uniq(): 返回没有重复元素的数组
clone(): 返回一个跟数组相同的数组,Array中的toArray方法覆盖了Enumerable中的toArray方法,指向了这个方法
inspect(): 跟数组的toString方法类似,返回对象的字符串表示,例如[ 2 , 3 ].inspect() 返回 " [2,3] "
Array对象除了扩展Enumerable对象的方法外,另外扩展了如下的几个方法,
注意以下方法除了clear外都不改变原来数组,而是返回一个新数组:
clear(): 清除数组,利用arr.length = 0
first(): 返回第一个元素
last():返回最后一个元素
compact(): 去除数组中值为null或undefined的元素
flatten(): 将数组扁平化,例如[ 3 , 4 ,[ 6 , 7 ]]变为[ 3 , 4 , 6 , 7 ]
without(): 去除指定的元素, 可以指定多个值, 例如[ 4 , 56 , 7 , 8 ].without( 4 , 7 ) 返回[ 56 , 8 ]
indexOf( object ): 返回指定的元素在数组中的索引,不包含则返回 - 1
reverse(inline):Array内置函数reverse的增强,当inline为true时,跟内置的reverse函数效果一样,改变原数组的值,否则不改变原来的值
reduce(): 如果数组只有一个元素,则返回这个元素,否则返回数组本身
uniq(): 返回没有重复元素的数组
clone(): 返回一个跟数组相同的数组,Array中的toArray方法覆盖了Enumerable中的toArray方法,指向了这个方法
inspect(): 跟数组的toString方法类似,返回对象的字符串表示,例如[ 2 , 3 ].inspect() 返回 " [2,3] "
hash.js包含以下内容:
Hash对象(关联数组)是Prototype新建的一个对象,要创建一个Hash对象可以调用$H(
object
)方法,使用这个方法将生成一个基于 object对象的Hash对象,生成的Hash对象将object的属性名作为key,将object的属性值最为键值,因为javascript本身的特点(对象本身就是关联数组) ,所以实现Hash也很简单,Prototype中的Hash只是javascript的关联数组(对象)而已
Prototype中的Hash对象继承自Enumerable对象,所以也具有Enumerable对象的所有属性和方法,另外它具有以下的方法:
keys(): 返回hash的键值数组
values(): 返回值得数组
merge(hash): 合并两个hash
toQueryString(): 跟string的toQueryParams方法想法,将hash转化为一个querystring, 会调用encodeURIComponent对键和值进行编码
inspect(): hash的字符串表示
因为hash只是javascript的一个普通的对象而已,所以添加一个键值对使用: hash[key] = value就可以了,删除一个键值对使用 detele hash[key]就可以了
Prototype中的Hash对象继承自Enumerable对象,所以也具有Enumerable对象的所有属性和方法,另外它具有以下的方法:
keys(): 返回hash的键值数组
values(): 返回值得数组
merge(hash): 合并两个hash
toQueryString(): 跟string的toQueryParams方法想法,将hash转化为一个querystring, 会调用encodeURIComponent对键和值进行编码
inspect(): hash的字符串表示
因为hash只是javascript的一个普通的对象而已,所以添加一个键值对使用: hash[key] = value就可以了,删除一个键值对使用 detele hash[key]就可以了
Range.js
Range对象是一个继承自Enumerable的
"
范围
"
对象,你可以把它看成[x,x
+
1
,x
+
2
,x
+
3
……x
+
n]的数组看待,但是比这样的数组更节省存储空间,因为range对象只是保存x和x
+
n而已
要创建一个Range对象调用$R(start, end, exclusive) 函数就可以了,exclusive指定是否包含end本身,如果没有指定或为false则包含end,否则不包含
你可以利用Enumerable中定义的方法来操作range对象,range对象只是实现了Enumerable对象需要的枚举逻辑_each和覆盖了include方法而已
要创建一个Range对象调用$R(start, end, exclusive) 函数就可以了,exclusive指定是否包含end本身,如果没有指定或为false则包含end,否则不包含
你可以利用Enumerable中定义的方法来操作range对象,range对象只是实现了Enumerable对象需要的枚举逻辑_each和覆盖了include方法而已
Ajax.js包含以下内容:
Prototype中的ajax.js提供了一个非常好用的ajax框架,一般应用中简单的调用以下代码就可以了
new Ajax.Request(
url, {method: “get”,
onSuccess: showFilter,
onFailure: function(request){alert(”Server error!”)},
onException: showError}
);
这个框架中提供了如下的对象和方法等:
Ajax对象:
只有一个getTransport方法,返回一个XMLHttpRequest对象,另外有一个activeRequestCount属性,反映当前正在处理的ajax数量
Ajax.Responders对象:
继承自Enumerable,管理全局Ajax的请求,具有如下方法
register(responder):注册一个管理ajax请求的对象
unregister(responder):撤销一个管理ajax请求的对象
dispatch(callback, request, transport, json):触发注册的处理对象的方法
这个对象一般很少使用,系统中已经使用如下的代码注册了一个处理对象
Ajax.Responders.register( {
onCreate: function() {
Ajax.activeRequestCount++;
},
onComplete: function() {
Ajax.activeRequestCount–;
}
} );
Ajax.Base类:
Ajax的基类, 只有一个方法setOptions(options), 默认request参数如下,你可以在新建Ajax.request时指定:
method: ‘post’,
asynchronous: true ,
contentType: ‘application / x - www - form - urlencoded’,
encoding: ‘UTF - 8 ′,
Ajax.Request类:
ajax主要的类,继承自ajax.base类,客户端使用 new Ajax.Request(url,options) 调用,options是一个对象(关联数组), 在options中可以指定method,asynchronous,contentType,encoding,parameters, postBody,username,password等选项,其中parameters可以是字符传或者关联数组象,
另外在options中还可以通过requestHeaders指定request heads,其中requestHeaders可以是数组(例如[”Connection”,”Close”,”aheadkey”,”aheadvalue”])或一个关联数组;
options中最重要的选项就是指定ajax的回调方法,可以定义onComplete, onSuccess, onFailure, onException(执行过程中发生异常调用的方法,主要为onComplete, onSuccess, onFailure等回调方法产生的),甚至可以定义on404,on503这样的回调方法,它们的参数为(transport, json),其中transport为请求的XMLHttpRequest对象, json是evalJSON的结果
如果返回的是一个javascript文件(根据返回的Content - type头判断)将会执行evalResponse方法,另外Ajax.Request对象还有一个evalJSON方法,取得文件的时候就会执行
这个对象的方法列表如下:
request(url) : 发送请求,new的时候就已经调用了,所以一般不需要使用
success(): 判断request是否成功了
getHeader(name):根据name得到request head
evalJSON(): 执行getHeader(”X - JSON”),并返回结果
evalResponse(): 执行返回的responseText并返回
Ajax.Updater类:
继承自Ajax.Request,只是比Ajax.Request增加了更新html元素的功能,一般使用方法是new Ajax.Updater(element, url, options), element可以是一个元素,也可以是 {success:e1,failure:e2} 这种形式,
默认情况下不会执行返回结果中的javascript,如果你先执行,你可以指定options中的evalScripts为true
默认情况下是替换指定元素的内容,如果你希望是添加,可以指定options的insertion参数, insertion是一个Insertion.Before、Insertion.Top或Insertion.Bottom、 Insertion.After(将在dom.js中介绍)
Ajax.PeriodicalUpdater类:
继承自Ajax.Base,周期性的更新一个html元素的内容,这个类会调用Ajax.Updater对html元素进行周期性的更新,使用方法为new Ajax.PeriodicalUpdater(container, url, options), 参数跟Ajax.Updater差不多,其中options可以设置frequency(默认为2),decay,decay指的是当请求的内容没有变化的时候,frequency需要延长的倍数,默认是1,例如如果decay设为2,frequency设为3而内容一直没有变化,则请求的时间依次会变为 3 , 6 , 12 ,24等
start(): 开始更新, 初始化的时候会自动调用
stop(): 停止更新
new Ajax.Request(
url, {method: “get”,
onSuccess: showFilter,
onFailure: function(request){alert(”Server error!”)},
onException: showError}
);
这个框架中提供了如下的对象和方法等:
Ajax对象:
只有一个getTransport方法,返回一个XMLHttpRequest对象,另外有一个activeRequestCount属性,反映当前正在处理的ajax数量
Ajax.Responders对象:
继承自Enumerable,管理全局Ajax的请求,具有如下方法
register(responder):注册一个管理ajax请求的对象
unregister(responder):撤销一个管理ajax请求的对象
dispatch(callback, request, transport, json):触发注册的处理对象的方法
这个对象一般很少使用,系统中已经使用如下的代码注册了一个处理对象
Ajax.Responders.register( {
onCreate: function() {
Ajax.activeRequestCount++;
},
onComplete: function() {
Ajax.activeRequestCount–;
}
} );
Ajax.Base类:
Ajax的基类, 只有一个方法setOptions(options), 默认request参数如下,你可以在新建Ajax.request时指定:
method: ‘post’,
asynchronous: true ,
contentType: ‘application / x - www - form - urlencoded’,
encoding: ‘UTF - 8 ′,
Ajax.Request类:
ajax主要的类,继承自ajax.base类,客户端使用 new Ajax.Request(url,options) 调用,options是一个对象(关联数组), 在options中可以指定method,asynchronous,contentType,encoding,parameters, postBody,username,password等选项,其中parameters可以是字符传或者关联数组象,
另外在options中还可以通过requestHeaders指定request heads,其中requestHeaders可以是数组(例如[”Connection”,”Close”,”aheadkey”,”aheadvalue”])或一个关联数组;
options中最重要的选项就是指定ajax的回调方法,可以定义onComplete, onSuccess, onFailure, onException(执行过程中发生异常调用的方法,主要为onComplete, onSuccess, onFailure等回调方法产生的),甚至可以定义on404,on503这样的回调方法,它们的参数为(transport, json),其中transport为请求的XMLHttpRequest对象, json是evalJSON的结果
如果返回的是一个javascript文件(根据返回的Content - type头判断)将会执行evalResponse方法,另外Ajax.Request对象还有一个evalJSON方法,取得文件的时候就会执行
这个对象的方法列表如下:
request(url) : 发送请求,new的时候就已经调用了,所以一般不需要使用
success(): 判断request是否成功了
getHeader(name):根据name得到request head
evalJSON(): 执行getHeader(”X - JSON”),并返回结果
evalResponse(): 执行返回的responseText并返回
Ajax.Updater类:
继承自Ajax.Request,只是比Ajax.Request增加了更新html元素的功能,一般使用方法是new Ajax.Updater(element, url, options), element可以是一个元素,也可以是 {success:e1,failure:e2} 这种形式,
默认情况下不会执行返回结果中的javascript,如果你先执行,你可以指定options中的evalScripts为true
默认情况下是替换指定元素的内容,如果你希望是添加,可以指定options的insertion参数, insertion是一个Insertion.Before、Insertion.Top或Insertion.Bottom、 Insertion.After(将在dom.js中介绍)
Ajax.PeriodicalUpdater类:
继承自Ajax.Base,周期性的更新一个html元素的内容,这个类会调用Ajax.Updater对html元素进行周期性的更新,使用方法为new Ajax.PeriodicalUpdater(container, url, options), 参数跟Ajax.Updater差不多,其中options可以设置frequency(默认为2),decay,decay指的是当请求的内容没有变化的时候,frequency需要延长的倍数,默认是1,例如如果decay设为2,frequency设为3而内容一直没有变化,则请求的时间依次会变为 3 , 6 , 12 ,24等
start(): 开始更新, 初始化的时候会自动调用
stop(): 停止更新
dom.js包含以下内容:
这部分提供了很多(写的都有点烦了)方便的操作dom的方法:包含有名的$方法、document.getElementsByClassName方法,以及Element对象、Insertion对象
以下部分一个一个的详细介绍:
$(element):getElementById的封装,element可以是一个元素的id或元素本身,也可以是一个数组,这时返回一个数组,使用$方法,会自动调用Element.extend(element)方法,这样的话使元素可以直接调用 Element中的方法, 例如Element.hide(element)可以写成这样$(element).hide()
document.getElementsByClassName(className, parentElement): 根据class选择元素
Element.extend(element): 扩展element,使element可以直接调用Element、Form.Element或Form中定义的方法
Element对象的方法:
visible: function(element):判断element是否可见, 参数element可以是元素本身或元素id(下面的方面的参数基本上都是这样的)
toggle: function(element):反转element的可见性
hide: function(element):隐藏元素
show: function(element):显示元素
remove: function(element):移除元素
update: function(element, html) :使用html更新element的内容,html中的script会执行(下同)
replace: function(element, html):将element替换为html
inspect: function(element):element的字符串表示
recursivelyCollect: function(element, property): 递归收集, 例如Element.recursivelyCollect(element, " parentNode " )返回element所有的祖先节点, 注意只返回nodeType == 1的元素,也就是不返回文本元素
ancestors: function(element): 等同于上面的例子,返回元素的所有祖先节点
descendants: function(element): 返回所有子孙节点
immediateDescendants: function(element):返回元素的直接的子孙节点(子节点)的数组
previousSiblings: function(element):返回元素前面的兄弟节点
nextSiblings: function(element):返回位于元素后面的兄弟节点
siblings: function(element):返回元素所有的兄弟节点
match: function(element, selector):使用Selector的match方法匹配元素(Selector将在后面介绍), selector参数是一个css selector表达式或者Prototype中的一个Selector实例,如果element匹配selector则返回true,否则返回 false ,例如对于一个className为logcss的div来说,下面的表达式返回true, $(element).match( " div.logcss " )
up(element, expression, index):利用Selector.findElement方法找到element元素的祖先节点中符合表达式expression的所有元素组成的数组索引为index的元素,也可以忽略expression(默认为 * ,表示匹配所有元素)和index(默认为0),直接这样调用up(element, index)或up(element)
down(element, expression, index):跟up一样,只是返回的是子孙节点
previous(element, expression, index):返回前面的兄弟节点
next(element, expression, index):返回后面的兄弟节点
getElementsBySelector(element,args):Selector.findChildElements(element, args)的封装,args表示可以传递多个参数,每个参数是一个css selector表达式,返回element的子孙节点中符合任何一个css selector表达式的元素组成的数组
getElementsByClassName(element, className):返回element中的子孙节点中符合clsssName的元素
readAttribute(element, name): return $(element).getAttribute(name),之所以添加这个方法是因为在IE和Safari(Mac)中getAttribute不是一个真正的函数,它没有call、apply等方法,所以在很多时候调用会出现错误(Prototype中很多地方使用了函数的这两个方法),例如下面的例子(官方文档中的一个例子),就只能使用readAttribute:
< div id = " widgets " >
< div class = " widget " widget_id = " 7 " > … </ div >
< div class = " widget " widget_id = " 8 " > … </ div >
< div class = " widget " widget_id = " 9 " > … </ div >
</ div >
$$(’div.widget’).invoke(’readAttribute’, ‘widget_id’)
// ["7", "8", "9"]
getHeight: function(element):返回元素高度,return element.offsetHeight
classNames: function(element):返回一个Element.ClassNames对象,改对象提供对元素class的操作,包括add、remove、set等,一般很少使用,使用Element.addClassName等方法就可以了(就在下面)
hasClassName: function(element, className) :判断element是否含有className
addClassName: function(element, className) :给element添加一个class
removeClassName: function(element, className) :移除元素中的一个class
observe():调用Event对象(Prototype中的,将在后面介绍)的observe方法为元素注册事件handle
stopObserving() :移除注册的事件handle
cleanWhitespace: function(element):移除元素中空白的文本子节点
empty: function(element):判断元素是否为空
childOf: function(element, ancestor) :判断element是否为ancestor的子孙节点
scrollTo: function(element) :滚动条移动到元素所在的地方
getStyle: function(element, style) :得到元素某个css样式的值,例如$(element).getStyle("float")
setStyle: function(element, style) :设置元素的css样式,style十一个对象,例如element.setStyle({left: "40px", "background-color":"#666"})
getDimensions: function(element) :得到元素的尺寸,即使元素是隐藏的也可以正确的返回,返回 return {width: originalWidth, height: originalHeight}这样的关联数组
makePositioned: function(element) :当元素的position css属性为static或不存在使,将次属性更改为relative
undoPositioned: function(element) :跟makePositioned相反的操作
makeClipping: function(element) :把元素变成clipping(切片),也就是设置元素的overflow属性为hidden
undoClipping: function(element):反转上面的方法对元素所做的修改
hasAttribute(element):判断元素是否有某个属性
Element对象的方法是不是不少啊,哈哈,下面介绍有关Insertion的四个类
Insertion.Before:将内容插入到元素的前面,内容在元素外面
Insertion.Top:将内容插入到元素的顶部,内容在元素里面
Insertion.Bottom:将内容插入到元素的底部,内容在元素里面
Insertion.After:将内容插入到元素后面,内容在元素外面
使用它们的方法比较简单:new Insertion.where(element, content),其中where表示上面的Before、Top等,content是html字符串,注意其中javascript片断会执行
form.js包含以下内容:
Event.js包含以下内容:
Position
以下部分一个一个的详细介绍:
$(element):getElementById的封装,element可以是一个元素的id或元素本身,也可以是一个数组,这时返回一个数组,使用$方法,会自动调用Element.extend(element)方法,这样的话使元素可以直接调用 Element中的方法, 例如Element.hide(element)可以写成这样$(element).hide()
document.getElementsByClassName(className, parentElement): 根据class选择元素
Element.extend(element): 扩展element,使element可以直接调用Element、Form.Element或Form中定义的方法
Element对象的方法:
visible: function(element):判断element是否可见, 参数element可以是元素本身或元素id(下面的方面的参数基本上都是这样的)
toggle: function(element):反转element的可见性
hide: function(element):隐藏元素
show: function(element):显示元素
remove: function(element):移除元素
update: function(element, html) :使用html更新element的内容,html中的script会执行(下同)
replace: function(element, html):将element替换为html
inspect: function(element):element的字符串表示
recursivelyCollect: function(element, property): 递归收集, 例如Element.recursivelyCollect(element, " parentNode " )返回element所有的祖先节点, 注意只返回nodeType == 1的元素,也就是不返回文本元素
ancestors: function(element): 等同于上面的例子,返回元素的所有祖先节点
descendants: function(element): 返回所有子孙节点
immediateDescendants: function(element):返回元素的直接的子孙节点(子节点)的数组
previousSiblings: function(element):返回元素前面的兄弟节点
nextSiblings: function(element):返回位于元素后面的兄弟节点
siblings: function(element):返回元素所有的兄弟节点
match: function(element, selector):使用Selector的match方法匹配元素(Selector将在后面介绍), selector参数是一个css selector表达式或者Prototype中的一个Selector实例,如果element匹配selector则返回true,否则返回 false ,例如对于一个className为logcss的div来说,下面的表达式返回true, $(element).match( " div.logcss " )
up(element, expression, index):利用Selector.findElement方法找到element元素的祖先节点中符合表达式expression的所有元素组成的数组索引为index的元素,也可以忽略expression(默认为 * ,表示匹配所有元素)和index(默认为0),直接这样调用up(element, index)或up(element)
down(element, expression, index):跟up一样,只是返回的是子孙节点
previous(element, expression, index):返回前面的兄弟节点
next(element, expression, index):返回后面的兄弟节点
getElementsBySelector(element,args):Selector.findChildElements(element, args)的封装,args表示可以传递多个参数,每个参数是一个css selector表达式,返回element的子孙节点中符合任何一个css selector表达式的元素组成的数组
getElementsByClassName(element, className):返回element中的子孙节点中符合clsssName的元素
readAttribute(element, name): return $(element).getAttribute(name),之所以添加这个方法是因为在IE和Safari(Mac)中getAttribute不是一个真正的函数,它没有call、apply等方法,所以在很多时候调用会出现错误(Prototype中很多地方使用了函数的这两个方法),例如下面的例子(官方文档中的一个例子),就只能使用readAttribute:
< div id = " widgets " >
< div class = " widget " widget_id = " 7 " > … </ div >
< div class = " widget " widget_id = " 8 " > … </ div >
< div class = " widget " widget_id = " 9 " > … </ div >
</ div >
$$(’div.widget’).invoke(’readAttribute’, ‘widget_id’)
// ["7", "8", "9"]
getHeight: function(element):返回元素高度,return element.offsetHeight
classNames: function(element):返回一个Element.ClassNames对象,改对象提供对元素class的操作,包括add、remove、set等,一般很少使用,使用Element.addClassName等方法就可以了(就在下面)
hasClassName: function(element, className) :判断element是否含有className
addClassName: function(element, className) :给element添加一个class
removeClassName: function(element, className) :移除元素中的一个class
observe():调用Event对象(Prototype中的,将在后面介绍)的observe方法为元素注册事件handle
stopObserving() :移除注册的事件handle
cleanWhitespace: function(element):移除元素中空白的文本子节点
empty: function(element):判断元素是否为空
childOf: function(element, ancestor) :判断element是否为ancestor的子孙节点
scrollTo: function(element) :滚动条移动到元素所在的地方
getStyle: function(element, style) :得到元素某个css样式的值,例如$(element).getStyle("float")
setStyle: function(element, style) :设置元素的css样式,style十一个对象,例如element.setStyle({left: "40px", "background-color":"#666"})
getDimensions: function(element) :得到元素的尺寸,即使元素是隐藏的也可以正确的返回,返回 return {width: originalWidth, height: originalHeight}这样的关联数组
makePositioned: function(element) :当元素的position css属性为static或不存在使,将次属性更改为relative
undoPositioned: function(element) :跟makePositioned相反的操作
makeClipping: function(element) :把元素变成clipping(切片),也就是设置元素的overflow属性为hidden
undoClipping: function(element):反转上面的方法对元素所做的修改
hasAttribute(element):判断元素是否有某个属性
Element对象的方法是不是不少啊,哈哈,下面介绍有关Insertion的四个类
Insertion.Before:将内容插入到元素的前面,内容在元素外面
Insertion.Top:将内容插入到元素的顶部,内容在元素里面
Insertion.Bottom:将内容插入到元素的底部,内容在元素里面
Insertion.After:将内容插入到元素后面,内容在元素外面
使用它们的方法比较简单:new Insertion.where(element, content),其中where表示上面的Before、Top等,content是html字符串,注意其中javascript片断会执行
Selector是利用css selector来匹配选择页面元素的,所以要理解Selector首先应该对css selector有所理解,下面是css2 selector的语法,当然很多浏览器只是支持其中的一部分,Prototype 中的Selector主要支持tag选择器、class选择器和id选择器,还有属性(attribute)选择器,基本上包含我们平时所用的所有类型
Selector中包含Selector对象和类,
Selector对象具有下面两个方法:
match(element):元素是否与本selector匹配,在Element中已经介绍了
findElements(parentNode):parentNode中所有匹配本selector的子孙元素列表
使用方法也很简单 var s = new Selector(expression); s.match(element); s.findElements($(element)),其中expression可以是如下方式 " div " 、 " #id " 、 " .class " 、 " div#id " 、 " div[attribute] " 、 " div[attribute=fff] " 、 " div[attribute!=sdf] "
其中Selector也有几个静态方法,它们分别是:
matchElements(elements, expression):返回elements中符合expression的元素列表
findElement(elements, expression, index):返回elements中符合expression的元素列表中索引为index的元素
findChildElements(element, expressions):找出element的子孙元素中符合expressions的元素列表,其中expressions是一个expression数组,其中的expression支持 " div li.#id " 形式
$$方法:只是简单的调用return Selector.findChildElements(document, $A(arguments))
Selector中包含Selector对象和类,
Selector对象具有下面两个方法:
match(element):元素是否与本selector匹配,在Element中已经介绍了
findElements(parentNode):parentNode中所有匹配本selector的子孙元素列表
使用方法也很简单 var s = new Selector(expression); s.match(element); s.findElements($(element)),其中expression可以是如下方式 " div " 、 " #id " 、 " .class " 、 " div#id " 、 " div[attribute] " 、 " div[attribute=fff] " 、 " div[attribute!=sdf] "
其中Selector也有几个静态方法,它们分别是:
matchElements(elements, expression):返回elements中符合expression的元素列表
findElement(elements, expression, index):返回elements中符合expression的元素列表中索引为index的元素
findChildElements(element, expressions):找出element的子孙元素中符合expressions的元素列表,其中expressions是一个expression数组,其中的expression支持 " div li.#id " 形式
$$方法:只是简单的调用return Selector.findChildElements(document, $A(arguments))
form.js包含以下内容:
这一部分提供了很多与表单操作有关的功能,包括以下部分,当通过$方法返回元素时,可以直接通过$(element).method()调用:
Form对象:提供了操作整个表单的一些方法
Form.Element对象:提供了操作某个表单元素的方法
TimedObserver类:周期性表单监视器,当表单元素值改变的时候执行一个回调函数,有Form和Element两种类型
EventObserver类:利用事件来监视表单元素,当表单元素值改变的时候执行一个回调函数,有Form和Element两种类型
Form对象:
reset(form):form.reset()
serializeElements(elements):将elements中的元素序列化,就是返回指定的所有元素的queryString的形式,便于在xmlhttp或其他地方使用
serialize(form):序列化整个表单
getElements(form):返回表单的所有可序列化元素
getInputs(form, typeName, name):返回所有符合typeName和name的input元素
disable(form):使整个表单处于不可用状态
enable(form) :是整个表单可用
findFirstElement(form):返回类型为‘input’, ’select’, ‘textarea’的第一个可用的非隐藏元素
focusFirstElement(form):使findFirstElement(form)返回的元素得到焦点
Form.Element对象:
focus(element) select(element):html元素内置方法的封装,除了返回元素本身
serialize(element):序列化指定的表单元素,返回key = value的形式,返回的string已经encodeURIComponent了
getValue(element):返回元素的值
clear(element):清除元素的值
present(element):判断元素的值是否非空
activate(element):使元素获得焦点
disable(element):使元素不可用
enable(element):是元素可用
$F = Form.Element.getValue 方便使用
Form.Element.Observer以及Form.Observer类:
周期性监视表单元素,如果表单或表单元素的值有改变时,执行执行一个回调函数,使用方式如下:
var oser = new Form.Element.Observer(element, frequency, callback)
or oser = new Form.Observer(form, frequency, callback)
callback可以定义两个参数 form / element、Form.serialize() / value
Form.Element.EventObserver和Form.EventObserver类:
这两个类跟上面的差不多,只是不是周期性的监视,而是利用元素的change或click事件来监视表单元素的变化,当发生变化时执行callback,参数跟上面一样
Form对象:提供了操作整个表单的一些方法
Form.Element对象:提供了操作某个表单元素的方法
TimedObserver类:周期性表单监视器,当表单元素值改变的时候执行一个回调函数,有Form和Element两种类型
EventObserver类:利用事件来监视表单元素,当表单元素值改变的时候执行一个回调函数,有Form和Element两种类型
Form对象:
reset(form):form.reset()
serializeElements(elements):将elements中的元素序列化,就是返回指定的所有元素的queryString的形式,便于在xmlhttp或其他地方使用
serialize(form):序列化整个表单
getElements(form):返回表单的所有可序列化元素
getInputs(form, typeName, name):返回所有符合typeName和name的input元素
disable(form):使整个表单处于不可用状态
enable(form) :是整个表单可用
findFirstElement(form):返回类型为‘input’, ’select’, ‘textarea’的第一个可用的非隐藏元素
focusFirstElement(form):使findFirstElement(form)返回的元素得到焦点
Form.Element对象:
focus(element) select(element):html元素内置方法的封装,除了返回元素本身
serialize(element):序列化指定的表单元素,返回key = value的形式,返回的string已经encodeURIComponent了
getValue(element):返回元素的值
clear(element):清除元素的值
present(element):判断元素的值是否非空
activate(element):使元素获得焦点
disable(element):使元素不可用
enable(element):是元素可用
$F = Form.Element.getValue 方便使用
Form.Element.Observer以及Form.Observer类:
周期性监视表单元素,如果表单或表单元素的值有改变时,执行执行一个回调函数,使用方式如下:
var oser = new Form.Element.Observer(element, frequency, callback)
or oser = new Form.Observer(form, frequency, callback)
callback可以定义两个参数 form / element、Form.serialize() / value
Form.Element.EventObserver和Form.EventObserver类:
这两个类跟上面的差不多,只是不是周期性的监视,而是利用元素的change或click事件来监视表单元素的变化,当发生变化时执行callback,参数跟上面一样
Event.js包含以下内容:
在介绍Prototype中Event对象前先介绍一下浏览器中的事件模型,浏览器中的事件主要有HTML事件、鼠标事件和键盘事件,前两种事件比较好理解,这里主要解释一下键盘事件以及它在IE和firefox中的区别
键盘事件包括keydown、kepress和keyup三种,每次敲击键盘都会(依次?)触发这三种事件,其中keydown和keyup是比较低级的接近于硬件的事件,通俗的理解是这两个事件可以捕获到你敲击了键盘中某个键;而keypress是相对于字符层面的较为高级点的事件,这个事件能够捕捉到你键入了哪个字符。可以这样理解,如果你敲击了A键,keydown和keyup事件只是知道你敲击了A键,它并不知道你敲的是大写的A(你同时按下了Shift键)还是敲的是小写a,它是以 " 键 " 为单位,你敲入了大写的A,它只是当成你敲下了shift和A两个键而已,但是keypress可以捕捉到你是敲入的大写的A还是小写的a
还要理解一个概念是键盘中的键分为字符(可打印)键和功能键(不可打印),功能键包括Backspace, Enter, Escape, the arrow keys, Page Up, Page Down, and F1 through F12 等
下面说一下键盘事件的具体使用方法,
键盘事件的event对象中包含一个keyCode属性,IE中只有这一个属性,当为keydown和keyup 事件是,keycode属性表示你具体按下的键(也称为virtual keycode),当捕捉的是keypress事件时keyCode属性指的是你键入的字符(character code)
在firefox中情况有些不同,event对象包含一个keyCode属性和一个charCode属性,keydown和keyup事件的时候,keyCode表示的就是你具体按的键,charCode为0;当捕捉的是keypress事件时,keyCode为0,charCode指的是你按下的字符
当捕捉的是keypress事件时, 当你按的是可打印字符时,keyCode为0,charCode指的是你按下的字符的键值,当你按的是不可打印字符时,keyCode为按下的键的键值,charCode为0
注意:功能键不会触发keypress事件,因为keypress对应的就是可打印的字符,但是有一点IE和FF 中的区别,你按下一个字符键的同时按下alt键,在IE中不触发keypress事件,但是在ff中可触发,我发现在IE中按下ctrl键的时候只有按下 q键会触发事件其他的要么不会触发事件,要么被浏览器IE自身捕获了,例如你按下ctrl_A,全选某个东西,你按ctrl_S保存文件,但是在FF中就好多了,事件都是先传递到网页,再向外传递
鉴于IE和FF中的区别,如果你比较懒的话,建议只使用keydow和keyup事件,这两种事件的使用在IE和FF中基本上没有区别,也不要捕获ctrl_A等被浏览器定义为快捷键的事件
键盘事件event对象还有三个其他的属性altKey, ctrlKey, and shiftKey 来判断你按下一个键的时候是否按下了alt等键,这三个属性使用比较简单,三种事件都可以使用,也不存在ie和ff的兼容性问题
在Prototype中的Event中又如下属性:
KEY_BACKSPACE: 8 ,
KEY_TAB: 9 ,
KEY_RETURN: 13 ,
KEY_ESC: 27 ,
KEY_LEFT: 37 ,
KEY_UP: 38 ,
KEY_RIGHT: 39 ,
KEY_DOWN: 40 ,
KEY_DELETE: 46 ,
KEY_HOME: 36 ,
KEY_END: 35 ,
KEY_PAGEUP: 33 ,
KEY_PAGEDOWN: 34 ,
以及下面的方法:
element( event ) :返回触发事件的元素
isLeftClick( event ) :判断是否按下的左键
pointerX( event ) :事件触发时鼠标的横坐标,对于非鼠标事件,在ff中没有此信息,但在ie中有?
pointerY( event ):事件触发时鼠标所在位置的纵坐标
stop( event ):阻止事件向上传播和浏览器的默认处理方法
findElement( event , tagName) :找到触发事件的元素的所有祖先元素中的tagName为tagName的一个元素
observe(element, name, observer, useCapture):注册事件处理函数
stopObserving(element, name, observer, useCapture):撤销注册的事件
键盘事件包括keydown、kepress和keyup三种,每次敲击键盘都会(依次?)触发这三种事件,其中keydown和keyup是比较低级的接近于硬件的事件,通俗的理解是这两个事件可以捕获到你敲击了键盘中某个键;而keypress是相对于字符层面的较为高级点的事件,这个事件能够捕捉到你键入了哪个字符。可以这样理解,如果你敲击了A键,keydown和keyup事件只是知道你敲击了A键,它并不知道你敲的是大写的A(你同时按下了Shift键)还是敲的是小写a,它是以 " 键 " 为单位,你敲入了大写的A,它只是当成你敲下了shift和A两个键而已,但是keypress可以捕捉到你是敲入的大写的A还是小写的a
还要理解一个概念是键盘中的键分为字符(可打印)键和功能键(不可打印),功能键包括Backspace, Enter, Escape, the arrow keys, Page Up, Page Down, and F1 through F12 等
下面说一下键盘事件的具体使用方法,
键盘事件的event对象中包含一个keyCode属性,IE中只有这一个属性,当为keydown和keyup 事件是,keycode属性表示你具体按下的键(也称为virtual keycode),当捕捉的是keypress事件时keyCode属性指的是你键入的字符(character code)
在firefox中情况有些不同,event对象包含一个keyCode属性和一个charCode属性,keydown和keyup事件的时候,keyCode表示的就是你具体按的键,charCode为0;当捕捉的是keypress事件时,keyCode为0,charCode指的是你按下的字符
当捕捉的是keypress事件时, 当你按的是可打印字符时,keyCode为0,charCode指的是你按下的字符的键值,当你按的是不可打印字符时,keyCode为按下的键的键值,charCode为0
注意:功能键不会触发keypress事件,因为keypress对应的就是可打印的字符,但是有一点IE和FF 中的区别,你按下一个字符键的同时按下alt键,在IE中不触发keypress事件,但是在ff中可触发,我发现在IE中按下ctrl键的时候只有按下 q键会触发事件其他的要么不会触发事件,要么被浏览器IE自身捕获了,例如你按下ctrl_A,全选某个东西,你按ctrl_S保存文件,但是在FF中就好多了,事件都是先传递到网页,再向外传递
鉴于IE和FF中的区别,如果你比较懒的话,建议只使用keydow和keyup事件,这两种事件的使用在IE和FF中基本上没有区别,也不要捕获ctrl_A等被浏览器定义为快捷键的事件
键盘事件event对象还有三个其他的属性altKey, ctrlKey, and shiftKey 来判断你按下一个键的时候是否按下了alt等键,这三个属性使用比较简单,三种事件都可以使用,也不存在ie和ff的兼容性问题
在Prototype中的Event中又如下属性:
KEY_BACKSPACE: 8 ,
KEY_TAB: 9 ,
KEY_RETURN: 13 ,
KEY_ESC: 27 ,
KEY_LEFT: 37 ,
KEY_UP: 38 ,
KEY_RIGHT: 39 ,
KEY_DOWN: 40 ,
KEY_DELETE: 46 ,
KEY_HOME: 36 ,
KEY_END: 35 ,
KEY_PAGEUP: 33 ,
KEY_PAGEDOWN: 34 ,
以及下面的方法:
element( event ) :返回触发事件的元素
isLeftClick( event ) :判断是否按下的左键
pointerX( event ) :事件触发时鼠标的横坐标,对于非鼠标事件,在ff中没有此信息,但在ie中有?
pointerY( event ):事件触发时鼠标所在位置的纵坐标
stop( event ):阻止事件向上传播和浏览器的默认处理方法
findElement( event , tagName) :找到触发事件的元素的所有祖先元素中的tagName为tagName的一个元素
observe(element, name, observer, useCapture):注册事件处理函数
stopObserving(element, name, observer, useCapture):撤销注册的事件
Position
Position是prototype中定义的一个对象,提供了操作DOM中与位置相关的方法,要很好的理解元素在页面中的位置,可以参考这篇文章:Relatively Absolute
具体代码如下,按照代码说说,其中英文是作者的注释,中文红色的才是偶的说明或翻译英文的注释,采用顶式注释法(注释在要说明的代码的上面)说明
// set to true if needed, warning: firefox performance problems
// NOT neeeded for page scrolling, only if draggable contained in
// scrollable elements
// 只有在使用拖动的时候元素包含在有滚动条的元素中才需要设置为true
includeScrollOffsets: false ,
// must be called before calling withinIncludingScrolloffset, every time the
// page is scrolled
// 当页面被scrolled后,使用withinIncludingScrolloffset的时候需要先调用这个方法
prepare: function() {
//横向滚动条滚动的距离
this.deltaX = window.pageXOffset
|| document.documentElement.scrollLeft
|| document.body.scrollLeft
|| 0;
//纵向滚动条滚动的距离
this.deltaY = window.pageYOffset
|| document.documentElement.scrollTop
|| document.body.scrollTop
|| 0;
} ,
// 元素由于滚动条偏移的总距离
realOffset: function(element) {
var valueT = 0, valueL = 0;
do {
valueT += element.scrollTop || 0;
valueL += element.scrollLeft || 0;
element = element.parentNode;
} while (element);
return [valueL, valueT];
} ,
// 元素在页面中由offsetParent累积的offset,当offsetParent都没有滚动条时,就是元素在页面中的位置
cumulativeOffset: function(element) {
var valueT = 0, valueL = 0;
do {
valueT += element.offsetTop || 0;
valueL += element.offsetLeft || 0;
element = element.offsetParent;
} while (element);
return [valueL, valueT];
} ,
// 元素相对于containing block("nearest positioned ancestor")的位置,也就是相对于最近的一个position设置为relative或者absolute的祖先节点的位置,如果没有就是相对于 body的位置,跟style.top,style.left一%
具体代码如下,按照代码说说,其中英文是作者的注释,中文红色的才是偶的说明或翻译英文的注释,采用顶式注释法(注释在要说明的代码的上面)说明
// set to true if needed, warning: firefox performance problems
// NOT neeeded for page scrolling, only if draggable contained in
// scrollable elements
// 只有在使用拖动的时候元素包含在有滚动条的元素中才需要设置为true
includeScrollOffsets: false ,
// must be called before calling withinIncludingScrolloffset, every time the
// page is scrolled
// 当页面被scrolled后,使用withinIncludingScrolloffset的时候需要先调用这个方法
prepare: function() {
//横向滚动条滚动的距离
this.deltaX = window.pageXOffset
|| document.documentElement.scrollLeft
|| document.body.scrollLeft
|| 0;
//纵向滚动条滚动的距离
this.deltaY = window.pageYOffset
|| document.documentElement.scrollTop
|| document.body.scrollTop
|| 0;
} ,
// 元素由于滚动条偏移的总距离
realOffset: function(element) {
var valueT = 0, valueL = 0;
do {
valueT += element.scrollTop || 0;
valueL += element.scrollLeft || 0;
element = element.parentNode;
} while (element);
return [valueL, valueT];
} ,
// 元素在页面中由offsetParent累积的offset,当offsetParent都没有滚动条时,就是元素在页面中的位置
cumulativeOffset: function(element) {
var valueT = 0, valueL = 0;
do {
valueT += element.offsetTop || 0;
valueL += element.offsetLeft || 0;
element = element.offsetParent;
} while (element);
return [valueL, valueT];
} ,
// 元素相对于containing block("nearest positioned ancestor")的位置,也就是相对于最近的一个position设置为relative或者absolute的祖先节点的位置,如果没有就是相对于 body的位置,跟style.top,style.left一%