Bootstrap

【前端】JavaScript入门及实战106-110

文章目录

106 a的索引问题

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">	
	<script type="text/javascript">	
		window.onload = function(){
			/*
				点击超链接以后，删除一个员工的信息			
			*/
			// 获取所有超链接
			var allA = document.getElementsByTagName("a");
			
			// 为每个超链接绑定一个单击响应函数
			for(var i = 0; i < allA.length; i++){
				/*
					for循环会在页面加载完成之后立即执行，
					而响应函数会在超链接被点击时才执行，
					当响应函数执行时，for循环早已执行完毕
				*/
				
				alert("for循环正在执行" + i);
				allA[i].onclick = function(){
					alert("响应函数正在执行" + i); // i = 3
					console.log(allA[i] == this); // false
					//alert(allA[i]);
					return false;			
				};
			}
		};				
	</script>	
</head>
<body>
	<table id="employeeTable">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>[email protected]</td>
			<td>5000</td>
			<td><a href="javascript:;">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>[email protected]</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>[email protected]</td>
			<td>10000</td>
			<td><a href="deleteEmp?id=003">Delete</a></td>
		</tr>
	</table>

	<div id="formDiv">
	
		<h4>添加新员工</h4>
		<table>
			<tr>
				<td class="word">name: </td>
				<td class="inp">
					<input type="text" name="empName" id="empName" />
				</td>
			</tr>
			<tr>
				<td class="word">email: </td>
				<td class="inp">
					<input type="text" name="email" id="email" />
				</td>
			</tr>
			<tr>
				<td class="word">salary: </td>
				<td class="inp">
					<input type="text" name="salary" id="salary" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" value="abc">
						Submit
					</button>
				</td>
			</tr>
		</table>
	</div>
</body>
</html>

107 使用DOM操作CSS

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">	
	<style type="text/css">
		#box1 {
			width: 200px;
			height: 200px;
			background-color: red;
			<!--background-color: red !important;-->
		}
	</style>
	<script type="text/javascript">	
		window.onload = function(){
			/*
				点击按钮之后，修改box1的大小
			*/
			// 获取box1
			var box1 = document.getElementById("box1");
			//为按钮绑定单击响应函数
			var btn01 = document.getElementById("btn01");
			btn01.onclick = function(){
				/*
					通过JS修改元素的样式
					语法：元素.style.样式名 = 样式值
					
					注意：如果CSS样式中含有-，不合法，如background-color
						  需要将这种样式名修改为驼峰命名法，
						  去掉-，然后将-后的字母大写
						  border-top-width：borderTopWidth
						  
					通过style属性设置的样式都是内联样式，
					而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示，
					但是如果在样式中写了!important，则此时样式会有最高的优先级，
					即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，
					所以尽量不要为样式添加!important
				*/
				box1.style.width = "300px";
				box1.style.height = "300px";
				box1.style.backgroundColor = "yellow";				
			};
			
			// 点击按钮2以后，读取元素的样式
			var btn02 = document.getElementById("btn02");
			btn02.onclick = function(){
				// 读取box1的样式
				/*
					语法：元素.style.样式名
					
					通过style属性读取和设置的都是内联样式，
					无法读取样式表中的样式
				*/
				alert(box1.style.width);
			};
		};
	</script>	
</head>
<body>
	<button id="btn01">点一下1</button>
	<button id="btn02">点一下2</button>
	<div id="box1"></div>
</body>
</html>

108 读取元素当前的样式

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">	
	<style type="text/css">
		#box1 {
			width: 100px;
			height: 100px;
			background-color: yellow;
		}
	</style>
	<script type="text/javascript">	
		window.onload = function(){
			/*
				点击按钮之后，读取box1的样式
			*/
			// 获取box1
			var box1 = document.getElementById("box1");
			//为按钮绑定单击响应函数
			var btn01 = document.getElementById("btn01");
			btn01.onclick = function(){
				/*
					获取元素的当前显示的样式
					语法：元素.currentStyle.样式名
					它可以用来读取当前元素正在显示的样式
					谁生效获取谁
					如果当前元素没有设置该样式，则获取默认值
					
					currentStyle只有IE浏览器支持，其他浏览器都不支持
				*/
				
				//box1.currentStyle.width = "200px"; // 错误
				alert(box1.currentStyle.width);
				
				/*
					在其他浏览器中可以使用
					getComputedStyle()这个方法来获取元素当前的样式
					这个方法是window的方法，可以直接使用
					需要两个参数：1. 要获取样式的元素
								  2. 可以传递一个伪元素，一般都传null
					
					该方法会返回一个对象，对象中封装了当前元素对应的样式
					可以通过对象.样式名来读取样式，
					如果获取的样式没有设置，则会获取到真实的值，而不是默认值
					比如：没有设置width，他不会获取到auto，而是一个长度
					
					但是该方法不支持IE8及以下浏览器
					
					通过currentStyle和getComputedStyle()读取到的样式都是只读的，
					不能修改，如果要修改必须通过style属性
				*/
				//var obj = getComputedStyle(box1, null);
				//alert(obj.width);
				//alert(getComputedStyle(box1, null).backgroundColor); // 正常浏览器
				//alert(box1.currentStyle.backgroundColor); // IE8的方式
				
				alert(getStyle(box1, "width"));
			};
		};
		
		/*
			定义一个函数，用来获取指定元素的当前的样式
			
			参数：1. obj 要获取的元素
				  2. name 要获取的样式名
		*/
		function getStyle(obj, name){
			// 正常浏览器的方式
			//return getComputedStyle(obj, null)[name]; // 元素.style["属性"]
			
			// IE8的方式
			//return obj.currentStyle[name];
			//???
		}
	</script>	
</head>
<body>
	<button id="btn01">点一下</button>
	<div id="box1" style="width: 200px; background-color: red;"></div>
</body>
</html>

109 getStyle()

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">	
	<style type="text/css">
		#box1 {
			width: 100px;
			height: 100px;
			background-color: yellow;
		}
	</style>
	<script type="text/javascript">	
		window.onload = function(){
			var box1 = document.getElementById("box1");
			var btn01 = document.getElementById("btn01");
			btn01.onclick = function(){
				var v = getStyle(box1, "width");
				alert(v);
			};
		};
		
		/*
			定义一个函数，用来获取指定元素的当前的样式
			
			参数：1. obj 要获取的元素
				  2. name 要获取的样式名
		*/
		function getStyle(obj, name){	
			// 变量没找到就报错，属性没找到是undefined
			if(window.getComputedStyle){
				// 正常浏览器的方式，具有getComputedStyle()方法
				return getComputedStyle(obj, null)[name];
			}else{
				// IE8的方式，没有getComputedStyle()方法
				return obj.currentStyle[name];
			}		
			//return window.getComputedStyle? getComputedStyle(obj, null)[name]: obj.currentStyle[name];
			
			/*
			if(obj.currentStyle){
				// 正常浏览器的方式，具有getComputedStyle()方法
				return obj.currentStyle[name];
			}else{
				// IE8的方式，没有getComputedStyle()方法
				return getComputedStyle(obj, null)[name];
			}
			*/		
		}
	</script>	
</head>
<body>
	<button id="btn01">点一下</button>
	<div id="box1" style="width: 200px; background-color: red;"></div>
</body>
</html>

