prototype.js学习笔记

来源：互联网发布：burberry touch 知乎编辑：程序博客网时间：2024/05/14 10:43

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>

</head>

<body>

function test1()

{

var d = $('myDiv');

alert(d.innerHTML);

}

</script>

<p>This is a paragraph</p>

</div>

<br>

</body>

</html>

运行结果：

$F()方法

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

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

举例：

function test3()

{

alert( $F('userName') );

}

</script>

运行结果：

$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>

</head>

<body>

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>

<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()">

</select> <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>

</head>

<body>

function testStripTags() {//去除字符串中的html标签

var htmlString = "<textarea>okokokokokokokokokok</textarea>";

alert(htmlString.stripTags());

}

function testEscapeHTML() {//合理转义字符串中的html标签

var htmlString = "<textarea>okokokokokokokokokok</textarea>";

alert(htmlString.escapeHTML());

}

</script>

</body>

</html>

运行结果：

stripTags()结果： escapeHTML()结果：

0 0