1, Prototype.js是什么?
prototype.js 是一个由 Sam Stephenson 大仙 编写的 JavaScript 程序包。这个程序包使程序员可以轻松的创建良好兼容性和交互性的web应用程序,并可以很容易的加入Web 2.0特性。
要学习他,首先要下载这个包 prototype.js 。(只有从官方网站上下载的程序包才能保证其纯洁,很多人修改了 prototype.js 的代码添加自定义的特性)
2, 通用方法的学习
$()= document.getElementById()
例子:
<
html
>
<
head
><
title
>
prototype.js学习--
</
title
>
<
script
src
="ProtoType.js"
type
="text/javascript"
></
script
>
<
script
language
="javascript"
type
="text/javascript"
>
...
function study()
...{
var div=$('div3');
alert(div.innerHTML);
var divs = $('div1','div2');
for(i=0; i<divs.length; i++)
...{
alert(divs[i].innerHTML);
}
}
</
script
>
</
head
>
<
body
>
<
input
type
="button"
name
="b1"
value
="确定"
onclick
="study()"
/>
<
div
id
="div1"
>
Northsnow is studing Prototype.js 1.51
</
div
>
<
div
id
="div2"
>
塞北的雪 正在 研究 prototype.js 1.51
</
div
>
<
div
id
="div3"
>
塞北的雪:
</
div
>
</
body
>
</
html
>
$F() 返回控件的值(value)
例子:
< html
>
<
head
><
title
>
prototype.js学习--
</
title
>
<
script
src
="ProtoType.js"
type
="text/javascript"
></
script
>
<
script
language
="javascript"
type
="text/javascript"
>
...
function study()
...{
var val=$F('txt1','b1');
alert(val);
}
</
script
>
</
head
>
<
body
>
<
input
type
="button"
name
="b1"
value
="确定"
onclick
="study()"
/>
<
input
type
="text"
name
="txt1"
value
="塞北的雪:"
/>
</
body
>
</
html
>
$A() 转换列表数据为Array
例子:
< html >
< head
><
title
>
prototype.js学习--
</
title
>
< script
src
="ProtoType.js"
type
="text/javascript"
></
script
>
< script
language
="javascript"
type
="text/javascript"
>
...
function study()
...{
var oList = $('select1').getElementsByTagName('option');
var nodes = $A(oList);
var node;
for(var i=0;i<nodes.length;i++)
...{
node=nodes[i];
alert(node.nodeName + ' [ ' + node.value + ' : ' + node.innerHTML + ']');
}
nodes.each(function(node)...{
alert(node.nodeName + ' [ ' + node.value + ' : ' + node.innerHTML + ']');
});
}
</ script
>
</ head
>
< body
>
< input
type
="button"
name
="b1"
value
="确定"
onclick
="study()"
/>
< select
id
="select1"
size
="10"
>
< option
value
="A"
>
Northsnow is studing Prototype.js 1.51
</
option
>
< option
value
="B"
>
塞北的雪 正在 研究 prototype.js 1.51
</
option
>
< option
value
="C"
>
塞北的雪:
</
option
>
</ select
>
</ body
>
</ html
>
$H() 对象转化成可枚举的貌似联合数组Hash对象
转成 Hash要求对象的属性值必须为数字
< html >
< head ><
title
>
prototype.js学习--
</
title
>
< script src
="ProtoType.js"
type
="text/javascript"
></
script
>
< script language
="javascript"
type
="text/javascript"
>
...
function study()
...{ var enum1=new Object();
enum1 = ...{
Northsnow : 1,
CS: 2,
NetLover: 3
};
enum1['Microsoft'] =4 ;
enum1['ProtoType']=5;
var hash = $H(enum1);
var enum2=...{
JS:6,
Html:7
}
hash=hash.merge(enum2);
alert(hash.inspect());
alert(hash.toQueryString());
}
</ script >
</ head >
< body >
< input type
="button"
name
="b1"
value
="确定"
onclick
="study()"
/>
</ body >
</ html >
$R() 是 new ObjectRange(lowerBound, upperBound, excludeBounds)的简化版。
例子:
< html >
< head >< title
>
prototype.js学习--
</
title
>
< script src ="ProtoType.js"
type
="text/javascript"
></
script
>
< script language ="javascript"
type
="text/javascript"
>
...
function study()
...{
var range = $R (1,5, false);
range.each(function(value, index)...{
alert(value);
});
alert(range.include(5));
var range = $R (1,5, true);
range.each(function(value, index)...{
alert(value);
});
alert(range.include(5));
var range = $R ('a','b');
range.each(function(value, index)...{
alert(value);
});
}
</ script >
</ head >
< body >
< input type ="button"
name
="b1"
value
="确定"
onclick
="study()"
/>
</ body >
</ html >