13.JS的基础学习——13day

最新推荐文章于 2024-08-25 09:57:22 发布

小周日记

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量101

点赞数

分类专栏： JavaScript学习文章标签： javascript

本文链接：https://blog.csdn.net/actores/article/details/115267122

版权

JavaScript学习专栏收录该内容

22 篇文章 1 订阅

订阅专栏

1.练习tr标签的修改1（添加删除记录练习）

<!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 detA () {
				
				//点击超链接以后删除这一行
				//找到父节点的父节点，并且返回一个值tr
				//this这里代表的是点击时候的超链接a.parentNode.parentNode找到tr
				var tr= this.parentNode.parentNode;
				
				
				//获取删除的对象(这里表示所有的td)
				//var name = tr.getElementsByTagName("td");
				//获取第一个
				var name = tr.getElementsByTagName("td")[0].innerHTML;
				
				
				/*
				 * confirm 和alert差不多，但是多出了一个取消按钮
				 * 		括号内容：提示信息是一个字符串
				 * 如果用户点击确认则返回true ，如果点击取消则返回false
				 */
				//弹出框返回一个结果
				var flag = confirm("是否删除"+name);
				
				//我自己写的，但是firstChild有一个局限性，有空格
				//var flag = confirm("是否删除"+this.parentNode.parentNode.firstChild.innerHTML);
				//我自己写的，就可以children[0]先找到所有子元素中的第一个
				//var flag = confirm("是否删除"+this.parentNode.parentNode.children[0].innerHTML);
				
				
				//判断用点击的是true还是false
				if(flag==true){
					//tr.parentNode找到父节点删除这个元素
					tr.parentNode.removeChild(tr);
				}
				//点击超链接以后，超链接会跳转页面，这是个超链接的默认行为
				//但是我们不希望出现新的窗口跳转，所以设置return false;取消超链接的默认行为
				//可以使用这一个javascript:;两种方式
				return false;
		};
	

	
	window.onload = function(){
	
		//点击超链接后，删除一个员工信息
		//获取所有的超链接
		var allA = document.getElementsByTagName("a");
		//给超链接添加响应事件,绑定单击响应函数
		for (var i = 0 ; i<allA.length ; i++) {
			//赋值不用括号
			allA[i].onclick = detA;
			//把删除的超链接响应函数封装起来了，在函数中
			
		}
		
		/*
		 * 添加员工的功能
		 * 	 - 点击按钮以后，将员工的信息添加到表格中
		 * 
		 */
		//给按钮绑定一个单击响应事件
		//return false; 这里是一个input表单项，不是from，所以这里不用写
		var addEmpButton = document.getElementById("addEmpButton");
		addEmpButton.onclick = function(){
			
			//获取用户添加的员工信息
			//获取员工的名字
			var name = document.getElementById("empName").value;
			//获取表单中用户输入的值
			//这样写也可以name.value
			//alert(name);
			
			var email = document.getElementById("email").value;
			//获取表单中用户输入的值
			//这样写也可以email.value
			//alert(email);
			
			var salary = document.getElementById("salary").value;
			//获取表单中用户输入的值
			//这样写也可以salary.value
			//alert(salary);
			
			//添加到表格中：先创建tr和td和a
			//创建一个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>";
			//因为获取的时候是一个数组，所以如果要第一个就加上[0]				
			var a = tr.getElementsByTagName("a")[0];
			//给a加上点击事件
			a.onclick = detA;
			
			
			
			
			//获取table
			var employeeTable = document.getElementById("employeeTable");
			//将tr添加到table中
			//employeeTable.appendChild(tr);
			
			//由于浏览器的原因，新加的行数会在外面，如果后期设置样式的时候那么就会不统一
			//所以就可以全部放在tbody中
			//获取employeeTable中的tbody,因为是数组，所以得加一个[0]
			var tbody = employeeTable.getElementsByTagName("tbody")[0];
			//将tr放在tbody中
			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>
			<!--javascript:;-->
			<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>

2.练习的修改2

<!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);
			//对于这一种方式，我们不适用，因为这样前面的td绑定的事件会消失
					/*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>

3.执行顺序导致超出索引

<!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循环早已执行完毕
			 * 		所以i的值会停留在3，所以这里只能使用this
			 * var tr = this.parentNode.parentNode;
			 * 而不能：var tr = allA[i].parentNode.parentNode;
			 */
			
			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>

4.使用DOM修改CSS样式表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				background-color: red;
			}

		</style>
		<script type="text/javascript">
			/*
			 * 通过HS修改元素的样式：
			 * 	 语法：元素.style.样式名 = 样式值
			 * 
			 * 注意：如果CSS的样式中含有-
			 * 		   这种名称在JS中是不合法的比如background-color
			 * 			所以我们需要将这种样式修改为驼峰命名法
			 * 			去掉-，然后将-后的字母大写
			 * 
			 * 我们通过style属性设置的样式都是内联样式，(在当前标签内部进行设置样式)
			 * 	   而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
			 * 
			 * 但是如果在样式中写了!important,则此样式会有最高的优先级，
			 * 		即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效
			 * 		所以尽量不要为此样式添加!important（以后会产生隐患）
			 * 
			 * 
			 * 
			 */
			window.onload = function(){
		//JS设置CSS样式
				//获取box1标签
				var box1 = document.getElementById("box1");
				//获取按钮标签
				var btn01 = document.getElementById("btn01");
				//绑定事件
				btn01.onclick = function(){
					box1.style.width = "300px";
					box1.style.height = "300px";
					box1.style.backgroundColor = "yellow";
					
				};
				
				
		//JS读取CSS样式
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					//读取box1的样式
					/*
					 *
					 * 语法：元素.style.样式名 
					 * 	 读取的是标签内联样式不是CSS样式表中的
					 */
					alert(box1.style.width);
					
				};
				
				
				
			};
			
		</script>
	</head>
	<body>
		<button id="btn01">点我一下</button>
		<button id="btn02">点我一下</button>
		<div id="box1">
			
		</div>
		
		
		
	</body>
