【prototype】笔记1

最新推荐文章于 2025-04-08 12:10:25 发布

原创最新推荐文章于 2025-04-08 12:10:25 发布 · 127 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#prototype #JavaScript #F# #HTML #Dojo #ViewUI

prototype 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了Prototype JavaScript库中的五个实用方法：$()用于快速获取DOM元素；$$()用于选取符合特定条件的元素集合；$F()用于获取表单元素的值；$A()将NodeList等转换为数组；$H()将对象转换为可枚举的Hash对象。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>$</title>
        <script type="text/javascript" language="javascript"
         src="prototype.js" ></script>
        <script type="text/javascript" language="javascript">
        function test1() {
            var div = $("div1"); // 单个参数
            alert(div.innerHTML);
        }
        
        function test2() {
            var divs = $("div1", "div2"); // 多个参数
            for (var i = 0; i < divs.length; i++) {
                alert(divs[i].innerHTML);
            }
        }
        </script>
    </head>
    <body>
    <div id="div1">
        div1
    </div>
    <div id="div2">
        div2
    </div>
    <input type="button" value="click1" onclick="test1()" />
    <input type="button" value="click2" onclick="test2()" />
    </body>

2. $$

<html>
<head>
<title>Test $$</title>
<script src="prototype.js"></script>
<script>
function test$$(){
    /**//*
      in case CSS is not your forte, the expression below says
      'find all the INPUT elements that are inside 
      elements with class=field that are inside a DIV
      with id equal to loginForm.'
    */
    var f = $$('div#loginForm .field input');
    var s = '';
    for(var i=0; i<f.length; i++){
        s += f[i].value + '/';
    }
    alert(s); // shows: "joedoe1/secret/"
    
    //now passing more than one expression
    f = $$('div#loginForm .field input', 'div#loginForm .fieldName');
    s = '';
    for(var i=0; i<f.length; i++){
        s += ( f[i].value ? f[i].value : f[i].innerHTML ) + '/';
    }
    alert(s); //shows: "joedoe1/secret/User name:/Password:/"
    
var    temp=$$('div#loginForm .field');
    alert(temp.innerHTML);
}
function testtoColorPart()

{var num=new Number(50);
    alert(num.toColorPart());
    }

</script>

<div id='loginForm'>
    <div class='field'>
        <span class='fieldName'>User name:</span>
        <input type='text' id='txtName' value='joedoe1'/>
    </div>
    <div class='field'>
        <span class='fieldName'>Password:</span>
        <input type='password' id='txtPass' value='secret' />
    </div>
    <input type='submit' value='login' />
</div> 
<input type=button value='test $$()' onclick='test$$();' />
<input type=button value='testtoColorPart' onclick='testtoColorPart();' />
</body>
</html>

3. $F()方法是另一个非常受欢迎的简写。它可以返回任何输入表单控件的值，如文本框或下拉框。这个方法可以传入元素的id或者元素自己。

<html>
    <head>
        <title>$F</title>
        <script type="text/javascript" language="javascript"
         src="prototype.js" ></script>
        <script type="text/javascript" language="javascript">
        function test()
        {
            alert($F("userName"));
        }
        </script>
    </head>
    <body>
        <form>
            <input type="text" id="userName" value="test username">
            <input type="button" value="click" onclick="test()">
        </form>
</html>

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

这个方法加上对Array类的扩展，可以很容易的转换或者复制任意的列举列表到Array对象，

一个被推荐使用的用法就是转换DOM的NodeLists到一个普通的数组里，可以被更广泛高效的使用，看下面的例子。

<html>
<head>
    <title>$A</title>
    <script language="javascript" src="prototype.js"
     type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
    function showOptions() {
        var someNodeList = $("lstFramework").getElementsByTagName("option");
        var nodes = $A(someNodeList);
        
        var info = [];
        
        nodes.each (function(node){
            info.push(node.value + ": " + node.innerHTML);
        });
        
        alert(info.join("\r\n"));
    }
    </script>
</head>
<body>
    <form>
        <select id="lstFramework" size="10">
            <option value="1">Prototype</option>
            <option value="2">Script.aculo.us</option>
            <option value="3">Dojo</option>
            <option value="4">YUI</option>
        </select>
        <input onclick="showOptions();" type="button" value="Show the options">
    </form>
</body>
</html>

5.$H()方法把对像转化成可枚举的貌似联合数组Hash对象。

<html>
    <head>
        <title>$H</title>
        <script type="text/javascript" language="javascript"
         src="prototype.js" ></script>
        <script>
        function test()
        {
            // 创建一个对象
            var obj = {
                key1: 1,
                key2: 2,
                key3: 3
                };
    
            // 将其转换为Hash对象
            var hash = $H(obj);
            alert(hash.toQueryString());
        }
        </script>
    </head>
    <body>
        <form>
            <input type="button" value="click" onclick="test()" />
        </form>
    </body>
</html>

<转自：http://www.cnblogs.com/me-sa/archive/2007/04/24/724660.html >