JS学习第九天总结

最新推荐文章于 2019-04-15 22:25:23 发布

恋风（微信）

最新推荐文章于 2019-04-15 22:25:23 发布

阅读量230

点赞数

分类专栏： JS学习笔记 JS学习笔记

本文链接：https://blog.csdn.net/weixin_44791254/article/details/88879045

版权

JS学习笔记同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

JS学习笔记

22 篇文章 0 订阅

订阅专栏

1.昨天内容复习

排它思想
- 上来先干掉所有元素的样式，然后在给自己添加样式
自定义属性
- 换行会增加宽度
数组方法
- push
- pop
- unshift
- shift
- join();把数组转成字符串
- splice();涵盖了slice功能，记这个就行了
字符串转数组，split(‘字符串中符号’)，符号必须统一;

2.昨天作业讲解

基础版：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0px;
				padding:0px;
				font-size:18px;
			}
			#container{
				width:530px;
				height:440px;
				margin:50px auto;
				border:1px solid black;	
				padding:20px;	
			}
			h2{
				color:#666;
				font-size:24px;
				margin-bottom: 20px;
			}
			#centerLeft{
				width:50px;
				height:50px;
				background:url(img/星座精灵图.png) no-repeat;
				float:left;
				margin:0px 50px;
			}
			select{
				padding-left:10px;
				width:200px;
				height:30px;
				font-size:18px;
				display: block;
				margin-bottom: 10px;
			}
			#yunshi{
				display: block;
				float:left;
			}
			#star{
				width:80px;
				height:13px;
				float:left;
				position: relative;
			}
			#lightstar{
				display:block;
				width:80px;
				height:13px;
				float:left;
				background:url(img/星星图.png) left bottom no-repeat;
				position: absolute;
				top:5px;
				left:0;
			}
			#blackstar{
				display:block;
				width:80px;
				height:13px;
				float:left;
				background:url(img/星星图.png) left top no-repeat;
				margin-top:5px;
			}			
			#clear{
				clear:both;
			}
			p{
				margin-top:20px;
				text-indent:2em;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="tops">
				<h2>星座运势</h2>
			</div>
			<div id="centers">
				<div id="centerLeft"></div>
				<div id="centerRight">
					<select id="sec">
						<option value="0">白羊座03.21-04.19</option>
						<option value="1">金牛座04.20-05.20</option>
						<option value="2">双子座05.21-06.21</option>
						<option value="3">巨蟹座06.22-07.22</option>
						<option value="4">狮子座07.23-08.22</option>
						<option value="5">处女座08.23-09.22</option>
						<option value="6">天秤座09.23-10.23</option>
						<option value="7">天蝎座10.24-11.22</option>
						<option value="8">射手座 11.23-12.21</option>
						<option value="9">摩羯座12.22-01.19</option>
						<option value="10">水瓶座01.20-02.18</option>
						<option value="11">双鱼座02.19-03.20</option>
					</select>
					<span id="yunshi">今日运势：</span>
					<div id="star">
						<span id="lightstar"></span>
						<span id="blackstar"></span>
					</div>
					<div id="clear">						
					</div>
				</div>
			</div>
			<div id="bottoms">
				<p id="content">今天的事业运势不错，虽然容易有一些竞争者或其他小人出现在事业中，但他们反而会成就自己的事业。今天仍然适合外出学习进修，提升自己。</p>
			</div>
		</div>
		<script type="text/javascript">
			function $id(id){
				return document.getElementById(id);
			}
			function change(val,num,str){
				centerLeft.style.backgroundPositionY=(-val*50)+"px";
				lightstar.style.width=(num*8)+"px";
				content.innerHTML=str;
			}
			var sec=$id("sec");
			var centerLeft=$id("centerLeft");
			var lightstar=$id("lightstar");
			var content=$id("content");
			sec.function(){
				switch (this.value){
					case "0":
						change(this.value,10,"今天的事业运势不错，虽然容易有一些竞争者或其他小人出现在事业中，但他们反而会成就自己的事业。今天仍然适合外出学习进修，提升自己。");
						break;
					case "1":
						change(this.value,9,"外出容易遇到一些小麻烦，但终能化解，转不利为有利。");
						break;
					case "2":
						change(this.value,6,"会专注于事业方面，虽然在事业工作方面，会有些迷茫，这天感情方面运势也不错。");
						break;
					case "3":
						change(this.value,8,"这天巨蟹会很忙碌，但会忙得非常愉快，即使平时不太爱运动的巨蟹，这天也可能很强活动一下自己。");
						break;
					case "4":
						change(this.value,6,"快乐的一天，也有迁移运势，工作和健康方面的运势也都还不错。");
						break;
					case "5":
						change(this.value,8,"这天适合多听取一些朋友，对自己家庭，或者房子装修布置的建议。");

						break;
					case "6":
						change(this.value,5,"有利于学习考试，与上司的沟通也会比较良好，总体比较愉快。");
						break;
					case "7":
						change(this.value,2,"财运很好的一天，讲话比较严谨大气，也适合多一些娱乐活动。");
						break;
					case "8":
						change(this.value,1,"不错的一天，财运仍然较好，会因为平时不太熟悉的一些晚辈帮助，或者因为娱乐活动而获利。");
						break;
					case "9":
						change(this.value,3,"有朋友来帮助自己，让自己信心满满，心理层面，也是比较愉悦。");
						break;
					case "10":
						change(this.value,6,"暗中会得人帮助，也容易得到亲戚，邻居的一些帮助，这天财运上也还可以。");
						break;
					case "11":
						change(this.value,1,"社交运仍然强旺，内心也变得强大起来，也会因为事业方面的事情，心情愉快。");
						break;
					default:
						break;
				}
			}
		</script>
	</body>
</html>

优化版：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0px;
				padding:0px;
				font-size:18px;
			}
			#container{
				width:530px;
				height:440px;
				margin:50px auto;
				border:1px solid black;	
				padding:20px;	
			}
			h2{
				color:#666;
				font-size:24px;
				margin-bottom: 20px;
			}
			#centerLeft{
				width:50px;
				height:50px;
				background:url(img/星座精灵图.png) no-repeat;
				float:left;
				margin:0px 50px;
			}
			select{
				padding-left:10px;
				width:200px;
				height:30px;
				font-size:18px;
				display: block;
				margin-bottom: 10px;
			}
			#yunshi{
				display: block;
				float:left;
			}
			#star{
				width:80px;
				height:13px;
				float:left;
				position: relative;
			}
			#lightstar{
				display:block;
				width:80px;
				height:13px;
				float:left;
				background:url(img/星星图.png) left bottom no-repeat;
				position: absolute;
				top:5px;
				left:0;
			}
			#blackstar{
				display:block;
				width:80px;
				height:13px;
				float:left;
				background:url(img/星星图.png) left top no-repeat;
				margin-top:5px;
			}			
			#clear{
				clear:both;
			}
			p{
				margin-top:20px;
				text-indent:2em;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="tops">
				<h2>星座运势</h2>
			</div>
			<div id="centers">
				<div id="centerLeft"></div>
				<div id="centerRight">
					<select id="sec">
						<option value="0">白羊座03.21-04.19</option>
						<option value="1">金牛座04.20-05.20</option>
						<option value="2">双子座05.21-06.21</option>
						<option value="3">巨蟹座06.22-07.22</option>
						<option value="4">狮子座07.23-08.22</option>
						<option value="5">处女座08.23-09.22</option>
						<option value="6">天秤座09.23-10.23</option>
						<option value="7">天蝎座10.24-11.22</option>
						<option value="8">射手座 11.23-12.21</option>
						<option value="9">摩羯座12.22-01.19</option>
						<option value="10">水瓶座01.20-02.18</option>
						<option value="11">双鱼座02.19-03.20</option>
					</select>
					<span id="yunshi">今日运势：</span>
					<div id="star">
						<span id="lightstar"></span>
						<span id="blackstar"></span>
					</div>
					<div id="clear">						
					</div>
				</div>
			</div>
			<div id="bottoms">
				<p id="content">今天的事业运势不错，虽然容易有一些竞争者或其他小人出现在事业中，但他们反而会成就自己的事业。今天仍然适合外出学习进修，提升自己。</p>
			</div>
		</div>
		<script type="text/javascript">
			function $id(id){
				return document.getElementById(id);
			}
			function change(val,num,str){
				centerLeft.style.backgroundPositionY=(-val*50)+"px";
				lightstar.style.width=(num*8)+"px";
				content.innerHTML=str;
			}
			var sec=$id("sec");
			var centerLeft=$id("centerLeft");
			var lightstar=$id("lightstar");
			var content=$id("content");
			var arr=[10,9,6,8,6,8,5,2,1,3,6,1];
			var str=["今天的事业运势不错，虽然容易有一些竞争者或其他小人出现在事业中，但他们反而会成就自己的事业。今天仍然适合外出学习进修，提升自己。","外出容易遇到一些小麻烦，但终能化解，转不利为有利。","会专注于事业方面，虽然在事业工作方面，会有些迷茫，这天感情方面运势也不错。","这天巨蟹会很忙碌，但会忙得非常愉快，即使平时不太爱运动的巨蟹，这天也可能很强活动一下自己。","快乐的一天，也有迁移运势，工作和健康方面的运势也都还不错。","这天适合多听取一些朋友，对自己家庭，或者房子装修布置的建议。","有利于学习考试，与上司的沟通也会比较良好，总体比较愉快。","财运很好的一天，讲话比较严谨大气，也适合多一些娱乐活动。","不错的一天，财运仍然较好，会因为平时不太熟悉的一些晚辈帮助，或者因为娱乐活动而获利。","有朋友来帮助自己，让自己信心满满，心理层面，也是比较愉悦。","暗中会得人帮助，也容易得到亲戚，邻居的一些帮助，这天财运上也还可以。","社交运仍然强旺，内心也变得强大起来，也会因为事业方面的事情，心情愉快。"];
			sec.function(){
				var val=this.value;
				change(val,arr[val],str[val]);
			}
		</script>
	</body>
</html>

3.DOM

JS组成部分：

ECMAScript
DOM——Document Object Model 文档对象模型
BOM

DOM：

DOM树
节点：（元素、标签）
- 标签节点
- 属性节点
- 文本节点
访问节点
- 访问标签节点：getElementsByTagName
- id属性：getElementById
- class属性：getElementsByClassName（IE6、7、8不支持这个写法）
  - 例如IE6、7基本上没有人在用了，但是IE8使用人数还不少
  - IE9及以后的版本是兼容的
  - 写一个兼容的函数，直接调用来处理兼容问题

IE6、7、8兼容问题处理办法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			span{
				display: inline-block;
				width:50px;
				height:50px;
				background-color:skyblue;
				line-height: 50px;
			}
		</style>
	</head>
	<body>
		<span>内容一</span>
		<span class="box">内容二</span>
		<span>内容三</span>
		<span class="box">内容四</span>
		<span>内容五</span>
		<span>内容六</span>
		<span class="box">内容七</span>
	</body>
	<script type="text/javascript">
		function getClass(classname){
			if(document.getElementsByClassName){
				return document.getElementsByClassName(classname);
			}
			var arr=[];
			var dom=document.getElementsByTagName("*");
			for(var i=0;i<dom.length;i++){
				if(dom[i].className==classname){
					arr.push(dom[i]);
				}
			}
			return arr;
		}
		var boxs=getClass("box");
		for(var i=0;i<boxs.length;i++){
			boxs[i].style.backgroundColor="yellow";
		}
	</script>
</html>

多类名的getClass函数封装：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			span{
				display: inline-block;
				width:50px;
				height:50px;
				background-color:skyblue;
				line-height: 50px;
			}
		</style>
	</head>
	<body>
		<span>内容一</span>
		<span class="dv box">内容二</span>
		<span>内容三</span>
		<span class="box">内容四</span>
		<span>内容五</span>
		<span>内容六</span>
		<span class="dd box">内容七</span>
	</body>
	<script type="text/javascript">
		function getClass(classname){
			if(document.getElementsByClassName){
				return document.getElementsByClassName(classname);
			}
			var arr=[];
			var dom=document.getElementsByTagName("*");
			for(var i=0;i<dom.length;i++){
				var newArr=dom[i].className.split(" ");
				for(var j=0;j<newArr.length;j++){
					if(newArr[j]==classname){
						arr.push(dom[i]);
					}
				}
			}
			return arr;
		}
		var boxs=getClass("box");
		for(var i=0;i<boxs.length;i++){
			boxs[i].style.backgroundColor="red";
		}		
	</script>
</html>

带id名的getClass函数封装

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			li{
				list-style: none;
				width:100px;
				height:40px;
				display: inline-block;
				float:left;
				margin:20px;
				background-color:hotpink;
			}
		</style>
	</head>
	<body>
		<div id="topbox">
			<ul>
				<li>上1</li>
				<li class="box">上2</li>
				<li>上3</li>
				<li class="box">上4</li>
				<li>上5</li>
				<li class="box">上6</li>
				<li>上7</li>
			</ul>
		</div>
		<div id="bottombox">
			<ul>
				<li>下1</li>
				<li>下2</li>
				<li>下3</li>
				<li>下4</li>
			</ul>
		</div>
		<script type="text/javascript">
			function getClass(classname,id){
				if(document.getElementsByClassName){
					if(id){
						var id=document.getElementById(id);
						return id.getElementsByClassName(classname);
					}else{
						return document.getElementsByClassName(classname);
					}
				}
				var arr=[];
				if(id){
					var id=document.getElementById(id);
					var dom=id.getElementsByTagName("*");
				}else{
					var dom=document.getElementsByTagName("*");
				}
				for(var i=0;i<dom.length;i++){
					var newArr=dom[i].className.split(" ");
					for(var j=0;j<newArr.length;j++){
						if(newArr[j]==classname){
							arr.push(dom[i]);
						}
					}
				}
				return arr;
			}
			var boxs=getClass("box","topbox");
			for(var i=0;i<boxs.length;i++){
				boxs[i].style.backgroundColor="skyblue";
			}
		</script>
	</body>
</html>

4.节点关系

父节点parentNode，这个操作可以连续使用，如span.parentNode.parentNode
兄弟节点nextElementSibling、previousElementSibling；注意nextSibling、previousSibling是IE6、7、8专用获取方式。
子节点firstElementChild、lastElementChild；注意firstChild、lastChild是IE6、7、8专用获取方式。
- childNodes，他是一个W3C指定推荐的，包含换行在内
- nodeType==1，表示这是元素节点
- children能拿到子元素，且没有多余内容，这是一个非标准，但是好用，且没有兼容问题。

练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul{
				margin:10px;
			}
			li{
				width:100px;
				height:100px;
				background-color:skyblue;
				list-style: none;
				display: inline-block;
				text-align: center;
				line-height: 100px;
				font-size:30px;
				margin:30px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul>
				<li>1</li>
				<li>2</li>
				<li id="lis">3</li>
				<li>4</li>
				<li>5</li>
			</ul>
		</div>
		<script type="text/javascript">
			var uls=document.getElementsByTagName("ul");
			var lis=document.getElementById("lis");
			lis.parentNode.style.backgroundColor="yellow";
			lis.parentNode.parentNode.style.backgroundColor="red";
			lis.nextElementSibling.style.backgroundColor="green";
			lis.previousElementSibling.style.backgroundColor="green";
			uls[0].firstElementChild.style.backgroundColor="green";
			uls[0].lastElementChild.style.backgroundColor="green";
			var liss=uls[0].childNodes;
			for(var i=0;i<liss.length;i++){
				if(liss[i].nodeType==1){
					console.log(liss[i]);
				}
			}
			var lisss=uls[0].children;
			for(var i=0;i<lisss.length;i++){
				console.log(lisss[i]);
			}			
		</script>
	</body>
</html>

百度流量研究院

练习

商品展重写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			#container{
				width:360px;
				height:435px;
				border:1px solid #666;
				margin:100px auto;
			}
			#big{
				width:360px;
				height:360px;
				background:url(img/01big.jpg) no-repeat;
			}
			#small li{
				list-style: none;
				float:left;
				border:1px solid #666;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="big"></div>
			<div id="small">
				<ul>
					<li><img src="img/01.jpg"/></li>
					<li><img src="img/02.jpg"/></li>
					<li><img src="img/03.jpg"/></li>
					<li><img src="img/04.jpg"/></li>
					<li><img src="img/05.jpg"/></li>
				</ul>
			</div>
		</div>
		<script type="text/javascript">
			var lis=document.getElementsByTagName("li");
			var big=document.getElementById("big");
			function show(index){
				lis[index].function(){
					console.log(11);
					big.style.backgroundImage="url(img/0"+(index+1)+"big.jpg)";
				}
			}
			for(var i=0;i<lis.length;i++){
				show(i);
			}
		</script>
	</body>