</html>

5.读取当前CSS的元素的样式

<!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(){
		//JS设置CSS样式
				//获取box1标签
				var box1 = document.getElementById("box1");
				//获取按钮标签
				var btn01 = document.getElementById("btn01");
				//绑定事件
				btn01.onclick = function(){
					//读取box1的CSS内联样式
					//alert(box1.style.width); 显示空白
					
					/*
					 * 获取元素的当前显示的样式
					 * 		语法：元素.currentStyle.样式名
					 * 它可以用来读取当前元素正在显示的样式
					 * 		页面显示什么就是什么，是谁生效就使用谁
					 * 
					 *局限性：currentStyle只有IE浏览器支持，其他浏览器都不支持
					 */
					//alert(box1.currentStyle.width);
					
				//解决：在其他浏览器中可以使用
					/*
					 * 在其他浏览器中可以使用
					 * 		getComputedStyle()这个方法来获取元素的样式
					 * 		这个是window的方法，可以直接使用该方法
					 * 需要两个参数
					 * 		第一个：要获取样式的元素
					 * 		第二个：可以传递一个伪元素(after),一般都传null
					 * 
					 * 该方法会返回一个对象，对象中封装了当前元素对应的样式
					 * 	   可以通过对象.样式名来读取样式
					 * 	   如果获取的样式没有设置，则会获取到真实的值，而不是默认值
					 * 	   比如：没有设置width，他不会获取到auto，而是一个具体长度
					 * 		这一点比currentStyle好
					 * 
					 * 局限性：该方法不支持IE8及以下浏览器	
					 * 
					 * 相同点：
					 * 通过currentStyle和getComputedStyle()都是对样式只读，不能进行修改
					 * 		如果要修改必须通过style属性进行
					 */
				//第一种方式：
					//var obj = getComputedStyle(box1,null);
					//返回的obj是一个数组，所以调用的时候 对象.样式名
					//alert(obj.width);
				//第二种方式：
					//alert(getComputedStyle(box1,null).width);
					
				//调用方法
					//alert(gegetStyle(box1,"width"));
					
					var w = getStyle(box1,"width");
					
					alert(w);
				};
			};	
				//所以很明显，这两种方法都不太适合所有的浏览器，
				//那么只有自己写一个方法来执行
				
				/*
				 * 定义一个函数，用来获取指定元素的当前的样式
				 * 参数：
				 * 		obj  要获取样式的元素
				 * 		name 要获取的样式名
				 * 
				 */
				function getStyle(obj , name){
					//正常浏览器的方式
					//getComputedStyle(obj,null).name;写固定了
					//return getComputedStyle(obj,null)[name];//name传入的值
					//IE8的方式
					//return obj.currentStyle[name];
					
			//以后处理浏览器的兼容性问题的思路
					/*
					 * 说明：当if (getComputedStyle)的时候getComputedStyle浏览器默认是一个变量
					 * 		 所以当找变量的时候，浏览器是先在内部函数找，然后在全局函数找,都找不到的情况就会报错
					 * 		 当是变量etComputedStyle的时候，就去作用域中寻找，没找到就会报错；
					 * 		 当是全局属性的时候window.getComputedStyle ，没找到就会报一个undefined
					 * 		 所以确保window.getComputedStyle为真
					 * 
					 */
					if (window.getComputedStyle) {
						//正常浏览器的方式，具有getComputedStyle()方法
						return getComputedStyle(obj,null)[name];
					}else{
						//IE8的方式
						return obj.currentStyle[name];
					}
					
					
					//当ie11以上的时候，我们本是想优先使用getComputedStyle
					//但是这一种方式肯定会先使用currentStyle，所以有点小瑕疵
					/*if (obj.currentStyle) {
						//IE8的方式
						return obj.currentStyle[name];
					}else{
						//正常浏览器的方式，具有getComputedStyle()方法
						return getComputedStyle(obj,null)[name];
					}*/
					
					
					
					
				}
				
				

		
		</script>
	</head>
	<body>
		<button id="btn01">点我一下</button>
		<br /><br />
		<div id="box1"></div>
		
		
		
	</body>
