学习Prototype框架，最基础的就是如何对dom进行操作。可以通过一个简单的$()函数取得dom中的元素对象。比如你可以书写$('comments').addClassName('active').show() 来获得ID为 'comments'的元素, 并为此元素添加一个 名称为'active'的class，最后显示它 (如果它原来为hidden)。在原始的JavaScript中 'comments' 元素并没有这些方法（比如这里的addClassName('active').show() ），而使用Prototype框架就可以使用这些方法方便地实现相应的功能。
Prototype框架把原始的javascript操作dom的方法使用形式如：Element.Methods的方法封装了。下面看一个例子。首先到http://www.prototypejs.org/download下载此框架，解压缩后最重要的是prototype.js文件（你下载的可能不是这个名字，比如带有版本号prototype1.6.0xxx0.0.js,本人觉得不方便就手动修改为了prototype.js）。
第二步就是把这个文件放入到web应用目录下，例如webapps\hello\javascripts\prototype.js。
实例1：$()函数的使用、为div标记添加样式。
在hello站点目录下创建hello.html,代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript" src="javascripts/prototype.js"></script>
<link href="css/test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button onclick="$('message').addClassName('STYLE1'); ">点我一下看！</button>
<div class="" id="message">这是一个测试字符串</div>
</body>
</html>
运行结果如下：
点击按钮后如下：
这里要说明的是名为STYLE1的样式在hello/css/test.css文件里定义着，代码如下：
.STYLE1 {
font-size: 24px;
font-weight: bold;
color:#FF0000
}
实例2：替换div中的内容：
<button onclick="$('message').addClassName('STYLE1').update('I read this message!'); ">点我一下看！</button>
<div class="" id="message">这是一个测试字符串</div>
运行：
点击后：
- 大小: 3.5 KB
- 大小: 7.8 KB
- 大小: 4.3 KB
- 大小: 6.5 KB
分享到：
相关推荐
Prototype的核心特性之一就是其强大的DOM处理能力，使得开发者能够更加高效地操作页面元素。 在Prototype中，`$`函数是其最知名的快捷方式，用于选取DOM元素。它类似于jQuery的`$`选择器，可以接受CSS选择器，返回...
总结，Prototype.js是JavaScript开发中的一个重要工具，它通过一系列强大的API和设计模式，使得JavaScript的开发更加高效、优雅。通过学习和掌握Prototype，开发者可以更好地驾驭JavaScript，创造出更具交互性的Web...
1. **Prototype库基础**：Prototype库提供了一系列的JavaScript扩展，包括类、对象、数组、字符串和函数的增强，以及DOM操作、事件处理、Ajax请求等工具。 2. **类与对象**：Prototype通过模拟面向对象编程的概念，...
《Prototype 1.5.1使用手册》是针对JavaScript库Prototype的一个详细指南，该库是Web开发中的一个强大工具，尤其在处理DOM操作、Ajax交互和函数增强方面表现卓越。本手册以.chm（Compiled Help Manual）格式提供，...
2. **Prototype 1.5**：在这个版本中，Prototype进一步增强了其对DOM操作的支持，提供了更丰富的选择器API，如`$$()`，它实现了类似CSS的选择器语法。同时，对AJAX（异步JavaScript和XML）的支持也得到了优化，如`...
Prototype的核心在于它简化了JavaScript的DOM操作，提供了一套统一的API，使得开发者可以更高效地编写跨浏览器的JavaScript代码。它引入了类、继承和模块化的设计，使得JavaScript具备了更强大的面向对象编程能力。...
Prototype框架的目标是简化JavaScript编程，通过提供一系列简洁易用的方法来处理DOM操作、Ajax请求和其他常见的Web开发任务。 #### 二、Prototype框架的关键特性 - **Ajax支持**：Prototype提供了多个用于Ajax请求...
2. **DOM操作**：PrototypeJS提供了一系列便捷的DOM操作方法，如`$(selector)`作为文档选择器，类似于jQuery中的功能，可以快速获取DOM元素。还有`Element`对象的方法，如`show()`, `hide()`, `toggle()`, 用于控制...
1. **对象扩展**：Prototype的核心特性之一就是对JavaScript原生对象的扩展，如Array、String、Function等，增加了许多实用的方法，如Array的each、indexOf等，方便数组和字符串的操作。 2. **Class与Prototype链**...
例如，你可以使用Prototype创建新的DOM元素，选择和操作已存在的元素，以及监听和响应用户的交互事件。 接下来是三个CHM文件，分别是Prototype的1.4、1.5和1.6版本的手册。这些手册是开发者的重要参考资料，详细...
2. **DOM操作**：Prototype 提供了$()函数，可以快速获取或创建DOM元素，以及Element对象，包含了一系列针对DOM元素的操作方法，如show(), hide(), toggle(), insert()等，使得DOM操作变得简单直观。 3. **AJAX支持...
2. **DOM操作**：Prototype提供了强大的DOM操作接口，如`Element`和`Selectors`，使得选取和操作页面元素变得非常简单。例如，`$`函数可以快速获取DOM元素，而`$$`函数则能根据CSS选择器选取一组元素。 3. **数组...
Prototype JavaScript 框架，简称 Prototype，是 JavaScript 语言中一个广泛使用的开源库，它为 Web 开发提供了一系列强大的工具，旨在简化 DOM 操作、事件处理、Ajax 交互以及对象扩展等任务。本文将详细探讨 ...
Prototype是一个广泛使用的JavaScript框架，它扩展了JavaScript的核心功能，简化DOM操作，提供了一些实用的工具函数，以及强大的面向对象特性。Prototype库的主要特点包括： 1. **DOM助手（DOM Manipulation）**：...
jQuery是另一个非常流行的JavaScript库，简化了DOM操作、事件处理和动画效果。"Jquery-Cheat-Sheet-1.2.pdf"应该包含jQuery的核心函数和选择器，如$(selector)、.click()、.fadeIn()等，以及jQuery对AJAX的支持。 ...
在功能方面，Prototype.js的一大亮点是其强大的DOM操作接口。通过Prototype，开发者可以使用简洁的语法进行元素的选择、创建、修改和删除。例如，`Element.extend`方法允许扩展任何DOM元素的功能，而`$`函数则是一个...
这个压缩包包含了一系列与Prototype相关的文件，如CSS样式表、HTML文档以及可能的测试用例，帮助我们深入学习和实践Prototype。 1. **Prototype机制**：在JavaScript中，每个函数都有一个prototype属性，这个属性...
Prototype.js 是一款广泛使用的JavaScript库，它极大地扩展了JavaScript的基本功能，提供了丰富的DOM操作、事件处理、Ajax交互以及对象扩展等工具，使得JavaScript编程变得更加简洁高效。在"prototype-1.6.0.2.js....
Prototype.js 提供了一系列便捷的 DOM 操作方法，如 `Element.select()` 和 `Element.hide()`。1.6 版本进一步优化了这些方法，提高了性能并减少了代码量。`Element.Methods` 中新增了多个实用方法，使得对 HTML ...