</html>

tab栏再练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			#container{
				width:382px;
				height:440px;
				border:1px solid #666;
				margin:100px auto;
			}
			#big{
				margin:auto;
				width:360px;
				height:360px;
			}
			#small li{
				display: inline-block;
				list-style: none;
				border:1px solid #666;
			}			
			#big img{
				display: none;
			}
			#small .light{
				border:2px red solid;
			}
			#big .show{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="container">			
			<div id="small">
				<ul>
					<li class="light"><img src="img/01.jpg"/></li>
					<li><img src="img/02.jpg"/></li>
					<li><img src="img/03.jpg"/></li>
					<li><img src="img/04.jpg"/></li>
					<li><img src="img/05.jpg"/></li>
				</ul>
			</div>
			<div id="big">
				<img src="img/01big.jpg" class="show"/>
				<img src="img/02big.jpg"/>
				<img src="img/03big.jpg"/>
				<img src="img/04big.jpg"/>
				<img src="img/05big.jpg"/>
			</div>
		</div>
		<script type="text/javascript">
			var lis=document.getElementsByTagName("li");
			var big=document.getElementById("big");
			var imgs=big.getElementsByTagName("img");
			for(var i=0;i<lis.length;i++){
				lis[i].index=i;
				lis[i].function(){
					for(var j=0;j<lis.length;j++){
						lis[j].className="";
						imgs[j].className="";
					}
					this.className="light";
					imgs[this.index].className="show";
				}
			}
		</script>
	</body>
</html>