前端知识

最新推荐文章于 2024-08-15 15:54:59 发布

圆角50%

最新推荐文章于 2024-08-15 15:54:59 发布

阅读量171

点赞数

分类专栏：学习笔记 js 文章标签： web js

本文链接：https://blog.csdn.net/jy185445/article/details/84595356

版权

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

7 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

js有关的demo

一、创建JS对象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学习js</title>
	<style>
#content1,#content2{
	width: 200px;
	border:1px solid red;
}
</style>
</head>
<body>
	<h1>一、创建JavaScript对象</h1>
	<h3>1.定义并创建对象的实例  </h3>
	<div id="content1"></div>
	<h3>2.使用函数来定义对象，然后创建新的对象实例</h3>
	<div id="content2"></div>
</body>
<script>
<!-- 1.定义并创建对象的实例 -->
var student =new Object();
student.class="03";
student.id="04";
student.name="Jane";
student ={class:"04",id:"04",name:"Jane"};
document.getElementById("content1").innerHTML=(student.class+student.id+"是"+student.name);

// 2.使用函数来定义对象，然后创建新的对象实例
// classid,sid,name要与class、id区分开
function classmate(classid,sid,name){
	this.classid=classid;
	this.sid=sid;
	this.sname=name;
}
newStudent=new classmate("01","01","李白");
document.getElementById("content2").innerHTML=(newStudent.classid+newStudent.sid+"是"+newStudent.sname);
</script>
</html>

实现结果：
在这里插入图片描述
二、JavaScript for…in循环

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学习js</title>
	<style>
</style>
</head>
<body>
	<h2>JavaScript  for...in 循环</h2>
	<h4>for ..in循环中的代码块将针对每个属性执行一次</h4>
	<p>点击下面的按钮，循环遍历对象"person"的属性</p>
	<input type="button" onclick="information();" value="点击这里">
	<p id="demo"></p>
</body>
<script>
	function information(){
		var x;
		var txt="";
		var person={fname:"曹操",dynasty:"东汉末年",job:"丞相"};
		for(x in person){
			txt=txt+person[x];
		}
		// for(variable in object){
		// 	执行的代码。。。
		// }
		document.getElementById("demo").innerHTML=txt;
	}
</script>
</html>

实现结果：
在这里插入图片描述