prototype.js学习1

一些实用的函数

1 使用$()方法

$() 方法是在DOM中使用过于频繁的 document.getElementById() 方法的一个便利的简写，就像这个DOM方法一样，这个方法返回参数传入的id的那个元素。

比起DOM中的方法，这个更胜一筹。你可以传入多个id作为参数然后 $() 返回一个带有所有要求的元素的一个 Array 对象。

 
 

  
  

   
   
   
   <
   
   HTML
   
   >
   
   

   
   <
   
   HEAD
   
   >
   
   

   
   <
   
   TITLE
   
   >
   
    Test Page 
   
   </
   
   TITLE
   
   >
   
   

   
   <
   
   script src
   
   =
   
   "
   
   prototype.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
   
   >
   
   This is a paragraph
   
   </
   
   p
   
   >
   
   

   
   </
   
   div
   
   >
   
   

   
   <
   
   div id
   
   =
   
   "
   
   myOtherDiv
   
   "
   
   >
   
   

   
   <
   
   p
   
   >
   
   This is another paragraph
   
   </
   
   p
   
   >
   
   

   
   </
   
   div
   
   >
   
   

   
   <
   
   input type
   
   =
   
   "
   
   button
   
   "
   
    value
   
   =
   
   Test1 onclick
   
   =
   
   "
   
   test1();
   
   "
   
   ><
   
   br
   
   >
   
   

   
   <
   
   input type
   
   =
   
   "
   
   button
   
   "
   
    value
   
   =
   
   Test2 onclick
   
   =
   
   "
   
   test2();
   
   "
   
   ><
   
   br
   
   >
   
   

   
   </
   
   BODY
   
   >
   
   

   
   </
   
   HTML
   
   >
  
  
 
 

另外一个好处是，这个函数能传入用string表示的对象ID，也可以传入对象本身，这样，在建立其它能传两种类型的参数的函数时非常有用。

注意:

当ie调用$F()函数时,该函数不仅可以根据id属性访问,还可以根据name属性访问,如果html元素的id属性和name属性不一致,可能会导致错误.

2 使用$F()函数

$F()函数是另一个大收欢迎的“快捷键”，它能用于返回任何表单输入控件的值，比如text box,drop-down list。这个方法也能用元素id或元素本身做为参数。

 
 

  
  

   
   
   
   <
   
   script
   
   >
   
   

   
   function
   
    test3()

   
   ...
   
   {
alert(  $F('userName')  );
}
   
   

   
   </
   
   script
   
   >
   
   

   
   <
   
   input type
   
   =
   
   "
   
   text
   
   "
   
    id
   
   =
   
   "
   
   userName
   
   "
   
    value
   
   =
   
   "
   
   Joe Doe
   
   "
   
   ><
   
   br
   
   >
   
   

   
   <
   
   input type
   
   =
   
   "
   
   button
   
   "
   
    value
   
   =
   
   Test3 onclick
   
   =
   
   "
   
   test3();
   
   "
   
   ><
   
   br
   
   >
  
  
  
  

   
   
   
   

  
  
 
 

3 使用$A()函数

$A()函数能把它接收到的单个的参数转换成一个Array对象。

这个方法，结合被本类库扩展了的Array类，能方便的把任何的可枚举列表转换成或拷贝到一个Array对象。一个推荐的用法就是把DOM Node Lists转换成一个普通的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
   
   =
   
   "
   
   10
   
   "
   
    
   
   >
   
   

   
   <
   
   option value
   
   =
   
   "
   
   5
   
   "
   
   >
   
   Buchanan, Steven
   
   </
   
   option
   
   >
   
   

   
   <
   
   option value
   
   =
   
   "
   
   8
   
   "
   
   >
   
   Callahan, Laura
   
   </
   
   option
   
   >
   
   

   
   <
   
   option value
   
   =
   
   "
   
   1
   
   "
   
   >
   
   Davolio, Nancy
   
   </
   
   option
   
   >
   
   

   
   </
   
   select
   
   >
   
   

   
   <
   
   input type
   
   =
   
   "
   
   button
   
   "
   
    value
   
   =
   
   "
   
   Show the options
   
   "
   
    onclick
   
   =
   
   "
   
   showOptions();
   
   "
   
    
   
   >
   
   

  
  
 
 

4 使用 $H() 函数

$H()函数把一些对象转换成一个可枚举的和联合数组类似的Hash对象。

 
 

  
  

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

  
  
 
 

5 使用$R()函数

$R()是new ObjectRange(lowBound,upperBound,excludeBounds)的缩写。

跳到ObjectRange 类文档可以看到一个关于此类的完整描述. 此时，我们还是先来看一个例子以展示这个缩写能代替哪些方法吧。其它相关的一些知识可以在Enumerable 对象文档中找到。

 
 

  
  

   
   
   
   <
   
   script
   
   >
   
   

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

   
   </
   
   script
   
   >
   
   

   
   <
   
   input type
   
   =
   
   "
   
   button
   
   "
   
    value
   
   =
   
   "
   
   Sample Count
   
   "
   
    onclick
   
   =
   
   "
   
   demoDollar_R();
   
   "
   
    
   
   >
   
   

  
  
 
 

6 使用Try.these()函数

Try.these() 方法使得实现当你想调用不同的方法直到其中的一个成功正常的这种需求变得非常容易， 他把一系列的方法作为参数并且按顺序的一个一个的执行这些方法直到其中的一个成功执行，返回成功执行的那个方法的返回值。

在下面的例子中， xmlNode.text在一些浏览器中好用，但是xmlNode.textContent在另一些浏览器中正常工作。 使用Try.these()方法我们可以得到正常工作的那个方法的返回值。

 

< script >
function getXmlNodeValue(xmlNode) ... {
    return Try.these(
        function() ...{return xmlNode.text;},
        function() ...{return xmlNode.textContent;)
        );
}
</script> 

注意:一定要有return