JavaScriptDOM实例解析

最新推荐文章于 2022-09-05 21:03:55 发布

原创最新推荐文章于 2022-09-05 21:03:55 发布 · 366 阅读

1 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

3 篇文章

订阅专栏

本文通过两个实例介绍JavaScript中的基本事件处理及如何实现二级联动效果。第一个实例展示了页面加载事件、获得焦点事件、失去焦点事件、键盘事件及数值变化事件的应用。第二个实例则详细解释了如何使用JavaScript实现省份和城市选项的二级联动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

基本的事件
- 知识汇总
- - 实例1：
  - 实例2：二级联动

基本的事件

知识汇总

实例1：

out.js
function println(str){
	document.write(str+"<br/>");
}

1.html
<html>
<head>
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
	//希望页面加载完毕后，让用户名得到焦点
	window.onload = function(){
		document.getElementById("username").focus();	//得到焦点
		document.getElementById("username").onfocus = function(){
			//得到焦点后触发的事件
			this.value="";
		}
		document.getElementById("username").onblur = function(){
			//判断当前输入域的值是不是"";
			if(this.value == ""){
				//如果是：value回复默认值
				this.value="用户名/邮箱/手机号";
			}
			//不是：就不恢复
		}
		//键盘事件:应用，网银密码（限制输入数字）；用户登陆或注册，账号限定为字母。
/**
		//检查哪里出了问题（比较两种事件）
		window.onload = function(){
			document.getElementById("gender").onkeypress = function(e){
				alert(e.keyCode);
			}
		}
**/
		//event是个什么东西?
		function checkKeyCode(e){
			alert(e.keyCode);	//键盘字母对应的ASCII码。回车：13
		}
		
		//数值变化事件
		window.onload=function(){
			document.getElementById("num").onchange = function(){
				var amount = this.value*10;
				document.getElementById("amount").value=amount;
			}
		}
	}
</script>
</head>
<body>
	<form id="f1" action="http://www.baidu.com">
		username:<input type="text" id="username" name="username" value="用户名/邮箱/手机号" /><br/>
		password:<input type="password" id="password" name="password" /><br/>
		<input type="button" value="提交" onclick="toSubmit()" />
	</form>
	gender:<input type="text" id="gender" name="gender" onkeypress="checkKeyCode(event)" />
	<hr/>
	<table border="1" width="438">
		<tr>
			<td>书名</td>
			<td>作者</td>
			<td>单价</td>
			<td>数量</td>
			<td>小计</td>
		</tr>
		<tr>
			<td>葵花宝典</td>
			<td>牛骞</td>
			<td>10</td>
			<td>
				<input type="text" id="num" name="num" value="3" size="2"/>
			</td>
			<td>
				<input type="text" id="amount" name="amount" value="30" size="2" />
			</td>			
		</tr>
	</table>
</body>
</html>

实例2：二级联动

<html>
<head>
<title>二级联动:数组</title>
<script type="text/javascript">
	var citys = initData();	//初始化数据
	window.onload = function(){
		document.getElementById("province").onchange = function(){
			//根据省份的变化，改变城市的列表值
				var provinceValue = this.value;
				//取citys数组中对应索引位置上的元素
				var cs = citys[provinceValue];
				
				在添加之前：初始化为请求选择
				document.getElementById("city").options.length = 0;
				var pleaseSelectOp = new Option("---请选择--","");
				document.getElementById("city").add(pleaseSelectOp);
				
				//给第二个city下拉选择框，添加option元素：HTML DOM编程
				for(var i=0;i<cs.length;i++){
					//一个参数为标签的显示内容，一个参数为属性value的值，
					var op = new Option(cs[i],cs[i]);
					document.getElementById("city").add(op);
				}
			}
		}
	}
	function initData(){
		var citys = new Array();
		citys[1] = new Array("朝阳","海淀","昌平");
		citys[2] = new Array("广州","深圳","东莞");
		citys[3] = new Array("武汉","襄樊","荆州");	
		return citys;
	}
</script>
</head>
<body>
	<form id="f1" action="">
		省份：
		<select id="province" name="province">
			<option value="0">请选择</option>
			<option value="1">北京</option>
			<option value="2">山东</option>
			<option value="3">湖北</option>
		</select>
		城市：
		<select id="city" name="city">
			<option value="">---请选择---</option>
		</select>
	</form>
</body>
</html>