资料地址:
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>
未完待续……
分享到:
相关推荐
《prototype.js 1.4版开发者手册》是JavaScript开发领域中的一个重要参考资料,尤其对于那些希望深入理解并利用Prototype库的开发者来说,它是一份不可多得的资源。Prototype.js是一个强大的JavaScript库,由Sam ...
资源名称:PROTOTYPE.JS 1.4版开发者手册内容简介:prototype.js 是什么?万一你没有使用过大名鼎鼎的prototype.js,那么让我来告诉你,prototype.js是由Sam Stephenson写的一个javascript类库。这个构思奇妙,...
PROTOTYPE.JS 1.4版开发者手册(强烈推荐) prototype.js开发者手册 对应版本1.4.0 original article by sp('Sergio Pereira') Sergio Pereira last update: March 30th 2006 中文版:THIN 最后更新...
《prototype.js 1.4版开发者手册》是针对JavaScript库prototype.js的一个详尽指南,特别强调版本1.4.0。此手册由Sergio Pereira原创,后被翻译为中文,旨在帮助开发者理解和利用该库的强大功能。Prototype.js是一个...
《Prototype.js 1.4版开发者手册》是JavaScript开发者的重要参考资料,主要针对 Prototype JavaScript 库的1.4版本。Prototype.js 是一个强大的JavaScript框架,它为DOM操作、事件处理、AJAX交互等提供了便利的API,...
总的来说,Prototype.js 1.4版开发者手册是一个深入了解这个库及其功能的重要资源。虽然它可能没有提供官方文档那样的全面覆盖,但它包含了实践中常用的功能和示例,有助于开发者快速上手并熟练运用Prototype.js。...
### Prototype.js 1.4版开发者手册核心知识点详解 #### 一、Prototype.js简介与特点 **Prototype.js** 是一个非常优雅的 JavaScript 基础类库,它为 JavaScript 提供了大量的扩展,并且很好地支持 Ajax 技术。该类...
《prototype.js 1.4版开发手册》是针对JavaScript开发者的重要参考资料,主要聚焦于Prototype JavaScript框架的1.4版本。Prototype是一个广泛使用的开源JavaScript库,它扩展了JavaScript语言,为Web开发提供了强大...
《Prototype.js 1.4-1.6:JavaScript 动态原型框架的探索与实践》 Prototype.js 是一个广泛使用的JavaScript库...总的来说,Prototype.js 1.4-1.6[全]是一份宝贵的资源,对于JavaScript开发者来说具有很高的参考价值。
prototype.js是一个非常优雅的javascript基础类库,对javascript做了大量的扩展,而且很好的支持Ajax,国外有多个基于此类库实现的效果库,也做得很棒。 prototype.js不仅是一个有很大实用价值的js库,而且有很高...
尽管1.4版的开发者手册可能没有完整的参数说明,但通过源代码可以更深入地理解其工作原理。 总的来说,Prototype.js 是一个强大且优雅的JavaScript库,尤其对于B/S开发人员和JavaScript爱好者来说,它提供了丰富的...
博文链接:https://zyp731.iteye.com/blog/100369
万一你没有使用过大名鼎鼎的prototype.js,那么让我来告诉你,prototype.js是由Sam Stephenson写的一个javascript类库。这个构思奇妙,而且兼容标准的类库,能帮助你轻松建立有高度互动的web2.0特性的富客户端页面。
prototype.js是一个非常优雅的javascript基础类库,对javascript做了大量的扩展,而且很好的支持Ajax,国外有多个基于此类库实现的效果库,也做得很棒。 prototype.js不仅是一个有很大实用价值的js库,而且有很高的...
### Prototype.js 1.4 原代码阅读分析 #### 一、Prototype 框架简介 `Prototype.js` 是一款历史悠久的 JavaScript 库,在 jQuery 和其他现代前端库出现之前非常流行。它提供了许多增强的功能,使开发人员能够更...