首页 > 编程语言 >DOM【事件、操作节点、DOM案例】--学习JavaEE的day49

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

时间：2024-05-24 18:28:20浏览次数：13  
标签：function obj 鼠标 img DOM -- JavaEE value var

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 按下鼠标时触发
onm ouseOver 鼠标经过时触发
onm ouseUp 按下鼠标松开鼠标时触发
onm ouseOut 鼠标移出时触发
onm ouseMove 鼠标移动时触

<!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" onm ouseover="myOver(this)" onm ouseout="myOut(this)"/>
		<img src="../../img/星空一花.jpg" onm ouseover="myOver(this)" onm ouseout="myOut(this)"/>
		<img src="../../img/樱井步.jpg" onm ouseover="myOver(this)" onm ouseout="myOut(this)"/>
		<img src="../../img/tx1.jpg" onm ouseover="myOver(this)" onm ouseout="myOut(this)"/>
		<img src="../../img/tx2.jpg" onm ouseover="myOver(this)" onm ouseout="myOut(this)"/>
		<img src="../../img/tx3.jpg" onm ouseover="myOver(this)" onm ouseout="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>

小结

DOM:事件、操作节点、DOM案例

标签：function,obj,鼠标,img,DOM,--,JavaEE,value,var
From： https://blog.csdn.net/gangain/article/details/139180316

相关文章

  • Java面试进阶指南：高级知识点问答精粹（二）
    Java面试问题及答案1.什么是Java内存模型（JMM）？它在并发编程中扮演什么角色？答案：Java内存模型（JMM）是一个抽象的模型，它定义了Java程序中各种变量（线程共享变量）的访问规则，以及在并发环境下这些变量如何被不同线程所看到。JMM规定了主内存和工作内存的概念，以及它们之间的交互规......
  • Java面试进阶指南：高级知识点问答精粹（一）
    Java面试问题及答案1.什么是Java中的集合框架？它包含哪些主要接口？答案：Java集合框架是一个设计用来存储和操作大量数据的统一的架构。它提供了一套标准的接口和类，使得我们可以以一种统一的方式来处理数据集合。集合框架主要包含以下接口：Collection：最基本的集合接口，它是......
  • Java高级面试精粹：问题与解答集锦（二）
    Java面试问题及答案1.什么是Java内存模型（JMM）？它的作用是什么？答案：Java内存模型（JMM）定义了Java虚拟机（JVM）在计算机内存中的工作方式，包括程序计数器、Java堆、方法区、栈和本地方法栈等。JMM的主要作用是为编写线程安全的程序提供规范，确保在多线程环境下，不同线程对共享变量的......
  • JVM面试指南：掌握这10个问题，大厂Offer轻松拿
    引言:    随着科技巨头不断寻求具备深厚技术功底的开发人才，准备好应对他们的面试变得非常关键。Java虚拟机（JVM）是Java平台的核心组成之一，深入理解JVM的工作原理、性能优化和垃圾回收机制，对于每一个希望在顶尖科技公司站稳脚跟的Java开发者来说，是必不可少的。今......
  • 揭秘Java LinkedList：深度剖析、实战应用与设计灵感
    1.概述Java的LinkedList是java.util包下的一个类，它实现了List接口，并且提供了基于双向链表的数据结构。这意味着LinkedList中的元素可以按照它们的插入顺序进行有序的集合。由于其双向链表的特性，LinkedList在插入、删除元素时具有优秀的性能表现，而在访问元素时则相对较慢（尤......
  • Java高级面试精粹：问题与解答集锦（一）
    Java面试问题及答案1.什么是Java中的多态，它是如何实现的？答案：多态是Java中的一个核心概念，它允许不同类的对象对同一消息做出响应，但具体的行为会根据对象的实际类型而有所不同。多态主要通过以下两种方式实现：重载（Overloading）：当多个方法具有相同的名称，但参数列表不同时，......
  • MySQL查询某个字段含有字母数字的值
    1.正则表达式（REGEXP）查询MySQL表中某个字段含有字母和数字的值，可以使用正则表达式（REGEXP）来匹配这样的模式。在MySQL中，正则表达式是一个强大的工具，可以用来搜索和匹配字符串中的特定模式。假设我们有一个名为my_table的表，并且我们想要查询名为my_column的字段，这个字段包含至少......
  • 算力动态实时发，了解更多算力信息关注我哦
    北京市发布了《北京市算力基础设施建设实施方案（2024—2027年）》，该方案规划了智算资源供给集群化、智算设施建设自主化、智算能力赋能精准化、智算中心运营绿色化和智算生态发展体系化等目标。同时，还提出了推进算力产业自主创新、构建高效算力供给体系、推动京津冀蒙算力一体化建......
  • 微服务：构建Spring Boot与Dubbo集成：以Nacos为注册中心
    一、前言  Dubbo是阿里巴巴公司开源的一个高性能、轻量级的JavaRPC框架，用于构建分布式服务架构。Dubbo提供了三大核心能力：面向接口的远程方法调用、智能容错和负载均衡，以及服务自动注册和发现。二、Dubbo的特点  面向接口代理的高性能RPC调用：提供高性能的基于代理的......
  • Star CCM+分配零部件至区域后交界面丢失-更新找回
    前言在工程应用中，将零部件分配至区域后，一般常规的操作需要对交界面进行检查。偶尔会发现交界面丢失。遇到此类问题，在没有做其他操作前（比如画网格），可以选择先删除所有区域在重新分配至区域。若已经进行了一下操作，在采用此类方法就不经济了。本文将介绍一种方法对交界面进行更新......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99