您的位置：首页 > Web前端 > JavaScript

prototype.js学习笔记

2007-12-26 10:49 393 查看

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
举例：

运行结果：

$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 对象
函数用法举例：

运行结果：
stripTags()结果： escapeHTML()结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航