prototype里的$方法 - 百家拳原创软件教程网

prototype.js是赫赫有名的javascript工具集，这里有一个非常实用的方法$()，它和DOM解析是一个意思。也是通过HTML标签的id属性寻找位置。也避免了document.getById("id")的滥用。$()有很多方式，下面的代码是它的解释。首先应该到官方网站下载prototype.js文件。然后看下面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="prototype.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);
        }
    }
function test3()
{ //直接得到表单的值
alert( $F('userName') );
}
    function showOptions(){ //$A是把得到的元素，放进数组里。
var someNodeList = $('lstEmployees').getElementsByTagName('option');
var nodes = $A(someNodeList);
nodes.each(function(node){
alert(node.nodeName + ': ' + node.innerHTML);
});}
function testHash()
{//$H是操作hash值
//创建这个对象
var a = {
first: 10,
second: 20,
third: 30
};
//传入一个Hash值
var h = $H(a);
alert(h.toQueryString()); //显示: first=10&second=20&third=30
}
function demoDollar_R(){
var range = $R(10, 20, false);
range.each(function(value, index){
alert(value);
});
}
</script>
<title>$()方法</title>
</head>

<body>
    <div id="myDiv">
        <p>百家拳软件研究室</p>
    </div>
    <div id="myOtherDiv">
        <p><a href="">www.100jq.com</a></p>
    </div>
    <input type="button" value=Test1 onclick="test1();"><br>
    <input type="button" value=Test2 onclick="test2();"><br>
<input type="text" id="userName" value="100jq"><br>
    <input type="button" value=Test3 onclick="test3();"><br>
<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="显示选项" onclick="showOptions();" ><br />
<input type="button" value="显示选项" onclick="testHash();" ><br />
<input type="button" value="测试范围" onclick="demoDollar_R();" ><br />
</body>
</html>