prototype.js轻量级WEB开发的首选ajax框架(一)
prototype.js 是Sam Stephenson写的一个Javascript的小框架(实际上是一个函数库),该框架首页是:http://prototype.conio.net/
下面的内容来源自http://www.sergiopereira.com/articles/prototype.js.html,本人学习的同时作个笔记,与读者分享一下经验心得。
这次介绍几个相类的函数:$()、$F()、$A、$H、$R。
$() 相当于document.getElementById() ,其中间的参数可以是一个ID或多个ID。
示例:
<HTML> <HEAD> <TITLE> Test Page </TITLE> <script src="prototype-1.4.0.js"></script> <script> function test1() { var d = $('myDiv'); alert(d.innerHTML); } function test2() { var divs = $('myDiv','myOtherDiv'); for(i=0; i<divs.length; i++) { alert(divs[i].innerHTML); } } </script> </HEAD> <BODY> <div id="myDiv"> <p>吕的部落格欢迎您,我是内容一ID为myDiv</p> </div> <div id="myOtherDiv"> <p>吕的部落格欢迎您,我是内容二ID为myOtherDiv</p> </div> <input type="button" value="取得myDiv的HTML代码" onclick="test1();"><br> <input type="button" value="取得myDiv与myOtherDiv的HTML代码" onclick="test2();"><br> </BODY> </HTML>
哈哈哈,我是内容一ID为myDiv
呵呵呵我是内容二标题为myOtherDiv
知道怎么用了吧就是使用$('控件ID')取得该ID对应的对象。不懂?无话说了去看看Javascript比较基本的东西吧
好了下面说说$F()这个函数,它实际是是$()的特别版本而已,$()返回具有ID的对象,而$F()只是返回具有ID的对象的值(注意首先这个对像要有value这个属性,返回的也只是一个值而不是对像)该函数主要应用于取得输入框内的值。
示例:
<script>
function test3()
{
alert( $F('userName') );
}
</script>
<input type="text" id="userName" value="www.Lvjiyong.Com">
<input type="button" value="取得userName的值" onclick="test3();">
userName:
$A()的用法就更有特殊性,主要应用于具有NodeLists 属性的对象.使用$A('对象ID')返回的是一组Array对象,哈哈哈,这回又是对象了,还是看一下实际应用的例子吧:
<script>
function showOptions(){
var someNodeList = $('lstEmployees').getElementsByTagName('option');
var nodes = $A(someNodeList);
nodes.each(function(node){
alert(node.nodeName + ': ' + node.innerHTML);
});
}
</script>
<select id="lstEmployees" size="3" >
<option value="1">Lvjiyong.com</option>
<option value="2">www.Lvjiyong.Com</option>
<option value="3">吕的部落格</option>
</select>
<input type="button" value="显示options" onclick="showOptions();" >
$H()是一个对象转化为Hash对象,我还没实际用过,看样子主要可能还是用于将对象转为参数方便传送(.NET序列化简单明了版?),我们看看示例吧:
<script>
function testHash()
{
//let's create the object创建对象
var a = {
first: 10,
second: 20,
third: 30
};
//now transform it into a hash转为Hash
var h = $H(a);
alert(h.toQueryString()); //转为字符串,哈哈哈可以使用Ajax方式把这个对象的属性传到后台了displays: first=10&second=20&third=30
}
</script>
下面说一下今天最后要说的最后一个函数:$R()
The $R() function is simply a short hand to writing new ObjectRange(lowerBound, upperBound, excludeBounds). 哈这绝对是个很有意思的函数:指定上下限即交回你有序的Range
示例:
<script>
function demoDollar_R(){
var range = $R(10, 20, false);
range.each(function(value, index){
alert(value);
});
}
</script>
<input type="button" value="$R的例子" onclick="demoDollar_R();" >
码字真累,好久没有这样边修改边翻译边码字了.先到这儿.