Prototype使用Form操作表单和使用Hash对象

最新推荐文章于 2017-10-17 17:57:41 发布

平民-王子

最新推荐文章于 2017-10-17 17:57:41 发布

阅读量108

点赞数

分类专栏： Prototype 文章标签： prototype JavaScript Ajax XHTML JavaEE ViewUI

本文链接：https://blog.csdn.net/libinxuan520/article/details/83767825

版权

Prototype 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

先看使用Form操作表单：

<!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元素</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>
		<!-- 被操作的目标表单 -->
		<form id="form1" name="form1" method="post">
			<!-- 定义四个单行文本框 -->
			<input id="text1" name="text1" type="text" />
			<br />
			<input id="text2" name="text2" type="text" />
			<br />
			<input id="text3" name="text3" type="text" />
			<br />
			<input id="text4" name="text4" type="text" value="xxxxxxxxx" />
			<br />
			<select id="st1" name="st1" size="3">
				<option value="java">
					Java
				</option>
				<option value="javaee">
					Java EE
				</option>
				<option value="ajax">
					Ajax
				</option>
			</select>
			<br />
		</form>
		<!-- 下面按钮将所有表单控件的转换成查询字符串 -->
		<input type="button" value="转换查询字符串"
			οnclick="alert($('form1').serialize());" />
		<br />
		<!-- 下面按钮将返回表单的第一个有效表单控件 -->
		<input type="button" value="返回第一个有效的表单控件"
			οnclick="alert($('form1').findFirstElement());" />
		<br />
		<!-- 下面按钮返回所有表单控件 -->
		<input type="button" value="返回表单的全部表单控件"
			οnclick="alert($('form1').getElements());" />
		<br />
		<!-- 下面按钮返回所有input控件 -->
		<input type="button" value="返回表单的全部input"
			οnclick="alert($('form1').getInputs());" />
		<br />
		<!-- 下面按钮启用所有表单控件 -->
		<input type="button" value="启用所有表单控件" οnclick="$('form1').enable();" />
		<br />
		<!-- 下面按钮禁用所有表单控件 -->
		<input type="button" value="禁用所有表单控件" οnclick="$('form1').disable();"/>
		<br />
		<!-- 下面按钮将焦点移动到第一个可视的表单控件 -->
		<input type="button" value="将焦点移动到第一个可视的表单控件"
			οnclick="$('form1').focusFirstElement();" />
		<br />
		<!-- 下面按钮将重设表单 -->
		<input type="button" value="重设表单" οnclick="$('form1').reset();" />
		<br />
	</body>
</html>

下面是使用Hash对象的例子：

<!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>Hash对象</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">
			//定义一个JavaScript对象
			var person = {
				name : 'lbx',
				age : 29
			};
			//将JavaScript对象转换成Hash对象
			var h = $H(person);
			//将Hash对象转换成查询字符串。输出：name=yeeku&age=29
			document.writeln(h.toQueryString() + "<br />");
			//测试merge方法
			var person = {
				name : 'lbx',
				age : 29
			};
			var teacher = {
				name : 'chy',
				gender : 'male'
			};
			//将后一个Hash对象merge到前一个Hash对象中
			var h = $H(person).merge($H(teacher));
			//输出：name=yeeku.H.lee&age=29&gender=male
			document.writeln(h.toQueryString() + "<br />");
			//直接使用JavaScript对象来更新Hash对象
			h.update( {
				age : 30,
				subject : "java"
			});
			//将输出：name=yeeku.H.lee&age=30&gender=male&subject=java
			document.writeln(h.toQueryString() + "<br />");
			//遍历Hash对象的每个key-value对
			h.each(function(pair) {
				document.writeln(pair.key + "-->" + pair.value + "<br />");
			});
		</script>
	</body>
</html>

平民-王子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Prototype使用Form操作表单和使用Hash对象

先看使用Form操作表单：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &l...
复制链接

扫一扫

专栏目录