Prototype.js 学习笔记(一)
来源:互联网 发布:迭代算法 编辑:程序博客网 时间:2024/05/20 18:49
1, Prototype.js是什么?
prototype.js 是一个由 Sam Stephenson 大仙 编写的 JavaScript 程序包。这个程序包使程序员可以轻松的创建良好兼容性和交互性的web应用程序,并可以很容易的加入Web 2.0特性。
要学习他,首先要下载这个包 prototype.js 。(只有从官方网站上下载的程序包才能保证其纯洁,很多人修改了 prototype.js 的代码添加自定义的特性)
2, 通用方法的学习
$()= document.getElementById()
例子:
<html>
<head><title>prototype.js学习--http://blog.csdn.net/precipitant</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">
塞北的雪:http://blog.csdn.net/precipitant
</div>
</body>
</html>
<head><title>prototype.js学习--http://blog.csdn.net/precipitant</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">
塞北的雪:http://blog.csdn.net/precipitant
</div>
</body>
</html>
$F() 返回控件的值(value)
例子:
<html>
<head><title>prototype.js学习--http://blog.csdn.net/precipitant</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="塞北的雪:http://blog.csdn.net/precipitant" />
</body>
</html>
<head><title>prototype.js学习--http://blog.csdn.net/precipitant</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="塞北的雪:http://blog.csdn.net/precipitant" />
</body>
</html>
$A() 转换列表数据为Array
例子:
<html>
<head><title>prototype.js学习--http://blog.csdn.net/precipitant</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">塞北的雪:http://blog.csdn.net/precipitant</option>
</select>
</body>
</html>
<head><title>prototype.js学习--http://blog.csdn.net/precipitant</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">塞北的雪:http://blog.csdn.net/precipitant</option>
</select>
</body>
</html>
$H() 对象转化成可枚举的貌似联合数组Hash对象
转成 Hash要求对象的属性值必须为数字
<html>
<head><title>prototype.js学习--http://blog.csdn.net/precipitant</title>
<script src="ProtoType.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">...
function study()
...{ var enum1=new Object();
enum1 = ...{
Northsnow : 1,
CSDN: 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>
<head><title>prototype.js学习--http://blog.csdn.net/precipitant</title>
<script src="ProtoType.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">...
function study()
...{ var enum1=new Object();
enum1 = ...{
Northsnow : 1,
CSDN: 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学习--http://blog.csdn.net/precipitant</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>
<head><title>prototype.js学习--http://blog.csdn.net/precipitant</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>
- Prototype.js 学习笔记(一)
- Prototype.js 学习笔记(一)
- Prototype.js 学习笔记
- prototype.js学习笔记
- prototype.js学习笔记
- prototype.js学习笔记
- prototype.js之ajax.request学习笔记(一)
- prototype.js之ajax.request学习笔记(一)
- ajaxPro /prototype.js 学习笔记
- JS学习笔记--理解prototype
- js的原型(prototype)的相关笔记(一)
- vue.js学习笔记之prototype
- [前端JS学习笔记]JavaScript prototype 对象
- [前端JS学习笔记]JavaScript prototype 对象
- prototype.js学习(1)
- prototype.js学习(2)
- prototype.js之ajax.request学习笔记(一) - JAVA---一路上有你 blue - BlogJava
- prototype学习笔记(Element篇一)
- SCJP考题10
- 吼吼: 终于能上网了。
- 龙芯BIOS(PMON)中的rtl8169网卡驱动程序
- SCJP考题11
- SCJP考题12
- Prototype.js 学习笔记(一)
- 外企面试官最爱提的10个问题(附答案)
- JVM
- 搜索引擎对作弊的处罚
- Microsoft .Net Remoting系列专题
- SCJP考题13
- SCJP考题14
- SCJP考题15
- SCJP考题16