读《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>


未完待续……

你可能感兴趣的:(java,Ajax,prototype,IE,firefox)