- Prototype.js定义:
Prototype.js是一个javascript类库。该类库包含了web开发所需要的大部分常用方法。开发者可以直接调用无需写新的function()。
- 实用的函数:
- $()方法
$()方法是DOM中document.getElementById()的简写。可以传入多个id作为参数然后$()返回一个带有所有要求的元素的Arrary对象。
详看http://www.w3school.com.cn/htmldom/met_doc_getelementbyid.asp。
举例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Test Prototype.js</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="JS/prototype_3.js"></script> <script type="text/javascript" src="JS/validation_1.js"></script> <script type="text/javascript" src="JS/effects_2.js"></script> </head> <body> <script type="text/javascript"> function test1() { var d = $('myDiv'); alert(d.innerHTML); } </script> <div id="myDiv"> <p>This is a paragraph</p> </div> <input type="button" value=Test1 onclick="test1();"> <br> </body> </html> |
运行结果:
- $F()方法
$F()方法能够返回任何表单(form)输入控件的值(value)。该方法可以用元素id或元素本身作为参数。
其实现原理:document.formname.module.value
举例:
<script type="text/javascript"> function test3() { alert( $F('userName') ); } </script>
<input type="text" id="userName" value="Joe Doe"><br> <input type="button" value=Test3 onclick="test3();"><br>
|
运行结果:
- $A()函数
$A()函数能把接收到的单个参数转换成Arrary对象。
- $H()函数
$H()函数把一些对象转换成一个可枚举的联合数组类似的Hash对象。
- $R()函数
$R()是new ObjectRange(lowBound,upperBound,excludeBounds)的缩写。
- Try.these()函数
Try.these()方法把一系列的方法作为参数并且按顺序的一个个执行这些方法,直到其中一个成功执行,返回成功执行的方法的返回值。
- Ajax对象
Ajax对象是一个预定义对象,由这个包创建,为了封装和简化编写Ajax功能涉及的狡猾的代码。这个对象包含一系列的封装Ajax逻辑的类。
· Ajax.Request class继承自Ajax.Base class,它创建XMLHttpRequest对象简单且支持多种类型的浏览器。
Method:[ctor](url, options)
举例:用Ajax.Request对象和服务器通信
<html> <head><title>Test Prototype.js</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="JS/prototype_3.js"></script> <script type="text/javascript" src="JS/validation_1.js"></script> <script type="text/javascript" src="JS/effects_2.js"></script> </head> <body> <script type="text/javascript"> function searchSales() { var empID = $F('lstEmployees'); var y = $F('lstYears'); var url = 'http://localhost/mytest/test.php'; var pars = 'empID=' + empID + '&year=' + y; //alert(pars); 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> <div><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> <br> </div> </body> </html> |
· Ajax.Updater class
Method:[ctor](container, url, options) Container一般为容器的id
- prototype.js 参考
prototype.js中包含了许多常用类和方法,使用时可以参照pdf手册。以下列举的是prototype中最基本的部分类和函数可以主要学习。
· JavaScript 类的扩展
· The Ajax.Request class
· The Ajax.Updater class
· The Element.ClassNames class
· The Form object
· Position 对象
函数用法举例:
<html> <head> <title>Test Prototype.js</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="JS/prototype_3.js"></script> <script type="text/javascript" src="JS/validation_1.js"></script> <script type="text/javascript" src="JS/effects_2.js"></script> </head> <body> <script type="text/javascript"> function testStripTags() {//去除字符串中的html标签 var htmlString = "<textarea>okokokokokokokokokok</textarea>"; alert(htmlString.stripTags()); } function testEscapeHTML() {//合理转义字符串中的html标签 var htmlString = "<textarea>okokokokokokokokokok</textarea>"; alert(htmlString.escapeHTML()); } </script> <div><input type=button value="test stripString" onclick="testStripTags();"></div> <div><input type=button value="test EscapeHTML" onclick="testEscapeHTML();"></div> </body> </html> |
运行结果:
stripTags()结果: escapeHTML()结果: