资料地址:
http://thinhunan.cnblogs.com/archive/2006/04/01/DeveloperNotesForPrototype.html
摘录
1、$F()函数
功能:
返回任何表单输入控件的值,参数是元素id或者元素本身
示例:
<script>
function test()
{
alert($F('userName'));
}
</script>
<input type="text" id="userName" value="Joe Doe"><br>
<input type="button" value="Joe Doe" onClick="test();"><br>
2、$H()
功能:
把一些对象转换成一个可枚举的和可联合数组类似的Hash()对象
示例:
<script>
function testHash()
{
var a = {first:10, second:20, third:30};
var h = $H(a); // 调用转换方法
alert(h.toQueryString()); //displays: first=10&second=20&third=30
}
</script>
<input type="text" id="userName" value="Joe Doe"><br>
<input type="button" value="Joe Doe" onClick="test();"><br>
3、Try.these()
功能:
实现当你想调用不同的方法直到其中的一个成功
示例:
xmlNode.innerText在IE中可用,但是在xmlNode.textContent在FireFox中可用,但是二者功效相当
<script>
function getXmlNodeValue()
{
return Try.these(
function() {return xmlNode.innerText;},
function() {return xmlNode.textContent;}
);
}
</script>
<input type="text" id="userName" value="Joe Doe"><br>
<input type="button" value="Joe Doe" onClick="test();"><br>
4、$()
功能:
DOM中document.getElementById()方法的简写,可以传入多个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>
5、$A()
功能:
把参数转换成一个Array对象,能方便的把任何的可枚举列表转换成或拷贝到一个Array对象。一个推荐的用法就是把DOM Node Lists转换成一个普通的Array对象,从而更有效率的进行遍历
示例:
<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();" >
6、$R() 【需要仔细阅读该方法】
功能:
new ObjectRange(lowBound,upperBound,excludeBounds)的缩写
示例:
<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();" >
7、Ajax对象
功能:
预定义对象,由这个包创建,封装Ajax逻辑的类
7.1 使用Ajax.Request类
假设通过url http:\\yourserver\app\get_sales?empID=1234&year=1998与服务器通信。返回下面的XML响应。
<?xml version="1.0" encoding="utf-8" ?>
<ajax-response>
<response type="object" id="productDetails">
<monthly-sales>
<employee-sales>
<employee-id>1234</employee-id>
<year-month>1998-01</year-month>
<sales>$8,115.36</sales>
</employee-sales>
<employee-sales>
<employee-id>1234</employee-id>
<year-month>1998-02</year-month>
<sales>$11,147.51</sales>
</employee-sales>
</monthly-sales>
</response>
</ajax-response>
用 Ajax.Request对象和服务器通信,示例:
<script>
function searchSales()
{
var empID = $F('lstEmployees');
var y = $F('lstYears');
var url = 'http://yoursever/app/get_sales';
var pars = 'empID=' + empID + '&year=' + y;
var myAjax = new Ajax.Request(
url,
{
method: 'get',
parameters: pars,
onComplete: showResponse
});
}
function showResponse(originalRequest)
{
//put returned XML in the textarea
$('result').value = originalRequest.responseText;
}
</script>
<select id="lstEmployees" size="10" onchange="searchSales()">
<option value="5">Buchanan, Steven</option>
<option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
<select id="lstYears" size="3" onchange="searchSales()">
<option selected="selected" value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
</select>
<br>
<textarea id=result cols=60 rows=10 ></textarea>
未完待续……