js学习 dom学习（二）

最新推荐文章于 2024-10-07 17:02:56 发布

时光不老 ζ

最新推荐文章于 2024-10-07 17:02:56 发布

阅读量142

点赞数

分类专栏： js学习

本文链接：https://blog.csdn.net/qq_49934059/article/details/108245537

版权

js学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

01练习一

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>添加删除记录练习</title>
		<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
		<script type="text/javascript">
		
			/*
			 * 删除tr的响应函数
			 */
			function delA() {

				//点击超链接以后需要删除超链接所在的那行
				//这里我们点击那个超链接this就是谁
				//获取当前tr
				var tr = this.parentNode.parentNode;

				//获取要删除的员工的名字
				//var name = tr.getElementsByTagName("td")[0].innerHTML;
				var name = tr.children[0].innerHTML;

				//删除之前弹出一个提示框
				/*
				 * confirm()用于弹出一个带有确认和取消按钮的提示框
				 * 	需要一个字符串作为参数，该字符串将会作为提示文字显示出来
				 * 如果用户点击确认则会返回true，如果点击取消则返回false
				 */
				var flag = confirm("确认删除" + name + "吗?");

				//如果用户点击确认
				if(flag) {
					//删除tr
					tr.parentNode.removeChild(tr);
				}

				/*
				 * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
				 * 	但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
				 */
				return false;
			};

			window.onload = function() {

				/*
				 * 点击超链接以后，删除一个员工的信息
				 */

				//获取所有额超链接
				var allA = document.getElementsByTagName("a");

				//为每个超链接都绑定一个单击响应函数
				for(var i = 0; i < allA.length; i++) {
					allA[i].onclick = delA;
				}

				/*
				 * 添加员工的功能
				 * 	- 点击按钮以后，将员工的信息添加到表格中
				 */

				//为提交按钮绑定一个单击响应函数
				var addEmpButton = document.getElementById("addEmpButton");
				addEmpButton.onclick = function() {

					//获取用户添加的员工信息
					//获取员工的名字
					var name = document.getElementById("empName").value;
					//获取员工的email和salary
					var email = document.getElementById("email").value;
					var salary = document.getElementById("salary").value;

					//alert(name+","+email+","+salary);
					/*
					 *  <tr>
							<td>Tom</td>
							<td>tom@tom.com</td>
							<td>5000</td>
							<td><a href="javascript:;">Delete</a></td>
						</tr>
						需要将获取到的信息保存到tr中
					 */

					//创建一个tr
					var tr = document.createElement("tr");

					//创建四个td
					var nameTd = document.createElement("td");
					var emailTd = document.createElement("td");
					var salaryTd = document.createElement("td");
					var aTd = document.createElement("td");

					//创建一个a元素
					var a = document.createElement("a");

					//创建文本节点
					var nameText = document.createTextNode(name);
					var emailText = document.createTextNode(email);
					var salaryText = document.createTextNode(salary);
					var delText = document.createTextNode("Delete");

					//将文本条件到td中
					nameTd.appendChild(nameText);
					emailTd.appendChild(emailText);
					salaryTd.appendChild(salaryText);

					//向a中添加文本
					a.appendChild(delText);
					//将a添加到td中
					aTd.appendChild(a);

					//将td添加到tr中
					tr.appendChild(nameTd);
					tr.appendChild(emailTd);
					tr.appendChild(salaryTd);
					tr.appendChild(aTd);

					//向a中添加href属性
					a.href = "javascript:;";

					//为新添加的a再绑定一次单击响应函数
					a.onclick = delA;

					//获取table
					var employeeTable = document.getElementById("employeeTable");
					//获取employeeTable中的tbody
					var tbody = employeeTable.getElementsByTagName("tbody")[0];
					//将tr添加到tbodye中
					tbody.appendChild(tr);

				};

			};
		</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>tom@tom.com</td>
				<td>5000</td>
				<td>
					<a href="javascript:;">Delete</a>
				</td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>jerry@sohu.com</td>
				<td>8000</td>
				<td>
					<a href="deleteEmp?id=002">Delete</a>
				</td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>bob@tom.com</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">
						Submit
					</button>
					</td>
				</tr>
			</table>

		</div>

	</body>

</html>

