Prototype.js 学习笔记(一)

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>

$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,5false);
        range.each(
function(value, index){
            alert(value);
        }
);
        alert(range.include(
5));
        
        
var range = $R (1,5true);
        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>

  

没有更多推荐了,返回首页