Prototype.js 学习笔记（一）

１，　 Prototype.js是什么?

　　 prototype.js 是一个由 Sam Stephenson 大仙 编写的 JavaScript 程序包。这个程序包使程序员可以轻松的创建良好兼容性和交互性的web应用程序，并可以很容易的加入Web 2.0特性。

要学习他，首先要下载这个包 prototype.js 。(只有从官方网站上下载的程序包才能保证其纯洁，很多人修改了 prototype.js　的代码添加自定义的特性)

２，　通用方法的学习

$()= 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 >

$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 >

$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 >

$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 >

$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 >