prototype使用$()方法

最新推荐文章于 2021-06-03 16:27:56 发布

原创最新推荐文章于 2021-06-03 16:27:56 发布 · 247 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#prototype #浏览器 #F# #工作

collection 专栏收录该内容

76 篇文章

订阅专栏

本文介绍了Prototype JavaScript框架中几个常用方法的应用，包括$()、$F()、$A()、$H()、$R()及Try.these()等，展示了如何简化DOM操作、表单值获取、数组转换、对象转Hash、范围生成以及方法调用，为前端开发者提供高效便捷的解决方案。

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

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

HTML> 
<HEAD> 
<TITLE> Test Page </TITLE> 
<script src="prototype-1.3.1.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>

这个方法的另一个好处就是你可以传入id字符串或者元素对像自己，这使得在创建可以传入任何形式参数的方法的时候，它变得非常有用。

使用$F()方法

$F()方法是另一个非常受欢迎的简写。它可以返回任何输入表单控件的值，如文本框或下拉框。这个方法可以传入元素的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>

使用$A()方法

$A()方法把接收到的参数转换成一个Array对象。

这个方法加上对Array类的扩展，可以很容易的转换或者复制任意的列举列表到Array对象，一个被推荐使用的用法就是转换DOM的NodeLists到一个普通的数组里，可以被更广泛高效的使用，看下面的例子。

<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();" >

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

使用$R()方法

$R()方法是new ObjectRange(lowerBound, upperBound, excludeBounds)的一个简单快捷的使用方式。

ObjectRange类文档里面有完整的解释。同时，我们来看看一个简单的例子，来演示通过each方法遍历的用法。那个方法的更多解释在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();" >

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