`

Prototype框架常用方法简介

阅读更多

2.1 使用 $() 方法

 

$() 方法是在 DOM 中使用过于频繁的 document.getElementById() 方法的一个便利的简写,就像这个 DOM 方法一样,这个方法返回参数传入的 id 的那个元素。比起 DOM 中的方法,这个更胜一筹。你可以传入多个 id 作为参数然后 $() 返回一个带有所有要求的元素的一个 Array 对象。

 

<HTML >
<HEAD >
<TITLE > Test Page </ TITLE >
<script  src= "prototype1.4.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 ,也可以传入对象本身,这样,在建立其它能传两种类型的参数的函数时非常有用。

 

 

2..2 使用 $F() 函数

 

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

 

<script >
function  test3(){
    alert($F('userName' ));    
}
</ script >
<inputtype= "text" id= "userName" value= "Joe Doe" ><br >
<inputtype= "button" value=Test3onclick= "test3();" ><br >

 

 

2.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 >
<selectid= "lstEmployees" size= "10" >
 <optionvalue= "5" >Buchanan,Steven</option >
 <optionvalue= "8" >Callahan,Laura</option >
 <optionvalue= "1" >Davolio,Nancy</option >
</ select >
<inputtype= "button" value= "Show the options" onclick= "showOptions();" >

 

 

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

 

 

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

 

 

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

  • Prototype_Dome1.rar (25.3 KB)
  • 描述: Prototype框架常用方法简介实例
  • 下载次数: 2
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics