prototype.js学习笔记

prototype.js真是好东西,代码不多但作者的设计思路相当漂亮,简化了不少工作,至少可以减少30%的js代码,用facade模式把一些浏览器之间不兼容的问题隐藏掉,简化了不少工作;

$() 相当于documnet.getElementById()

js 代码

 

1.   
2.   
3.   
4. <script src=<span class="string">"prototype-1.4.0.js"></script>  
5.   
6. <script>  
7.     function test1()  
8.     {  
9.         var d = $('myDiv');  
10.         alert(d.innerHTML);  
11.     }  
12.   
13.     function test2()  
14.     {  
15.         var divs = $('myDiv','myOtherDiv');  
16.         for(i=0; i<divs.length; i++)  < span="">
17.         {  
18.             alert(divs[i].innerHTML);  
19.         }  
20.     }  
21. </script>  
22.   
23.   
24.   
25.     
26.            
27.     

  

   
$F()用来取得输入框中的值,注意只要标签有value这个属性$F()就是取得它的值,不过是用在取输入框中的值的情况最多了

js 代码

 

1. <script>  
2. function test3()  
3. {  
4. alert(  $F('userName')  );  
5. }  
6.   
7. </script>  
8.   

$A()用来把一个传进来的参数转化为一个Array,

js 代码

 

1. <script>  
2.   
3. function showOptions(){  
4. var someNodeList = $('lstEmployees').getElementsByTagName('option');  
5. var nodes = $A(someNodeList);  
6.   
7. nodes.each(function(node){  
8. alert(node.nodeName + ': ' + node.innerHTML);  
9. });  
10. }  
11. </script>  
12.   
17.   
18.   

$H()方法把对象转化成可枚举的貌似联合数组Hash对象。

 

js 代码

1. <script>  
2. function testHash()  
3. {  
4. //let's create the object创建对象  
5. var a = {  
6. first: 10,  
7. second: 20,  
8. third: 30  
9. };  
10.   
11. //now transform it into a hash转为Hash  
12. var h = $H(a);  
13. alert(h.toQueryString()); //转为字符串，哈哈哈可以使用Ajax方式把这个对象的属性传到后台了displays: first=10&second=20&third=30  
14. }  
15.   
16. </script>  

下面说一下今天最后要说的最后一个函数： $R()

 

js 代码

 

<script>   function demoDollar_R(){   var range = $R(10, 20, false);   range.each(function(value, index){   alert(value);   });   }      </script>     

 

<script>
    function testHash()
    {
        //let's create the object
        var a = {
            first: 10,
            second: 20,
            third: 30
            };

        //now transform it into a hash
        var h = $H(a);
        alert(h.toQueryString()); //displays: first=10&second=20&third=30
    }

</script>