prototype.js学习笔记

客官°小女子只卖身不卖艺 2022-08-25 05:25 141阅读 0赞

1.  **Prototype.js定义：**

Prototype.js是一个javascript类库。该类库包含了web开发所需要的大部分常用方法。开发者可以直接调用无需写新的function()。

1.  **实用的函数：**

*  $()方法

$()方法是DOM中document.getElementById()的简写。可以传入多个id作为参数然后$()返回一个带有所有要求的元素的Arrary对象。

详看[http://www.w3school.com.cn/htmldom/met\_doc\_getelementbyid.asp][http_www.w3school.com.cn_htmldom_met_doc_getelementbyid.asp]。

举例：

<table style="color:rgb(51,51,51)"> 
 <tbody> 
 <tr> 
 <td> &lt;!DOCTYPE&nbsp;HTML&nbsp;PUBLIC&nbsp;"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Test Prototype.js&lt;/title&gt; &lt;meta&nbsp;http-equiv="Content-Type"&nbsp;content="text/html; charset=UTF-8"&gt; &lt;script&nbsp;type="text/javascript"&nbsp;src="JS/prototype_3.js"&gt;&lt;/script&gt; &lt;script&nbsp;type="text/javascript"&nbsp;src="JS/validation_1.js"&gt;&lt;/script&gt; &lt;script&nbsp;type="text/javascript"&nbsp;src="JS/effects_2.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;script&nbsp;type="text/javascript"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;test1() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;d = $('myDiv'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(d.innerHTML); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &lt;/script&gt; &lt;div&nbsp;id="myDiv"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a paragraph&lt;/p&gt; &lt;/div&gt; &lt;input&nbsp;type="button"&nbsp;value=Test1&nbsp;onclick="test1();"&gt; &lt;br&gt; &lt;/body&gt; &lt;/html&gt; </td> 
 </tr> 
 </tbody> 
</table>

运行结果：

*  $F()方法

$F()方法能够返回任何表单(form)输入控件的值(value)。该方法可以用元素id或元素本身作为参数。

其实现原理：document.formname.module.value

举例：

<table style="color:rgb(51,51,51)"> 
 <tbody> 
 <tr> 
 <td> &lt;script&nbsp;type="text/javascript"&gt; function&nbsp;test3() { &nbsp;&nbsp;&nbsp;alert(&nbsp;&nbsp;$F('userName')&nbsp;&nbsp;); } &lt;/script&gt; &nbsp; &lt;input&nbsp;type="text"&nbsp;id="userName"&nbsp;value="Joe Doe"&gt;&lt;br&gt; &lt;input&nbsp;type="button"&nbsp;value=Test3&nbsp;onclick="test3();"&gt;&lt;br&gt; &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

运行结果：

*  $A()函数

$A()函数能把接收到的单个参数转换成Arrary对象。

*  $H()函数

$H()函数把一些对象转换成一个可枚举的联合数组类似的Hash对象。

*  $R()函数

$R()是new ObjectRange(lowBound,upperBound,excludeBounds)的缩写。

*  Try.these()函数

Try.these()方法把一系列的方法作为参数并且按顺序的一个个执行这些方法，直到其中一个成功执行，返回成功执行的方法的返回值。

1.  **Ajax对象**

Ajax对象是一个预定义对象，由这个包创建，为了封装和简化编写Ajax功能涉及的狡猾的代码。这个对象包含一系列的封装Ajax逻辑的类。

·        Ajax.Request class继承自Ajax.Base class，它创建XMLHttpRequest对象简单且支持多种类型的浏览器。

**Method:\[ctor\](url, options)**

举例：用Ajax.Request对象和服务器通信

<table style="color:rgb(51,51,51)"> 
 <tbody> 
 <tr> 
 <td> &lt;html&gt; &lt;head&gt;&lt;title&gt;Test Prototype.js&lt;/title&gt; &lt;meta&nbsp;http-equiv="Content-Type"&nbsp;content="text/html; charset=UTF-8"&gt; &lt;script&nbsp;type="text/javascript"&nbsp;src="JS/prototype_3.js"&gt;&lt;/script&gt; &lt;script&nbsp;type="text/javascript"&nbsp;src="JS/validation_1.js"&gt;&lt;/script&gt; &lt;script&nbsp;type="text/javascript"&nbsp;src="JS/effects_2.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;script&nbsp;type="text/javascript"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;searchSales() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;empID = $F('lstEmployees'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;y = $F('lstYears'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;url =&nbsp;'http://localhost/mytest/test.php'; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;pars =&nbsp;'empID='&nbsp;+ empID +&nbsp;'&amp;year='&nbsp;+ y; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//alert(pars); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;myAjax =&nbsp;new&nbsp;Ajax.Request( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;method:&nbsp;'get', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parameters: pars, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onComplete: showResponse &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;showResponse(originalRequest) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//put returned XML in the textarea &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('result').value = originalRequest.responseText; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &lt;/script&gt; &lt;div&gt;&lt;select&nbsp;id="lstEmployees"&nbsp;size="10"&nbsp;onchange="searchSales()"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="5"&gt;Buchanan, Steven&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="8"&gt;Callahan, Laura&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="1"&gt;Davolio, Nancy&lt;/option&gt; &lt;/select&gt;&nbsp;&lt;select&nbsp;id="lstYears"&nbsp;size="3"&nbsp;onchange="searchSales()"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;selected="selected"&nbsp;value="1996"&gt;1996&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="1997"&gt;1997&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="1998"&gt;1998&lt;/option&gt; &lt;/select&gt;&nbsp;&lt;br&gt; &lt;textarea&nbsp;id=result&nbsp;cols=60&nbsp;rows=10&gt;&lt;/textarea&gt;&nbsp;&lt;br&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </td> 
 </tr> 
 </tbody> 
</table>

·        Ajax.Updater  class

**Method:\[ctor\](container, url, options) **  Container一般为容器的id

1.  **prototype.js 参考**

prototype.js中包含了许多常用类和方法，使用时可以参照pdf手册。以下列举的是prototype中最基本的部分类和函数可以主要学习。

·        JavaScript 类的扩展

·        The Ajax.Request class

·        The Ajax.Updater class

·        The Element.ClassNames class

·        The Form object

·         Position 对象

函数用法举例：

运行结果：