</html>

6.其他样式的操作属性

<!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;
				
				
				
			}
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				//获取box1
				var box1 = document.getElementById("box1");
				//获取btn01
				var btn01 = document.getElementById("btn01");
				//绑定单击响应事件
				btn01.onclick =function(){
					/*
					 * clientWidth 
					 * clientHeight
					 * 	 - 这两个属性可以获取元素的可见宽度和高度
					 * 	 - 这些属性都是不带px的，返回都是一个数字，可以直接计算
					 * 	 - 获取元素的宽度和高度，包括内容区和内边距
					 * 	 - 这些属性都是只读的，都是不可以修改的
					 */
				//举例：
					//alert(box1.clientWidth);//显示：100 没有px
					//加上padding之后
					//alert(box1.clientWidth);//显示：120 没有px
					
					/*
					 * offsetWidth
					 * offsetHeight
					 *   - 获取元素的整个的宽度和高度，包括他们的内容区，内边距和边框
					 * 	 - 比clientWidth/clientHeight多出了包括一个边框的值
					 * 
					 * 
					 */
				//举例：
					//alert(box1.offsetWidth);//显示：140 没有px
					
					/*
					 * offsetParent
					 *   - 可以用来获取当前的定位元素
					 * 	 - 会获取到离当前最近的开启了定位的祖先元素
					 * 	 - 如果标签的祖先元素都没有开启定位，那么就会返回body
					 * 	 - offsetParent就会显示body
					 * 
					 */
				//举例：
					/*var  op = box1.offsetParent;
					alert(op.id);//此时显示的是 ：box2*/
					
					/*	
					 *  返回元素的水平偏移位置
					 *   - offsetLeft
					 * 		- 当前元素相对于其父元素的水平偏移量
					 * 	返回元素的垂直偏移位置
					 * 	 - offsetTop
					 * 		- 当前元素相对于其父元素的垂直偏移量
					 */
				//举例：
					//此时，没有对祖先元素开启定位的时候：是box1到body的距离
					//alert(box1.offsetLeft);
					//与此同时，对box2开启定位的时候：是box1到box2的距离
					
					/*
					 * scrollWidth
					 * scrollHeight
					 * 	 - 可以获取元素整个滚动区域的宽度和高度
					 * 	 - 也就是说，被隐藏的部分是可以被该属性读取到的
					 * 
					 * 而 clientWidth 读取到的是当前用户看见的大小
					 * 
					 */
				//举例：
					//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>
		<button id="btn01">点我一下</button>
		<br /><br />
		<div id="box3">
			<div id="box2" style="position: relative;">
				<div id="box1"></div>
			</div>
		</div>
		
		
		
	</body>
</html>

7.其他样式的操作属性练习

<!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>

8.小练习同意书

<!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>
	
	<!--设置JS语言-->
		<script type="text/javascript">
			
			window.onload=function(){
				
				/*//找到(获取)按钮
				var inputs = document.getElementsByTagName("input");
				//获取p标签，因为滚动的对象是p标签
				var info = document.getElementById("info");
				//为p绑定单击响应事件
				info.onscroll = function(){
					//判断当info的滚动达到底部的时候就显示可以选择
					if(info.scrollHeight - info.scrollTop == info.clientHeight)
					{
						//因为inputs是一个数组，所以得一个个取
						//disabled=true为关闭，disabled=false为开启
						inputs[0].disabled = false;
						inputs[1].disabled = false;
					}
					
				};*/
				
				var inputs = document.getElementsByTagName("input");
				var info = document.getElementById("info");
				
				info.onscroll = function(){
					//这里的info改为this也可以
					if(info.scrollHeight - info.scrollTop == info.clientHeight){
						
						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>

9.事件对象答案

<!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>

10.事件对象浏览器兼容（css hack）

<!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">
	/*
	 * 当鼠标在areaDiv中移动的时候，在showMsg中来显示鼠标的坐标
	 */
	window.onload = function(){
		
		
	
	//获取两个div
	var areaDiv = document.getElementById("areaDiv");
	var showMsg = document.getElementById("showMsg");
	
	/*
	 * onmousemove
	 * 	 - 该事件将会在鼠标在元素中移入的时候被触发
	 * 
	 * 事件对象
	 * 	 - 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，
	 * 		   在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标 键盘哪个按键被按下  鼠标滚轮滚动的方向
	 * 
	 * 
	 * 说明：在这里定义一个形参event来接收浏览器传入响应函数的实参，因为这个当前事件对象封装了
	 * 		 很多的方法和属性，我们需要使用他们，就需要使用这个带有浏览器实参的形参
	 * 		 因此：传入实参给形参event，是为了使用他们
	 * 
	 */

	//为鼠标的移入的盒子绑定单价响应事件
	areaDiv.onmousemove = function(event){
		
		
		
		
		
		/*
		 * 在IE8中，响应函数被触发的时候，浏览器不会传递事件对象
		 * 	 在IE8及以下的浏览中，是将事件对象作为window对象的属性保存的
		 * 
		 * 
		 * 
		 */
	//第一种写法
		//兼容火狐
		//如果不存在event，就赋值给他一个全局的event
		/*if(!event){
			event = window.event;
		}*/
	//第二种写法
	
		event = event || window.event;
		
		
		//找到属性和方法，并且使用event事件对象去调用
		/*
		 * clientX 返回当事件被触发时，鼠标指针的水平坐标。
		 * clientY 返回当事件被触发时，鼠标指针的垂直坐标。
		 */
		
		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>

小周日记

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
13.JS的基础学习——13day

目录1.练习tr标签的修改12.练习的修改23.执行顺序导致超出索引4.使用DOM修改CSS样式表5.读取当前CSS的元素的样式6.其他样式的操作属性7.其他样式的操作属性练习8.小练习同意书9.事件对象答案10.事件对象浏览器兼容总结1.练习tr标签的修改1（添加删除记录练习）<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/...
复制链接

扫一扫

专栏目录