prototype 实用的函数

Prototype实用技巧

最新推荐文章于 2022-11-30 22:54:54 发布

原创最新推荐文章于 2022-11-30 22:54:54 发布 · 232 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#prototype #浏览器 #UP

JavaScript框架专栏收录该内容

7 篇文章

订阅专栏

本文介绍了Prototype JavaScript库中的六个实用函数：$(), $F(), $A(), $H(), $R() 和 Try.these()，并详细解释了它们的功能及使用场景。此外还提供了Prototype中Event对象的一些属性和方法。

(1)$()方法

document.getElementById() 方法的一个便利的简写，就像这个 DOM 方法一样，这个方法返回参数传入的 id 的那个元素。可以传入多个 id 作为参数然后 $() 返回一个带有所有要求的元素的一个 Array 对象。

example:

 var d=$('myDiv');      
 alert(d.innerHTML);

 var divs=$('myDiv','myOtherDiv'); 
 for(i=0;i<divs.length;i++){ 
     alert(divs[i].innerHTML);          
 }

(2)$F()函数

用于返回任何表单输入控件的值，比如 text box,drop-down list。这个方法也能用元素 id 或元素本身做为参数。

example:

alert($F('userName'));

(3)$A()函数

$A()函数能把它接收到的单个的参数转换成一个 Array 对象。这个方法，结合被本类库扩展了的 Array 类，能方便的把任何的可枚举列表转换成或拷贝到一个 Array 对象。一个推荐的用法就是把 DOM Node Lists 转换成一个普通的 Array 对象，从而更有效率的进行遍历。

example:

<script>
function showOptions(){ 
    var someNodeList=$('lstEmployees').getElementsByTagName('option'); 
    var nodes=$A(someNodeList); 
    nodes.each(function (node){ 
        alert(node.nodeName+': '+node.innerHTML);          
    });     
}
</script>

(4)$H() 函数

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

example:

<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)的缩写。设定下限，上限

example:

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

example:

<script> 
function getXmlNodeValue(xmlNode){ 
    return Try.these(function (){ 
        return xmlNode.text; 

    },function (){ 
        return xmlNode.textContent; 
        )); 

    } 
</script>

(7)在Prototype中的Event中有如下属性：
KEY_BACKSPACE: 8,
KEY_TAB: 9,
KEY_RETURN: 13,
KEY_ESC: 27,
KEY_LEFT: 37,
KEY_UP: 38,
KEY_RIGHT: 39,
KEY_DOWN: 40,
KEY_DELETE: 46,
KEY_HOME: 36,
KEY_END: 35,
KEY_PAGEUP: 33,
KEY_PAGEDOWN: 34,
以及下面的方法：
element(event) ：返回触发事件的元素
isLeftClick(event) ：判断是否按下的左键
pointerX(event) ：事件触发时鼠标的横坐标
pointerY(event)：事件触发时鼠标所在位置的纵坐标
stop(event)：阻止事件向上传播和浏览器的默认处理方法
findElement(event, tagName) ：找到触发事件的元素的所有祖先元素中的tagName为tagName的一个元素
observe(element, name, observer, useCapture)：注册事件处理函数
stopObserving(element, name, observer, useCapture)：撤销注册的事件