面向对象1

最新推荐文章于 2022-05-13 15:53:36 发布

是数学系的小孩儿

最新推荐文章于 2022-05-13 15:53:36 发布

阅读量142

点赞数 3

分类专栏：前端学习记录文章标签： javascript css3 前端

本文链接：https://blog.csdn.net/qq_51082388/article/details/121061622

版权

前端学习记录专栏收录该内容

31 篇文章 0 订阅

订阅专栏

面向对象：
Date
gerFullYear
不了解内部原理，会使用功能，知道操作
Array
sort()
使用对象时，只关注对象提供的功能，不关注其内部细节，
面向对象编程OOP的特点
抽象：抓住核心问题
封装：不考虑内部实现，只考虑功能使用
继承：从已有对象上，继承出新的对象
多重继承（遗传）
多态
对象的组成：
方法：函数：过程、动态的
属性：变量：状态、静态的
1用对象
2写对象
this函数属于谁
object：没有功能
Date日期
Array存东西
RegExp正则

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			var obj=new Object();
			obj.name='blue';
			obj.qq='3363647862';
			obj.showName=function()
			{
				alert('蜜罐子:'+this.name);
			};
			obj.showQQ=function()
			{
				alert('亲爱的QQ号码:'+this.qq);
			};
			obj.showName();
			obj.showQQ();
		</script>
	</head>
	<body>
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#div1 input{background-color: aliceblue;}
			#div1 input.active{background-color: aqua;}
			#div1 div{width: 200px;height: 200px;background-color: brown;display: none;}
		</style>
		<script type="text/javascript">
		
			window.onload=function()
			{
				var oDiv=document.getElementById('div1');
				var aBtn=oDiv.getElementsByTagName('input');
				var aDiv=oDiv.getElementsByTagName('div');//选元素
				for(var i=0;i<aBtn.length;i++)
				{   aBtn[i].index=i;
					aBtn[i].onclick=function()
					{
						for(var i=0;i<aBtn.length;i++)
						{
							aBtn[i].className='';
							aDiv.style.display='none';
						}
						this.ClassName='active';
						aDiv[this.index].style.display='block';
					};
				};
			}
			
		</script>
	</head>
	<body>
		<div id="div1">
			<input class="active"type="button" name="" id="" value="aaa"/>
			<input type="button" name="" id="" value="bbb" />
			<input type="button" name="" id="" value="ccc" />
			<div id="" style=" display:block;">
				aaaa
			</div>

			<div id="">
				3333333333
			</div>
			<div id="">
				22222222222	
			</div>
		</div>
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#div1 input{background-color: aliceblue;}
			#div1 input.active{background-color: aqua;}
			#div1 div{width: 200px;height: 200px;background-color: brown;display: none;}
		</style>
		<script type="text/javascript">
		var aBtn=null;
		var aDiv=null;
			window.onload=function()
			{
				var oDiv=document.getElementById('div1');
				var aBtn=oDiv.getElementsByTagName('input');
				var aDiv=oDiv.getElementsByTagName('div');//选元素
				for(var i=0;i<aBtn.length;i++)
				{   aBtn[i].index=i;
					aBtn[i].onclick=fnClick;
				};
			}
			function fnClick()
			{
				for(var i=0;i<aBtn.length;i++)
				{
					aBtn[i].className='';
					aDiv.style.display='none';
				}
				this.ClassName='active';
				aDiv[this.index].style.display='block';
			};
		</script>
	</head>
	<body>
		<div id="div1">
			<input class="active"type="button" name="" id="" value="aaa"/>
			<input type="button" name="" id="" value="bbb" />
			<input type="button" name="" id="" value="ccc" />
			<div id="" style=" display:block;">
				aaaa
			</div>

			<div id="">
				bbbbbbbbbbbbbbbb
			</div>
			<div id="">
				cccccccccccccc
			</div>
		</div>
		
	</body>
</html>

是数学系的小孩儿

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
5
评论
面向对象1

面向对象：DategerFullYear不了解内部原理，会使用功能，知道操作Arraysort()使用对象时，只关注对象提供的功能，不关注其内部细节，面向对象编程OOP的特点抽象：抓住核心问题封装：不考虑内部实现，只考虑功能使用继承：从已有对象上，继承出新的对象多重继承（遗传）多态对象的组成：方法：函数：过程、动态的属性：变量：状态、静态的1用对象2写对象this函数属于谁object：没有功能Date日期Array存东西RegExp正则<!DOCTYPE
复制链接

扫一扫