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   >