DOM【事件、操作节点、DOM案例】--学习JavaEE的day49

day49

JS核心技术

DOM

继day48

事件

键盘事件

监听器：onkeydown、onkeypress、onkeyup

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<input type="text" 
			onkeydown="myDown()"
			onkeypress="myPress()"
			onkeyup="myUp()"
		/>
		
		<script type="text/javascript">
			
			function myDown(){//键盘按下事件
				console.log("down");
			}
			
			function myPress(){//键盘按下事件 - 功能键(上下左右、删除键...)是不会被触发的
				console.log("press");
			}
			function myUp(){//键盘松开事件
				console.log("up");
			}			
		</script>
			
		
	</body>
</html>

运行：注意Tab只触发了一个事件，回车与其他功能键不同
键盘事件

案例

设置一个文本框，每敲一个字母，会触发将输入文本转换为大写的函数。

注：键盘按下字母为小写，松开字母变为大写，可见我们设置的监听器onkeyup

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<input type="text" 
			onkeyup="myUp(this)"
		/>
		
		<script type="text/javascript">

			function myUp(obj){
				//获取value属性
				var v = obj.value;
				//转大写
				v = v.toUpperCase();
				//设置value属性
				obj.value = v;
			}			
		</script>
		
	</body>
</html>

鼠标事件

onMouseDown 按下鼠标时触发
onMouseOver 鼠标经过时触发
onMouseUp 按下鼠标松开鼠标时触发
onMouseOut 鼠标移出时触发
onMouseMove 鼠标移动时触

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<img src="../../img/波多野结衣.jpg" width="100px" height="100px"
			onmousedown="myDown()"
			onmouseup="myUp()"
			onmousemove="myMove()"
			onmouseover="myOver()"
			onmouseout="myOut()"
		/>
		
		<script type="text/javascript">
			
			function myDown(){//鼠标按下事件
				console.log("down");
			}
			
			function myUp(){//鼠标松开事件
				console.log("up");
			}
			
			function myMove(){//鼠标移动事件
				console.log("move");
			}
			
			function myOver(){//鼠标移入事件
				console.log("over");
			}
			
			function myOut(){//鼠标移出事件
				console.log("out");
			}
			
			
		</script>
		
	</body>
</html>

运行：鼠标移入–鼠标移动–鼠标按下–鼠标松开–鼠标移动–鼠标移出
鼠标事件

案例

一个类似游戏选英雄，选中深色，未选中灰色；鼠标移入移出事件加cs样式来简单实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
				width: 100px;
				height: 100px;
				opacity: 0.3;/*设置透明度*/
			}
		</style>
	</head>
	<body>
		
		<img src="../../img/波多野结衣.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/>
		<img src="../../img/星空一花.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/>
		<img src="../../img/樱井步.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/>
		<img src="../../img/tx1.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/>
		<img src="../../img/tx2.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/>
		<img src="../../img/tx3.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/>
		
		<script type="text/javascript">
			
			function myOver(obj){//鼠标移入事件
				obj.style.opacity = 1;
			}
			
			function myOut(obj){//鼠标移出事件
				obj.style.opacity = 0.3;
			}
		</script>
	</body>
</html>

运行：
鼠标事件案例

案例优化

动态绑定事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
				width: 100px;
				height: 100px;
				opacity: 0.3;/*设置透明度*/
			}
		</style>
	</head>
	<body>
		
		<img src="../../img/波多野结衣.jpg" />
		<img src="../../img/game01.jpg" />
		<img src="../../img/星空一花.jpg" />
		<img src="../../img/tx1.jpg" />
		<img src="../../img/tx2.jpg" />
		<img src="../../img/tx3.jpg" />
		
		<script type="text/javascript">
			
			//动态绑定事件
			var imgArr = document.getElementsByTagName("img");
			for(var i = 0;i<imgArr.length;i++){
				
				var img = imgArr[i];
				img.onmouseover = function(){
					this.style.opacity = 1;
				}
				img.onmouseout = function(){
					this.style.opacity = 0.3;
				}
			}
			
		</script>
	</body>
</html>

焦点事件

onfocus获取焦点事件

onblur失去焦点事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<input type="text"
			onfocus="myFocus()"
			onblur="myBlur()"	
		/>
		
		<script type="text/javascript">
			
			function myFocus(){//获取焦点事件
				console.log("focus");
			}
			
			function myBlur(){//失去焦点事件
				console.log("blur");
			}
			
			
		</script>
		
	</body>
</html>

运行：点进去–退出来
焦点事件

案例

写一个注册账号的文本框，默认显示“请输入账号…”，光标定位到之后，自动将里面的信息清除掉

