JavaWeb---Day 05

小麦穗呀

已于 2023-05-05 18:32:02 修改

阅读量80

点赞数

分类专栏： JavaWeb 文章标签：前端 html css javascript

于 2023-05-04 20:11:53 首次发布

本文链接：https://blog.csdn.net/qq_49544301/article/details/130493897

版权

JavaWeb 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、js事件

事件源：当前所操作的元素（标签 )

事件：事件的状态

事件处理函数：监听到触发事件之后的操作

案例：

1.添加事件，方式一实现点击按钮后弹框

2.添加事件，方式二实现双击按钮后弹框

3.添加事件，方式三实现鼠标移入 div 标签后在页面实现鼠标移入，移出 div 标签后在页面显示鼠标移出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js事件</title>
	</head>
	<body>
		<!-- 按钮1 -->
		<input type="submit" onclick="dianji()" value="点击1"/>
		<!-- 按钮2 -->
		<button id="btn1">点击2</button>
		<!-- 按钮3 -->
		<div id="div1" style="width: 100px;height: 100px;background-color: #00FFFF;">div标签</div>
		<span id="sp"></span>
	</body>
</html>
<script type="text/javascript">
	//方式一
	function dianji(){
		alert("点击弹窗");
	}
	//方式二
	var btn1 = document.getElementById("btn1");
	btn1.ondblclick = function(){
		alert("双击弹窗");
	}
	//方式三
	var div1 = document.getElementById("div1");
	var move = document.getElementById("move");
	var out = document.getElementById("out");
	div1.addEventListener('mousemove',function(){
		sp.innerHTML="鼠标移入div";
	})
	div1.addEventListener('mouseout',function(){
		sp.innerHTML="鼠标移出div";
	})
</script>

（一）常见的事件

事件	描述
onclick	点击事件
ondblclick	双击事件
onmouseover	鼠标移入
onmouseout	鼠标移出
onfocus	获取焦点
onblur	失去焦点

（二）事件的应用

案例：

1.在页面 A 输入用户名，跳转至页面 B 显示所输入的内容

2.找到一张图片，鼠标移入，图片变大，鼠标移出，回归原大小

3.判断两次输入的是否一致

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js应用</title>
		<form action="../htmlDemo02/succeed.html" method="get">
			<input name="username" type="text" placeholder="请输入用户名"/>
			<input type="submit" value="登录"/><br />
			<input id="p1" type="text" placeholder="请输入密码"/><br />
			<input id="p2" type="text" placeholder="请再次输入密码"/>
			<span id="sp"></span>
		</form>
		<img id="i1" src="../img/right.png" />
	</body>
	</head>
	<body>
</html>
<script type="text/javascript">
	var i1 = document.getElementById("i1");
	i1.onmouseover = function(){
		i1.style.width="100px";
	}
	i1.onmouseout = function(){
		i1.style.width="37px";
	}	

	var p1 = document.getElementById("p1");
	var p2 = document.getElementById("p2");
	var sp = document.getElementById("sp");
	p2.addEventListener('blur',function(){
		if(p1.value == p2.value){
			sp.innerHTML="两次密码一致";
			sp.style.color="red";
		}else{
			sp.innerHTML="两次密码不一致";
			sp.style.color="red";
		}
	})
</script>

二、DOM编程

DOM（ Document Object Model): 文档对象模型

（一）DOM节点的分类

1.整个文档为文档节点

2.所有的标签为元素节点

3.所有的属性为属性节点

4.所有的文本内容为文本节点

5.所有的注释为注释节点

使用dom 就是为了：

1.获取节点

2.更新节点

3.删除节点

4.添加节点

（二）获取节点

1.通过 id获取节点：getElementBYId()

2.通过标签获取节点，获取的是数组：getElementsByTagName()

3. 通过 class 获取节点，获取的是数组： getElementsByClassName()

4. 通过父标签获取节点，获取的是数组： getElementById()、 children

5.通过同胞获取节点： getElementById("sp1") 、 nextElementSibling 、 previousElementSibling

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取节点</title>
	</head>
	<body>
		<span>111</span>
		<span>222</span>
		<span>333</span>
		<div id="div1">hhhhhh</div>
		<div class="div2">111</div>
		<div class="div2">222</div>
		<div class="div2">333</div>
		<div id="div3">
			ddd
			<p>000</p>
			<p>888</p>
			<span id="sp1">
				111
				<p>kkk</p>
			</span>
			<span>222</span>
			<span>333</span>
		</div>
	</body>
</html>
<script type="text/javascript">
	// 通过标签获取节点，获取的是数组
	var tags = document.getElementsByTagName("span");
	console.log(tags);
	// 通过id获取节点
	var div1 = document.getElementById("div1");
	console.log(div1);
	// 通过class获取节点，获取的是数组
	var cla = document.getElementsByClassName("div2");
	console.log(cla);
	// 通过父标签获取节点，获取的是数组
	var div3 = document.getElementById("div3");
	var childs = div3.children;
	console.log(childs);
	// 通过同胞获取节点
	var sp1 = document.getElementById("sp1");
	var next = sp1.nextElementSibling;
	console.log(next);
	var previous = sp1.previousElementSibling;
	console.log(previous);
</script>

（三）更新节点

1.更新样式属性：

节点.style.属性名=属性值

2. 更新文本节点

节点.innerHTML=""
节点.innerText=""

3. 更新属性节点

节点.setAttribute("属性名","属性值")

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>更新</title>
		<style type="text/css">
			.div2{
				width: 100px;
				height: 100px;
				background-color: #A9A9A9;
				color: #228B22;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div id="div1">111</div>
		<span id="sp1"></span>
	</body>
</html>
<script type="text/javascript">
	// 更新样式属性
	div1.style.color="blue";
	div1.style.fontSize="20px";
	// 更新文本节点
	sp1.innerHTML="<a href='../htmlDemo/chensen.html' target='_blank'>陈森</a>";
	// sp1.innerText="<a href='#'>陈森</a>";
	// 更新属性节点
	div1.setAttribute("class","div2");
</script>

（四）删除节点

1.通过父节点删除子节点

2.删除节点本身

（五）添加节点

1.添加元素节点

createElement(标签名)

2. 添加文本节点

createTextNode(文本内容)

案例：

1. 通过删除节点和添加节点，实现在输入框获取焦点后，显示提示文字已获取焦点，在输入框失去焦点后，显示提示文字已失去焦点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>删除、添加节点</title>
	</head>
	<body>
		<div id="div1">
			<input id="t1" type="text"/>
		</div>
	</body>
</html>
<script type="text/javascript">
	var t1 = document.getElementById("t1");
	var div1 = document.getElementById("div1");
	// 添加元素节点
	var sp = document.createElement("span");
	div1.appendChild(sp);
	t1.onfocus = function(){
		sp.innerHTML="已获取焦点";
	}
	t1.onblur = function(){
		sp.innerHTML="已失去焦点";
	}
</script>

案例： 实现全选和全不选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全选全不选</title>
	</head>
	<body>
		全选\全不选<input type="checkbox" id="checkAll"/><br />
		<input type="checkbox" name="student"/>小森<br />
		<input type="checkbox" name="student"/>啊森<br />
		<input type="checkbox" name="student"/>陈森<br />
	</body>
</html>
<script type="text/javascript">
	var checkAll = document.getElementById("checkAll");
	var stu = document.getElementsByName("student");
	checkAll.onclick = function(){
		for(i=0;i<stu.length;i++){
			stu[i].checked=checkAll.checked;
		}
	}
</script>