prototype.js開發筆記

2009-04-29

1344
0

摘要:prototype.js開發筆記

prototype.zip 使用 `$()`方法

$() 方法是在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>

回首頁

prototype.zip使用 $()方法

使用$F()方法

使用$A()方法

使用$H()方法

使用$R()方法

使用Try.these()方法