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" οnclick="test1()" />
<input type="button" value="click2" οnclick="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 $$()' οnclick='test$$();' />
<input type=button value='testtoColorPart' οnclick='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" οnclick="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 οnclick="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" οnclick="test()" />
</form>
</body>
</html>
<转自:http://www.cnblogs.com/me-sa/archive/2007/04/24/724660.html >