110 其他样式操作的属性

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">	
	<style type="text/css">
		#box1 {
			width: 100px;
			height: 100px;
			background-color: red;
			padding: 10px;
			border: 10px solid yellow;
		}
		
		# box2 {
			padding: 100px;
			background-color: #bfa;
		}
		
		# box4 {
			width: 200px;
			height: 300px;
			background-color: #bfa;
			overflow: auto;
		}
		
		# box5 {
			width: 150px;
			height: 600px;
			background-color: yellow;
		}

	</style>
	<script type="text/javascript">	
		window.onload = function(){
			var box1 = document.getElementById("box1");
			var btn01 = document.getElementById("btn01");
			var box4 = document.getElementById("box4");
			btn01.onclick = function(){
				/*
					clientWidth
					clientHeight
					这两个属性可以获取元素的可见宽度和高度，
					这些属性都是不带px的，返回都是一个数字，可以直接进行计算，
					会获取元素的宽度和高度，包括内容区和内边距，					
					这些属性都是只读的，不能修改
				*/
				alert(box1.clientWidth);
				alert(box1.clientHeight);
				//box1.clientHeight = 300; // 无用
				
				/*
					offsetWidth
					offsetHeight
					获取元素的整个高度和宽度，包括内容区，内边距和边框
				*/
				alert(box1.offsetWidth);
				
				/*
					offsetParent
					可以用来获取当前元素和定位父元素
					会获取到离当前元素最近的开启了定位的祖先元素，
					如果所有的祖先元素都没有开启定位，则返回body
				*/
				var op = box1.offsetParent;
				alert(op.id); // box2
				
				/*
					offsetLeft
					当前元素相对于其定位父元素的水平偏移量
					offsetTop
					当前元素相对于其定位父元素的垂直偏移量
				*/
				alert(box1.offsetLeft); // 100
				
				/*
					scrollWeight
					scrollHeight
					可以获取元素整个滚动区域的宽度和高度
				*/
				//alert(box4.clientHeight); // 300
				alert(box4.scrollHeight); // 600
				
				/*
					scrollLeft：可以获取水平滚动条滚动的距离
					scrollTop：可以获取垂直滚动条滚动的距离
				*/
				alert(box4.scrollLeft);
				alert(box4.scrollTop);
				//alert(box4.clientHeight); // 283
				alert(box4.scrollHeight); // 600
				
				//当满足scrollHeight - scrollTop = clientHeight时，说明垂直滚动条滚动到底了
				alert(box4.scrollHeight - box4.scrollTop); // 滚动条到底部：283
				
				//当满足scrollWidth - scrollLeft = clientWidth时，说明水平滚动条滚动到底了
				alert(box4.scrollHeight - box4.scrollTop); 
				
			};
		};
	</script>	
</head>
<body>
	<button id="btn01">点一下</button>
	<br>
	<div id="box4">
		<div id="box5"></div>
	</div>
	<br>
	<div id="box3" style="position: relative;">
		<div id="box2" style="position: relative;">
			<div id="box1"></div>
		</div>
	</div>
</body>
</html>

滚动条练习

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">	
	<style type="text/css">
		#info {
			width: 300px;
			height: 500px;
			background-color: #bfa;
			overflow: auto;
		}
	</style>
	<script type="text/javascript">	
		window.onload = function(){
			/*
				当垂直滚动条到底时，表单项可用
				onscroll：该事件会在元素的滚动条滚动时触发
			*/
			var info = document.getElementById("info");
			var inputs = document.getElementsByTagName("input");
			info.onscroll = function(){
				// 检查垂直滚动条是否滚动到底
				if(info.scrollHeight - info.scrollTop == info.clientHeight){
					//滚动条滚动到底，使表单项可用
					/*
						disabled属性可以设置一个元素是否禁用
						true是禁用，false是不禁用
					*/
					inputs[0].disabled = false;
					inputs[1].disabled = false;
				}
			};
		};
	</script>	
</head>
<body>
	<h3>欢迎亲爱的用户注册</h3>
	<p id="info">
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议，
		请阅读以下协议
	</p>
	<!--
		如果为表单添加disabled="disabled"则表项将变为不可用的状态
	-->
	<input type="checkbox" disabled="disabled" />我已仔细阅读协议，一定遵守
	<input type="submit" value="注册" disabled="disabled" />
</body>
</html>

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
dubbo服务调用失败_Dubbo 常见错误及解决方法-阿里云开发者社区
spring boot 多数据源_基于 Spring 和 iBATIS 的动态可更新多数据源持久层
Java Web 网络商城案例演示十一（商品分页）
复习辗转相除法求最大公约数
图像分割——U-Net论文介绍+代码（PyTorch）
iptables防火墙配置
idea工具左侧树状结构不展示
CSS（十四）——CSS对齐和组合选择符
使用form表单的action提交并接收后端返回的消息
短租数据分析
;