`

Prototype中使用ObjectRange和Form.Element操作表单

阅读更多

先看ObjectRange的应用:
<!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>
		<title>ObjectRange</title>
		<meta name="author" content="Yeeku.H.Lee" />
		<meta name="website" content="http://www.crazyit.org" />
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	</head>
	<body>
		<script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
		<script type="text/javascript">
			//创建一个ObjectRange对象
			var range = new ObjectRange(2, 9, true);
			//编辑ObjectRange对象的元素
			range.each(function(ele, index) {
				document.writeln("索引" + index + "处的值为:" + ele + "<br />");
			});
			//使用$R()函数创建一个ObjectRange对象
			var ra = $R('a', 'e');
			//将ObjectRange转换为数组
			document.writeln($A(ra));
			//判断该ObjectRange里是否包含'b'
			alert(ra.include('b'));
		</script>
	</body>
</html>
 下面是Form.Element操作表单的程序代码:
<!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>
		<title>Form.Element对象</title>
		<meta name="author" content="Yeeku.H.Lee" />
		<meta name="website" content="http://www.crazyit.org" />
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	</head>
	<body>
		<script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
		<!-- 下面定义四个单行文本框,用于被下面的按钮事件操作 -->
		<input id="text1" name="text1" type="text" />
		<br />
		<input id="text2" type="text" />
		<br />
		<input id="text3" type="text" />
		<br />
		<input id="text4" type="text" value="crayjava.org" />
		<br />
		<select size="3" id="st1">
			<option>
				Java
			</option>
			<option>
				Java EE
			</option>
			<option>
				Ajax
			</option>
		</select>
		<br />
		<!-- 单击该按钮将清除第二个文本框的输入 -->
		<input type="button" value="清除第二个表单控件的输入"
			onclick="Form.Element.clear('text2');" />
		<br />
		<!-- 单击该按钮将校验第一个文本框的输入,
		当第一个文本框有输入时返回true -->
		<input type="button" value="校验第一个表单控件的输入"
			onclick="alert($('text1').present());" />
		<br />
		<!-- 单击该按钮将会把焦点移到第三个输入框 -->
		<input type="button" value="移动焦点到第三个输入框"
			onclick="Form.Element.focus('text3');" />
		<br />
		<!-- 单击该按钮将选中第四个文本框内的文字 -->
		<input type="button" value="选中第四个文本框的文本"
			onclick="Form.Element.select('text4');" />
		<br />
		<!-- 单击该按钮让列表框获得焦点 -->
		<input type="button" value="让下拉列表获得焦点" onclick="$('st1').activate();" />
		<br />
		<!-- 单击该按钮会将第一个文本框的内容转换为查询字符串 -->
		<input type="button" value="转换查询字符串" onclick="alert(Form.Element.serialize('text1'));"/>
		<br />
		<!-- 单击该按钮会将返回第一个文本框的值 -->
		<input type="button" value="返回第一个表单控件的值"
			onclick="alert(Form.Element.getValue('text1'));" />
		<br />
	</body>
</html>
 

分享到:
评论

相关推荐

    prototype.js开发者手册(中文)

    - **Form.Element 对象**:提供了对表单元素的操作方法。 - **Form.Element.Serializers 对象**:用于序列化表单元素。 - **Abstract.TimedObserver 类**:定时观察表单元素的状态变化。 - **Form.Element.Observer ...

    Developer Notes for prototype.doc

    Prototype 还定义了一些新的对象和类,包括但不限于 PeriodicalExecuter、Prototype、Enumerable、Hash、ObjectRange、Class、Ajax、Ajax.Responders、Ajax.Base、Ajax.Request、options argument object、Ajax....

    prototype 中文教程PDF

    - **5.4.29 The Form.Element.EventObserver class** - **5.4.30 The Form.EventObserver class** 每个类和对象都有其独特的功能,涵盖了从基本的 DOM 操作到复杂的 AJAX 交互等广泛领域。 #### 六、Position 对象...

    prototype 中文API

    `prototype.js` 不仅扩展了现有对象,还定义了许多新的对象和类,如`Ajax`, `Element`, `Form`, `Hash`等,这些类提供了丰富的功能和接口,方便开发者进行复杂的页面操作。 #### 六、Position对象 虽然文档提到...

    Prototype ObjectRange对象学习

    `Prototype`库中的`ObjectRange`对象是一种特殊的数据结构,用于表示一段连续的数值或字符序列。...理解和掌握`ObjectRange`可以帮助我们更高效地处理数值或字符串序列,特别是在需要遍历和操作这些序列的场景下。

    AJAX之Prototype入门学习.docx

    虽然缺乏官方完整文档,但网络上有许多关于 Prototype 使用和源码解读的文章,可以帮助开发者克服这一挑战。 总的来说,Prototype 是一个强大的 JavaScript 库,通过提供丰富的工具和接口,极大地简化了 AJAX 应用...

    Prototype Enumerable对象 学习第1/2页

    在Prototype框架中,很多对象如Array、Hash、ObjectRange以及与DOM和AJAX相关的对象都混合了Enumerable模块,使得这些对象能够利用Enumerable的方法。 Enumerable模块的设计理念类似于某些面向对象语言中的抽象基类...

    prototype 权威手册

    在Prototype中,对象被划分为三个主要类别:类(Class)、命名空间(Namespace)和模块(Module)。 - **类(Class)**: 类似面向对象编程中的概念,通过`new`操作符来实例化对象。例如 `ObjectRange`, `Ajax....

    Prototype 工具函数 学习

    ObjectRange通常用于表示一组连续的对象或数值,它提供了迭代和操作这个范围的函数。在处理数组或需要遍历一定范围的值时,ObjectRange可以提供帮助。 然后,我们来看看Try.these这个工具函数。它接受任意数量的...

    ajax详细使用方法

    通过上述介绍和示例代码的解析,我们可以看出Prototype库提供了非常实用的功能来简化JavaScript编程,特别是与DOM操作相关的任务。掌握这些函数的使用方法对于提高前端开发效率是非常有帮助的。

Global site tag (gtag.js) - Google Analytics