02练习二

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>添加删除记录练习</title>
		<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
		<script type="text/javascript">
		
			/*
			 * 删除tr的响应函数
			 */
			function delA() {

				//点击超链接以后需要删除超链接所在的那行
				//这里我们点击那个超链接this就是谁
				//获取当前tr
				var tr = this.parentNode.parentNode;

				//获取要删除的员工的名字
				//var name = tr.getElementsByTagName("td")[0].innerHTML;
				var name = tr.children[0].innerHTML;

				//删除之前弹出一个提示框
				/*
				 * confirm()用于弹出一个带有确认和取消按钮的提示框
				 * 	需要一个字符串作为参数，该字符串将会作为提示文字显示出来
				 * 如果用户点击确认则会返回true，如果点击取消则返回false
				 */
				var flag = confirm("确认删除" + name + "吗?");

				//如果用户点击确认
				if(flag) {
					//删除tr
					tr.parentNode.removeChild(tr);
				}

				/*
				 * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
				 * 	但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
				 */
				return false;
			};

			window.onload = function() {

				/*
				 * 点击超链接以后，删除一个员工的信息
				 */

				//获取所有额超链接
				var allA = document.getElementsByTagName("a");

				//为每个超链接都绑定一个单击响应函数
				for(var i = 0; i < allA.length; i++) {
					allA[i].onclick = delA;
				}

				/*
				 * 添加员工的功能
				 * 	- 点击按钮以后，将员工的信息添加到表格中
				 */

				//为提交按钮绑定一个单击响应函数
				var addEmpButton = document.getElementById("addEmpButton");
				addEmpButton.onclick = function() {

					//获取用户添加的员工信息
					//获取员工的名字
					var name = document.getElementById("empName").value;
					//获取员工的email和salary
					var email = document.getElementById("email").value;
					var salary = document.getElementById("salary").value;

					//alert(name+","+email+","+salary);
					/*
					 *  <tr>
							<td>Tom</td>
							<td>tom@tom.com</td>
							<td>5000</td>
							<td><a href="javascript:;">Delete</a></td>
						</tr>
						需要将获取到的信息保存到tr中
					 */

					//创建一个tr
					var tr = document.createElement("tr");

					//设置tr中的内容
					tr.innerHTML = "<td>"+name+"</td>"+
									"<td>"+email+"</td>"+
									"<td>"+salary+"</td>"+
									"<td><a href='javascript:;'>Delete</a></td>";
									
					//获取刚刚添加的a元素，并为其绑定单击响应函数				
					var a = tr.getElementsByTagName("a")[0];
					a.onclick = delA;
					
					//获取table
					var employeeTable = document.getElementById("employeeTable");
					//获取employeeTable中的tbody
					var tbody = employeeTable.getElementsByTagName("tbody")[0];
					//将tr添加到tbodye中
					tbody.appendChild(tr);
					/*tbody.innerHTML += "<tr>"+
					
					"<td>"+name+"</td>"+
									"<td>"+email+"</td>"+
									"<td>"+salary+"</td>"+
									"<td><a href='javascript:;'>Delete</a></td>"
					
					+"</tr>";*/

				};

			};
		</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>tom@tom.com</td>
				<td>5000</td>
				<td>
					<a href="javascript:;">Delete</a>
				</td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>jerry@sohu.com</td>
				<td>8000</td>
				<td>
					<a href="deleteEmp?id=002">Delete</a>
				</td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>bob@tom.com</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">
						Submit
					</button>
					</td>
				</tr>
			</table>

		</div>

	</body>

</html>

03练习三

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除记录练习</title>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<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);
				
				//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>tom@tom.com</td>
			<td>5000</td>
			<td><a href="javascript:;">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</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>