注意：这里的条件判断和正则表达式是优化，浏览器老版本不支持trim【trim表获取该函数里代码，trim()表调用】，js使用正则表达式很普遍

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<input type="text"
			value="请输入账号..."
			onfocus="myFocus(this)"
			onblur="myBlur(this)"	
		/>
		
		<script type="text/javascript">
			
			function myFocus(obj){//获取焦点事件
				if(obj.value == "请输入账号..."){
					obj.value = "";
				}
			}
			
			function myBlur(obj){//失去焦点事件
				
				//获取该函数里的代码，如果当前浏览器支持该函数，就返回函数里的代码（字符串），如果不支持就返回undefined
				//alert(obj.value.trim);
				
				//判断浏览器是否兼容次方法
				if(obj.value.trim){
					if(obj.value.trim() == ""){
						obj.value = "请输入账号...";
					}
				}else{
					//注意：IE老版本是不支持trim()
					//将字符串的首尾空格的字符替换成空字符串，以达到去空格的目的
					if(obj.value.replace(/(^\s+)|(\s+$)/g,"") == ""){
						obj.value = "请输入账号...";
					}
				}
				
				
			}
			
			
		</script>
		
	</body>
</html>

运行：
焦点事件案例

操作节点

添加节点

创建新的 HTML 元素

如需向 HTML DOM 添加新元素，必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

删除节点

如需删除 HTML 元素，必须首先获得该元素的父元素

注意：对于删除节点观察，这里查的元素是id为manager的标签div，如果在此标签外有换行之类的标签会出现删除不到，也可以说是查不到

addP()方便理解，简单添加标签使用innerHTML可简化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<button onclick="addP()">添加p标签</button>
		<button onclick="addImg()">添加img标签</button>
		<button onclick="deleteImg()">删除img标签</button>
		
		<div id="manager"></div>
		
		<script type="text/javascript">
			
			var manager = document.getElementById("manager");
			
			function addP(){
				//创建节点 - <p></p>
				var p = document.createElement("p");
				
				//创建文本内容 - 用良心做教育
				var text = document.createTextNode("用良心做教育");
				
				//将文本内容添加到节点里 - <p>用良心做教育</p>
				p.appendChild(text);
				
				//将节点添加到div中
				manager.appendChild(p);
			}
			
			function addImg(){
				//创建节点 - <img />
				var img = document.createElement("img");
				
				//设置属性
				img.setAttribute("src","../../img/tx2.jpg");
				img.setAttribute("width","100px");
				img.setAttribute("height","100px");
				
				//创建节点 - <br/>
				var br = document.createElement("br");
				
				//将节点添加到div中
				manager.appendChild(img);
				manager.appendChild(br);
				
			}
			
			function deleteImg(){
				//删除思路：由父节点删除子节点
				
				//查询需要删除的节点
				var img = document.getElementsByTagName("img")[0];
				var br = document.getElementsByTagName("br")[0];
				
				
				manager.removeChild(img);
				manager.removeChild(br);
				
			}
			
		</script>
	</body>
</html>

运行：
操作节点

案例

删除学生信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<table border="1" width="300px">
			
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>操作</th>
			</tr>
			
			<tr>
				<td>小希</td>
				<td>女</td>
				<td>27</td>
				<td>
					<button onclick="myDelete(this)">删除</button>
				</td>
			</tr>
			<tr>
				<td>小阳</td>
				<td>女</td>
				<td>23</td>
				<td>
					<button onclick="myDelete(this)">删除</button>
				</td>
			</tr>
			<tr>
				<td>小西</td>
				<td>女</td>
				<td>25</td>
				<td>
					<button onclick="myDelete(this)">删除</button>
				</td>
			</tr>
			<tr>
				<td>小香</td>
				<td>女</td>
				<td>24</td>
				<td>
					<button onclick="myDelete(this)">删除</button>
				</td>
			</tr>
			
		</table>
		
		<script type="text/javascript">
			
			function myDelete(obj){
				
				var tr = obj.parentNode.parentNode;
				var table = tr.parentNode;
				table.removeChild(tr);
			}
			
		</script>
	</body>
</html>

运行：
节点案例

案例

计算器案例

计算器案例：获取元素值不用查询的方法，过于繁琐，text01.value；

注意获取值需要将文本框String类型转Int类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<input type="text" id="text01"/>
		+
		<input type="text" id="text02"/>
		<button onclick="add()">=</button>
		<input type="text" id="text03"/>
		
		<script type="text/javascript">
			
			function add(){
				//获取到输入框的value是string类型
				var result = parseInt(text01.value) + parseInt(text02.value);
				text03.value = result;
			}
			
		</script>
	</body>
</html>

做级联下拉列表— 二级联动（省市）

首先编写两个下拉列表

获取其中一个下拉列表

并为其绑定onchange事件

并获取其选中的值：var optionVal = select.value;

