Day23 WEB-DHTML复习

最新推荐文章于 2021-12-14 00:04:59 发布

摆渡D人

最新推荐文章于 2021-12-14 00:04:59 发布

阅读量288

点赞数

本文链接：https://blog.csdn.net/qq_41131048/article/details/98725068

版权

个人复习

四、DHTML

四、DHTML

注意input框中的checked=“不管写什么都是被选中的”

1.概述

DHTML：Dynamic HTML 动态的HTML，将HTML、CSS、JavaScript整合在一起，利用JS操作页面元素, 让元素具有动态的变化, 使得页面和用户具有交互的行为.
BOM、DOM

2.windows常用属性和方法

定时器

按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval(code,millisec)；
code 必需。要调用的函数或要执行的代码串。
millisec 必需。周期性执行或调用 code 之间的时间间隔，以毫秒计。
定时器本身就是死循环，而for循环一般情况执行很快，很难把for和定时器结合起来，一般用数组或集合

页面前进后退刷新

在这里插入图片描述

DOM

DOM （文档对象模型）使我们有能力访问一个文档中的每个元素

获取节点

1.document.getElementById();需要id属性，一般id唯一，用来特殊标识
2.document.getElementsByName();需要name属性，返回数组，name可以相同，用于多选
3.document.getElementsByTagName();标签名，返回数组
4.document.getElementsByClassName();类名
5.document.querySelector();css选择符模式，返回与该模式匹配的第一个元素，结果为一个元素；如果没找到匹配的元素，则返回null
6.document.querySelectorAll()css选择符模式，返回与该模式匹配的所有元素，结果为一个类数组
children获取的也是数组

设置节点内容

节点.innerHTML="";可用于清空

改变状态

disabled="true/false";//true 灰色不可用
常用于根据是否选中改变按钮状态

改变样式

1.通过style改变样式

div.style.backgroundColor="red";

2.通过添加类名添加样式

div.className="div1";

3.通过setAttribute设置属性添加样式

div.setAttribute("class","div1");

注意：元素.style.属性 = xxx,是修改行间样式，style的优先级要比className要高

如例：先变绿再变红是可以的，但是先变红再变绿因为className优先级没有style高所以无法变绿

<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
	div{
		width:100px;
		height:100px;
	}
	.div1{
		background-color:green;
		}
</style>
<script type="text/javascript">
	function fun(){
		var divNode=document.getElementsByTagName("div")[0];
		divNode.style.backgroundColor="red";
	}
	function fun1(){
		var divNode=document.getElementsByTagName("div")[0];
		divNode.className="div1";
	}
	function fun2(){
		var divNode=document.getElementsByTagName("div")[0];
		divNode.setAttribute("class","div1");
	}
</script>
<title>Insert title here</title>
</head>
<body>
<div></div>
	<input type="button" onclick="fun();">
	<input type="button" onclick="fun1();">
	<input type="button" onclick="fun2();">
</body>
</html>

获取兄弟节点

previousElementSibling//获取上一个兄弟节点
nextElementSibling//获取下一个兄弟节点

省市联动
<head>
<meta charset="UTF-8">
<script type="text/javascript">
	function showProvince(){
		var parray=["河北省","河南省","山西省"];
		var pNode=document.getElementById("province");
		var defaultOption=new Option("请选择省","");
		pNode.appendChild(defaultOption);
		for(var i=0;i<parray.length;i++){
			var op=new Option(parray[i],i);
			pNode.appendChild(op);
		}
	}
	function showCity(){
		var a=document.getElementById("province").value;
		var parray=["太原市","孝义市","长治市"];
		var pNode=document.getElementById("city");
		pNode.length=1; 将子节点的长度设为1，防止重复添加
		if(a=="2"){
		for(var i=0;i<parray.length;i++){
			var op=new Option(parray[i],i);
			pNode.appendChild(op);
		}
		}
	}
</script>
<title>Insert title here</title>
</head>
<body onload="showProvince();showCity();">
省份：
<select name="province" id="province" onchange="showCity()">
</select>
城市
<select name="city" id="city">
<option>
---请选择市---
</option>
</select>
</body>

联动菜单
<html>
<head>
<script type="text/javascript" src="js/js.js">
</script>
<link rel="stylesheet" type="text/css" href="css/js.css">
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div id="div1">
	<ul>
		<li>
			<div class="div2">
				<a href="#" onclick="fun(this)">我的订单</a>
			</div>
			<div class="div3">
				<a href="#">全部订单</a><br>
				<a href="#">待付款</a><br>
				<a href="#">待评价</a><br>
				<a href="#">待收货</a>
			</div>
		</li>
		<li>
			<div class="div2">
				<a href="#" onclick="fun(this)">账号管理</a>
			</div>
			<div class="div3">
				<a href="#">1</a>
			</div>
			<div class="div3">
				<a href="#">2</a>
			</div>
			<div class="div3">
				<a href="#">3</a>
			</div>
		</li>
		<li>
			<div class="div2">
				<a href="#" onclick="fun(this)">收货管理</a>
			</div>
			<div class="div3">
				<a href="#">地址管理</a>
			</div>
		</li>
	</ul>
	</div>
</body>
</html>
js.js
function fun(obj){
	if(obj.parentNode.nextElementSibling.style.display=="block"){
		obj.parentNode.nextElementSibling.style.display="none";
	}else{
	//当点击某个链接时，其他都隐藏，当前的div显示
	hiddenFun();
	//获取当前的div3
	obj.parentNode.nextElementSibling.style.display="block";
}
}
function hiddenFun(){
	var divNode=document.getElementsByClassName("div3");
	for(var i=0;i<divNode.length;i++){
		divNode[i].style.display="none";
	}
}
js.css
*{
	margin:0px;
	padding:0px;
}
ul li{
	list-style: none;
}
a{
	text-decoration: none;
	
}
#div1{
	margin-left:50px;
	margin-top:50px; 
}
.div2 a{
	color:#ffffff;
}
.div2{
	width:90px;
	background-color: rgb(10,161,237);
	text-align: center;
	
}
.div3{
	padding-left:20px;
	margin:10px 0 10px;
	
}
.div3 a{
	color:#808080;
	font-size: 12px;

}