04.使用DOM操作CSS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 点击按钮以后，修改box1的大小
				 */
				//获取box1
				var box1 = document.getElementById("box1");
				//为按钮绑定单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					
					//修改box1的宽度
					/*
					 * 通过JS修改元素的样式：
					 * 	语法：元素.style.样式名 = 样式值
					 * 
					 * 注意：如果CSS的样式名中含有-，
					 * 		这种名称在JS中是不合法的比如background-color
					 * 		需要将这种样式名修改为驼峰命名法，
					 * 		去掉-，然后将-后的字母大写
					 * 
					 * 我们通过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.height);
					alert(box1.style.width);
				};
			};
			
			
		</script>
	</head>
	<body>
		
		<button id="btn01">点我一下</button>
		<button id="btn02">点我一下2</button>
		
		<br /><br />
		
		<div id="box1"></div>
		
	</body>
</html>

05.读取元素的样式

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

06.其他样式操作的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<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: 450px;
				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);
					
					/*
					 * offsetLeft
					 * 	- 当前元素相对于其定位父元素的水平偏移量
					 * offsetTop
					 * 	- 当前元素相对于其定位父元素的垂直偏移量
					 */
					
					//alert(box1.offsetLeft);
					
					/*
					 * scrollWidth
					 * scrollHeight
					 * 	- 可以获取元素整个滚动区域的宽度和高度
					 */
					//alert(box4.clientHeight);
					//alert(box4.scrollWidth);
					
					/*
					 * scrollLeft
					 * 	- 可以获取水平滚动条滚动的距离
					 * scrollTop
					 * 	- 可以获取垂直滚动条滚动的距离
					 */
					//alert(box4.scrollLeft);
					//alert(box4.scrollTop);
					
					//alert(box4.clientHeight); // 283
					
					//当满足scrollHeight - scrollTop == clientHeight
					//说明垂直滚动条滚动到底了
					
					//当满足scrollWidth - scrollLeft == clientWidth
					//说明水平滚动条滚动到底
					//alert(box4.scrollHeight - box4.scrollTop); // 600
					
					
					
				};
				
			};
			
			
		</script>
	</head>
	<body id="body">
		<button id="btn01">点我一下</button>
		<br /><br />
		
		 <div id="box4">
		 	<div id="box5"></div>
		 </div>
		
		
		
		<br /><br />
		
		<div id="box3">
			<div id="box2" style="position: relative;">
				<div id="box1"></div>
			</div>
		</div>
		
		
	</body>
</html>

07.练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#info{
				width: 300px;
				height: 500px;
				background-color: #bfa;
				overflow: auto;
			}
			
		</style>
		<script type="text/javascript">
			window.onload = function(){
				
				/*
				 * 当垂直滚动条滚动到底时使表单项可用
				 * onscroll
				 * 	- 该事件会在元素的滚动条滚动时触发
				 */
				
				//获取id为info的p元素
				var info = document.getElementById("info");
				//获取两个表单项
				var inputs = document.getElementsByTagName("input");
				//为info绑定一个滚动条滚动的事件
				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>

08.事件对象

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">

	#areaDiv {
		border: 1px solid black;
		width: 300px;
		height: 50px;
		margin-bottom: 10px;
	}
	
	#showMsg {
		border: 1px solid black;
		width: 300px;
		height: 20px;
	}

</style>
<script type="text/javascript">

	window.onload = function(){
		/*
		 * 当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标
		 */
		//获取两个div
		var areaDiv = document.getElementById("areaDiv");
		var showMsg = document.getElementById("showMsg");
		
		/*
		 * onmousemove
		 * 	- 该事件将会在鼠标在元素中移动时被触发
		 * 
		 * 事件对象
		 * 	- 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数,
		 * 		在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标  键盘哪个按键被按下  鼠标滚轮滚动的方向。。。
		 */
		areaDiv.onmousemove = function(event){
			
			/*
			 * 在IE8中，响应函数被处罚时，浏览器不会传递事件对象，
			 * 	在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
			 */
			/*if(!event){
				event = window.event;
			}*/
			
			//解决事件对象的兼容性问题
			event = event || window.event;
			
			/*
			 * clientX可以获取鼠标指针的水平坐标
			 * cilentY可以获取鼠标指针的垂直坐标
			 */
			var x = event.clientX;
			var y = event.clientY;
			
			//alert("x = "+x + " , y = "+y);
			
			//在showMsg中显示鼠标的坐标
			showMsg.innerHTML = "x = "+x + " , y = "+y;
			
		};
		
	};

</script>
</head>
<body>

	<div id="areaDiv"></div>
	<div id="showMsg"></div>

</body>
</html>