然后根据选中的值，重新设置另一个下拉列表的innerHTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<select id="province">
			<option value="sc">四川</option>
			<option value="hn">湖南</option>
			<option value="hb">湖北</option>
		</select>省
		<select id="city">
			<option>成都</option>
			<option>绵阳</option>
			<option>雅安</option>
			<option>乐山</option>
			<option>攀枝花</option>
		</select>市
		
		<script type="text/javascript">
			
			//给省份绑定改变事件
			province.onchange = function(){
				if(this.value == "sc"){
					city.innerHTML = "<option>成都</option><option>绵阳</option><option>雅安</option><option>乐山</option><option>攀枝花</option>";
				}else if(this.value == "hn"){
					city.innerHTML = "<option>长沙</option><option>永州</option><option>娄底</option><option>益阳</option><option>张家界</option>";
				}else if(this.value == "hb"){
					city.innerHTML = "<option>武汉</option><option>黄冈</option><option>仙桃</option><option>咸宁</option><option>孝感</option>";
				}
			}
			
		</script>
	</body>
</html>

运行：
二级联动案例

案例优化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<select id="province">
			<option value="sc">四川</option>
			<option value="hn">湖南</option>
			<option value="hb">湖北</option>
		</select>省
		<select id="city">
			<option>成都</option>
			<option>绵阳</option>
			<option>雅安</option>
			<option>乐山</option>
			<option>攀枝花</option>
		</select>市
		
		<script type="text/javascript">
			
			//给省份绑定改变事件
			province.onchange = function(){
				if(this.value == "sc"){
					updateCity(["成都","绵阳","雅安","乐山","攀枝花"]);
				}else if(this.value == "hn"){
					updateCity(["长沙","永州","娄底","益阳","张家界"]);
				}else if(this.value == "hb"){
					updateCity(["武汉","黄冈","仙桃","咸宁","孝感"]);
				}
			}
			
			function updateCity(arr){
				//清空city列表
				city.length = 0;
				
				for(var i = 0;i<arr.length;i++){
					var option = document.createElement("option");
					option.innerText = arr[i];
					city.appendChild(option);
				}
				
				
			}
			
		</script>
	</body>
</html>

提交案例–表单验证

用户名不能为空

密码和确认密码是否一致

表单项不符合条件不能提交表单

表单的提交事件—onsubmit

通过返回值判断是否提交，再设置条件，还进行提示优化，调用函数注意返回值【onsubmit】

方式1：有id

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			span{
				color: red;
			}
		</style>
	</head>
	<body>
		
		<form id="registerForm" action="#" method="post">
			账户：<input type="text" id="username" /><span></span><br />
			密码：<input type="password" id="password" /><span></span><br />
			确认密码：<input type="password" id="repassword" /><span></span><br />
			
			<input type="submit" value="提交" />
			
		</form>
		
		<script type="text/javascript">
			
			var span01 = document.getElementsByTagName("span")[0];
			var span02 = document.getElementsByTagName("span")[1];
			var span03 = document.getElementsByTagName("span")[2];
			
			//给表单绑定提交事件
			registerForm.onsubmit = function(){
				
				span01.innerText = "";
				span02.innerText = "";
				span03.innerText = "";
				
				var bool = true;
				
				if(username.value.trim() == ""){
					span01.innerText = "账号不能为空";
					bool = false;
				}
				
				if(password.value.trim() == ""){
					span02.innerText = "密码不能为空";
					bool = false;
				}
				
				if(repassword.value.trim() == ""){
					span03.innerText = "确认密码不能为空";
					bool = false;
				}else if(repassword.value.trim() != password.value.trim()){
					span03.innerText = "确认密码与密码不一致";
					bool = false;
				}
				
				return bool;
			}
			
		</script>
		
	</body>
</html>

运行：
提交案例

方式2：无id，直接是函数

注意：οnsubmit=“return fun01()”，要写return，因为返回值要返回给事件，不然会出现直接就可以提交的问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			span{
				color: red;
			}
		</style>
	</head>
	<body>
		
		<form action="#" method="post" onsubmit="return fun01()">
			账户：<input type="text" id="username" /><span></span><br />
			密码：<input type="password" id="password" /><span></span><br />
			确认密码：<input type="password" id="repassword" /><span></span><br />
			
			<input type="submit" value="提交" />
			
		</form>
		
		<script type="text/javascript">
			
			var span01 = document.getElementsByTagName("span")[0];
			var span02 = document.getElementsByTagName("span")[1];
			var span03 = document.getElementsByTagName("span")[2];
			
			function fun01(){
				
				span01.innerText = "";
				span02.innerText = "";
				span03.innerText = "";
				
				var bool = true;
				
				if(username.value.trim() == ""){
					span01.innerText = "账号不能为空";
					bool = false;
				}
				
				if(password.value.trim() == ""){
					span02.innerText = "密码不能为空";
					bool = false;
				}
				
				if(repassword.value.trim() == ""){
					span03.innerText = "确认密码不能为空";
					bool = false;
				}else if(repassword.value.trim() != password.value.trim()){
					span03.innerText = "确认密码与密码不一致";
					bool = false;
				}
				
				return bool;
			}
			
		</script>
		
	</body>
</html>