`

读《prototype.js 1.4版开发者手册 》摘录

阅读更多
资料地址:

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版开发者手册(强烈推荐)

    《prototype.js 1.4版开发者手册》是JavaScript开发领域中的一个重要参考资料,尤其对于那些希望深入理解并利用Prototype库的开发者来说,它是一份不可多得的资源。Prototype.js是一个强大的JavaScript库,由Sam ...

    PROTOTYPE.JS1.4版开发者手册

    资源名称:PROTOTYPE.JS 1.4版开发者手册内容简介:prototype.js 是什么?万一你没有使用过大名鼎鼎的prototype.js,那么让我来告诉你,prototype.js是由Sam Stephenson写的一个javascript类库。这个构思奇妙,...

    PROTOTYPE.JS 1.4版开发者手册(中文版pdf格式)

    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版开发者手册

    《prototype.js 1.4版开发者手册》是针对JavaScript库prototype.js的一个详尽指南,特别强调版本1.4.0。此手册由Sergio Pereira原创,后被翻译为中文,旨在帮助开发者理解和利用该库的强大功能。Prototype.js是一个...

    prototype.js 1.4版开发者手册

    《Prototype.js 1.4版开发者手册》是JavaScript开发者的重要参考资料,主要针对 Prototype JavaScript 库的1.4版本。Prototype.js 是一个强大的JavaScript框架,它为DOM操作、事件处理、AJAX交互等提供了便利的API,...

    prototype.js 1.4版开发者手册.doc

    总的来说,Prototype.js 1.4版开发者手册是一个深入了解这个库及其功能的重要资源。虽然它可能没有提供官方文档那样的全面覆盖,但它包含了实践中常用的功能和示例,有助于开发者快速上手并熟练运用Prototype.js。...

    prototype.js1.4版开发者手册

    ### Prototype.js 1.4版开发者手册核心知识点详解 #### 一、Prototype.js简介与特点 **Prototype.js** 是一个非常优雅的 JavaScript 基础类库,它为 JavaScript 提供了大量的扩展,并且很好地支持 Ajax 技术。该类...

    prototype.js 1.4版开发手册

    《prototype.js 1.4版开发手册》是针对JavaScript开发者的重要参考资料,主要聚焦于Prototype JavaScript框架的1.4版本。Prototype是一个广泛使用的开源JavaScript库,它扩展了JavaScript语言,为Web开发提供了强大...

    prototype.js 1.4-1.6[全]

    《Prototype.js 1.4-1.6:JavaScript 动态原型框架的探索与实践》 Prototype.js 是一个广泛使用的JavaScript库...总的来说,Prototype.js 1.4-1.6[全]是一份宝贵的资源,对于JavaScript开发者来说具有很高的参考价值。

    Javascript-prototype.js 1.4版开发者手册

    prototype.js是一个非常优雅的javascript基础类库,对javascript做了大量的扩展,而且很好的支持Ajax,国外有多个基于此类库实现的效果库,也做得很棒。 prototype.js不仅是一个有很大实用价值的js库,而且有很高...

    prototype.js 1.4版开发者手册.doc

    尽管1.4版的开发者手册可能没有完整的参数说明,但通过源代码可以更深入地理解其工作原理。 总的来说,Prototype.js 是一个强大且优雅的JavaScript库,尤其对于B/S开发人员和JavaScript爱好者来说,它提供了丰富的...

    PROTOTYPE.JS 1.4版开发者手册

    博文链接:https://zyp731.iteye.com/blog/100369

    PROTOTYPE.JS 1.4版开发者手册(强烈推荐)

    万一你没有使用过大名鼎鼎的prototype.js,那么让我来告诉你,prototype.js是由Sam Stephenson写的一个javascript类库。这个构思奇妙,而且兼容标准的类库,能帮助你轻松建立有高度互动的web2.0特性的富客户端页面。

    Prototype.js 1.4中文使用手册PDF版

    prototype.js是一个非常优雅的javascript基础类库,对javascript做了大量的扩展,而且很好的支持Ajax,国外有多个基于此类库实现的效果库,也做得很棒。 prototype.js不仅是一个有很大实用价值的js库,而且有很高的...

    prototype.js 1.4 原代码阅读

    ### Prototype.js 1.4 原代码阅读分析 #### 一、Prototype 框架简介 `Prototype.js` 是一款历史悠久的 JavaScript 库,在 jQuery 和其他现代前端库出现之前非常流行。它提供了许多增强的功能,使开发人员能够更...

Global site tag (gtag.js) - Google Analytics