09.练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				/*
				 * 开启box1的绝对定位
				 */
				position: absolute;
			}
			
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				
				/*
				 * 使div可以跟随鼠标移动
				 */
				
				//获取box1
				var box1 = document.getElementById("box1");
				//绑定鼠标移动事件
				document.onmousemove = function(event){
					
					//解决兼容问题
					event = event || window.event;
					
					//获取滚动条滚动的距离
					/*
					 * chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
					 * 火狐等浏览器认为浏览器的滚动条是html的，
					 */
					var st = document.body.scrollTop || document.documentElement.scrollTop;
					var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
					//var st = document.documentElement.scrollTop;
					
					
					//获取到鼠标的坐标
					/*
					 * clientX和clientY
					 * 	用于获取鼠标在当前的可见窗口的坐标
					 * div的偏移量，是相对于整个页面的
					 * 
					 * pageX和pageY可以获取鼠标相对于当前页面的坐标
					 * 	但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
					 */
					var left = event.clientX;
					var　top = event.clientY;
					
					//设置div的偏移量
					box1.style.left = left + sl + "px";
					box1.style.top = top + st + "px";
					
				};
				
				
			};
			
			
		</script>
	</head>
	<body style="height: 1000px;width: 2000px;">
		<div id="box1"></div>
	</body>
</html>

10.冒泡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				background-color: yellowgreen;
			}
			
			#s1{
				background-color: yellow;
			}
			
			
		</style>
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 事件的冒泡（Bubble）
				 * 	- 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
				 * 	- 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡
				 * 
				 */
				
				//为s1绑定一个单击响应函数
				var s1 = document.getElementById("s1");
				s1.onclick = function(event){
					event = event || window.event;
					alert("我是span的单击响应函数");
					
					//取消冒泡
					//可以将事件对象的cancelBubble设置为true，即可取消冒泡
					event.cancelBubble = true;
				};
				
				//为box1绑定一个单击响应函数
				var box1 = document.getElementById("box1");
				box1.onclick = function(event){
					event = event || window.event;
					alert("我是div的单击响应函数");
					
					event.cancelBubble = true;
				};
				
				//为body绑定一个单击响应函数
				document.body.onclick = function(){
					alert("我是body的单击响应函数");
				};
				
				
			};
			
			
		</script>
	</head>
	<body>
		
		<div id="box1">
			我是box1
			<span id="s1">我是span</span>
		</div>
		
	</body>
</html>

11.冒泡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				/*
				 * 开启box1的绝对定位
				 */
				position: absolute;
			}
			
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				
				/*
				 * 使div可以跟随鼠标移动
				 */
				
				//获取box1
				var box1 = document.getElementById("box1");
				//绑定鼠标移动事件
				document.onmousemove = function(event){
					
					//解决兼容问题
					event = event || window.event;
					
					//获取滚动条滚动的距离
					/*
					 * chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
					 * 火狐等浏览器认为浏览器的滚动条是html的，
					 */
					var st = document.body.scrollTop || document.documentElement.scrollTop;
					var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
					//var st = document.documentElement.scrollTop;
					
					
					//获取到鼠标的坐标
					/*
					 * clientX和clientY
					 * 	用于获取鼠标在当前的可见窗口的坐标
					 * div的偏移量，是相对于整个页面的
					 * 
					 * pageX和pageY可以获取鼠标相对于当前页面的坐标
					 * 	但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
					 */
					var left = event.clientX;
					var　top = event.clientY;
					
					//设置div的偏移量
					box1.style.left = left + sl + "px";
					box1.style.top = top + st + "px";
					
				};
				
				var box2 = document.getElementById("box2");
				box2.onmousemove = function(event){
					event = event || window.event;
					
					event.cancelBubble = true;
				};
				
				
				
			};
			
			
		</script>
	</head>
	<body style="height: 1000px;width: 2000px;">
		<div id="box2" style="width: 500px; height: 500px; background-color: #bfa;"></div>
		<div id="box1"></div>
	</body>
</html>

ex_2_style

@CHARSET "UTF-8";
#total {
	width: 450px;
	margin-left: auto;
	margin-right: auto;
}

ul {
	list-style-type: none;
}

li {
	border-style: solid;
	border-width: 1px;
	padding: 5px;
	margin: 5px;
	background-color: #99ff99;
	float: left;
}

.inner {
	width: 400px;
	border-style: solid;
	border-width: 1px;
	margin: 10px;
	padding: 10px;
	float: left;
}

#employeeTable {
	border-spacing: 1px;
	background-color: black;
	margin: 80px auto 10px auto;
}

th,td {
	background-color: white;
}

#formDiv {
	width: 250px;
	border-style: solid;
	border-width: 1px;
	margin: 50px auto 10px auto;
	padding: 10px;
}

#formDiv input {
	width: 100%;
}

.word {
	width: 40px;
}

.inp {
	width: 200px;
}