大家好，欢迎来到IT知识分享网。

什么是对象？

JavaScript除了原始值，一切皆对象。

原始值指的是没有属性或方法的值。

原始数据类型指的是拥有原始值的数据。

JavaScript 定义了 5 种原始数据类型：

string
number
boolean
null
undefined

变量只能包括一个值，而对象可以通过键值对形式包括多个值。

let a = "hello"; console.log(a);

let info = { name:"blackcat", age:38, money:100 }; console.log(info["name"], info.name); console.log(info["age"], info.age); console.log(info["money"], info.money);

对象添加函数：

let info = { name:"blackcat", age:38, money:100, add_money: function(x){ this.money += x; } }; info.add_money(20); console.log(info["money"], info.money); info["add_money"](30); console.log(info["money"], info.money);

通过对象构造函数创建对象：

let info = new Object(); info.name = "blackcat"; info.age = 28; console.log(info);

你选中了哪个区域？

要求：如图所示，有4个区域，鼠标点击其中一个区域，弹出这个区域的序号。

<div id="a">1</div> <div id="b">2</div> <div id="c">3</div> <div id="d">4</div>

<style> div { display: inline-block; width: 200px; height: 200px; background-color: pink; color: white; font-size: 20px; line-height: 80px; text-align: center; } #a { background: lightgreen; } #b { background: skyblue; } #c { background: #ccc; } </style>

let divs = document.getElementsByTagName("div"); for(let i = 0; i < divs.length; i++){ divs[i].index = i + 1; divs[i].onclick = function(){ console.log(this); alert(this.index); } }

this代表当前点击对象，divs[i].index = i + 1给每一个对象绑定对应数字编号。

男孩女孩选项卡

要求：点击boy显示男孩图片，点击girl显示女孩图片。

<!DOCTYPE html><html>	<head>		<meta charset="utf-8"/>		<title>boy and girl</title>		<style>			.wrap {				width: 500px;				height: 480px;				margin: 100px auto;				position: relative;			}			span {				display: inline-block;				width: 220px;				height: 50px;				line-height: 50px;				text-align: center;				color: rgba(45, 199, 15, 0.466);				font-size: 20px;			}			img {				position: absolute;				bottom: 20px;				left: 25px;				display: none;				width: 420px;				height: 400px;			}			span:hover {				border-bottom: 2px solid rgb(33, 168, 6);				border-radius: 20px;			}			.active {				display: block;			}		</style>	</head>	<body>		<div class="wrap">			<span>boy</span>			<span>girl</span>			<img src="images/boy.jpg"/>			<img src="images/girl.jpg"/>		</div>		<script>			/*完成如图所示效果*/			let btn = document.getElementsByTagName("span");			let arr = document.getElementsByTagName("img");			arr[0].className = "active";			for(let i = 0; i < btn.length; i++){				btn[i].index = i;				btn[i].onclick = function(){					arr[0].className = arr[1].className = "";					arr[this.index].className = "active";				}			}		</script>	</body></html>

多个选项卡切换

要求：点击其中一个选项卡，选项卡变为蓝色背景，且下方显示该选项卡上的文字。

<script> let liArr = document.getElementsByTagName("li"); let spanArr = document.getElementsByTagName("span"); spanArr[0].className = "show"; liArr[0].className = "current"; for (let i = 0; i < liArr.length; i++) { liArr[i].index = i; liArr[i].onclick = function() { for (let j = 0; j < liArr.length; j++) { liArr[j].className = spanArr[j].className = ""; } liArr[this.index].className = "current"; spanArr[this.index].className = "show"; } } </script>

Javascript对象和选项卡实现

什么是对象？

你选中了哪个区域？

男孩女孩选项卡

多个选项卡切换

相关推荐

发表回复