标签：function name JavaScript write date var document

弹框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 1.弹出提示框
			// alert("aaa");

			// 2.带按钮的提示框
			var flag = confirm("是否需要删除？");
			if (flag) {
				document.write("删除学生信息！<br />");
			}

			// 3.带输入框和按钮的提示框
			var name = prompt("请输入你的姓名：", "张三"); // 张三为默认值
			document.write("姓名：" + name); // 点击取消时为null，点击确定，获取输入框中的值
		</script>
	</head>
	<body>
	</body>
</html>

数组

创建数组可直接赋值 var myarr=[1,3,5,”g”];

也可以通过var myarr = new Array();

js中数组不定长可以扩容也可以放任意类型数据

属性名
lengh	长度
方法名
Join()	通过特定字符拼成字符串
Sort()	排序
Push()	尾部添加元素
Pop()	尾部删除元素
Shift()	头部删除元素
Unshift()	头部添加元素
splice()	删除某一个元素

// 1.定义数组,js中的数组长度可变，不需要设置数组长度
var array = new Array();
// 给元素赋值
array[0] = 3;

// 2.初始化数组
var array2 = [0, "中午", 12.5, true];
// 给元素赋值
array[2] = 3;

// 遍历数组
for(var i=0;i<array.length;i++){
    document.write(array[i]);
}
for(var o in arr1){
    document.write(array[o]);
}

函数【重点】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/**
			 * 函数
			 * 	相当于java中的方法，完成某个功能的代码块
			 * 	语法：
			 * 		function 方法名([参数名,参数名2]){
						[return 值;]
					}
			 */
			// 无参数无返回值的函数
			// function print() {
			// 	document.write("姓名：张三<br />");
			// }
			// 调用
			// print();

			// 有参数无返回的函数，第二个print()会覆盖之前的print()
			function print(name) {
				// 利用全局变量arguments可以实现，arguments是类数组，通过判断传入参数的长度可以访问到参数列表的值。
				if (arguments.length == 0) {
					document.write("姓名：张三<br />");
				} else if (arguments.length == 1) {
					document.write("姓名：" + name + "<br />");
				}
			}
			//  调用
			print();
			//  调用
			print("小白");

			// 有参数有返回值的函数，不需要指定数据类型，直接通过return 值。
			function print2(name) {
				return "欢迎，" + name;
			}

			var message = print2("小红");
			document.write(message + "<br />");

			//  匿名函数
			/*
			var a = function() {
				//document.write(name);
				return "小白";
			};
			document.write("===" + a("aaa"));
			*/
			var a = function(name) {
				//document.write(name);
				return name;
			};
			document.write("---" + a("aaa"));

		</script>
	</head>
	<body>
	</body>
</html>

事件【重点】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/*
			js中的事件：当某个标签元素触发一个特定的事情，完成一个业务处理
				事件绑定的3要素：1.事件的载体（元素）  2.事件的类型  3.事件触发之后执行的函数
				onblur：元素失去焦点事件
				onsubmit：表单提交事件
				onclick：单击事件
				onchange：下拉列表的value变化事件
				onload：body中的标签加载完成之后触发
			*/
			function test() {
				var p = document.getElementById("p");
				console.log("当前页面所有的元素加载完成" + p.innerHTML); // innerHTML:获取元素的html内容,包含标签中嵌套的标签
				// alert("当前页面所有的元素加载完成");
			}

			function test2(name) {
				// document:doc文档对象
				// getElementById:通过标签id值获取标签对象
				var p = document.getElementById("p");
				// innerText:获取标签中的文本内容
				var text = p.innerText;
				console.log(text + "，" + name)
			}

			function test3() {
				console.log("图片onmouseover事件")
			}

			function test4() {
				console.log("图片onmouseout事件")
			}

			function clearValue(obj) { // obj:出发事件的元素对象
				console.log("onfocus事件");
				var value = obj.value;
				if (value == 'zhangsan') {
					obj.value = "";
				}
			}

			function checking(obj) {
				var value = obj.value;
				if (value == "") {
					document.getElementById("usernamespan").innerHTML = "请输入用户名！";
				} else {
					document.getElementById("usernamespan").innerHTML = "";
				}
			}

			function changeValue(obj) {
				console.log(obj.value);
			}

			function checkingALL() {
				if (document.getElementById("username").value == "") {
					document.getElementById("usernamespan").innerHTML = "请输入用户名！";
					return false; // 防止表单提交
				}
				return true;
			}
		</script>
	</head>
	<body>
		<body onl oad="test()">
			<p id="p" onclick="test2('js')">你好</p>
			<img src="img/btn_reg.gif" onm ouseover="test3()" onm ouseout="test4()" />
			<form id="myfrm" action="https://www.baidu.com" method="post" onsubmit="return checkingALL()">
				<table border="1px" width="500px" align="center">
					<tr>
						<td align="right" width="150px">
							<!-- 
									label：将文本内容和表单标签绑定在一起
									for:标签的Id值，点击label中的文本时，会将Id值对应的标签获取到焦点
								 -->
							<label for="username">用户名：</label>
						</td>
						<td>
							<input onfocus="clearValue(this)" onblur="checking(this)" type="text" name="username" id="username" size="10"
							 maxlength="7" value="zhangsan" />
							<span id="usernamespan" style="color: red;"></span>
						</td>
					</tr>
					<tr>
						<td align="right">
							<label for="password">密码：</label>
						</td>
						<td>
							<input type="password" id="password" name="password" size="10" maxlength="16" onfocus="clearValue(this)" />
						</td>
					</tr>
					<tr>
						<td align="right">
							性别：
						</td>
						<td>
							<input type="radio" name="sex" value="男" checked="checked" /> 男
							<input type="radio" name="sex" value="女" /> 女
						</td>
					</tr>
					<tr>
						<td align="right">
							爱好：
						</td>
						<td>
							<input type="checkbox" name="hobby" value="打篮球" checked="checked" />打篮球
							<input type="checkbox" name="hobby" value="看书" />看书
							<input type="checkbox" name="hobby" value="看电影" />看电影
						</td>
					</tr>
					<tr>
						<td align="right">
							籍贯：
						</td>
						<td>
							<select name="area" id="province" onchange="changeValue(this)">
								<option value="湖北">湖北</option>
								<option value="湖南" selected="selected">湖南</option>
								<option value="河北">河北</option>
								<option value="河南">河南</option>
							</select>
							<select name="area" id="city">
								<option>长沙</option>
								<option>岳阳</option>
							</select>
						</td>
					</tr>
					<tr>
						<td align="right">
							<label for="jieshao">自我介绍：</label>
						</td>
						<td>
							<textarea name="jieshao" id="jieshao" rows="5" cols="7"></textarea>
						</td>
					</tr>
					<tr>
						<td colspan="2" align="center">
							<input type="submit" value="注册" />
							<input type="reset" value="重置" />
						</td>
					</tr>
				</table>
			</form>
		</body>
</html>

js中的常用对象

String

字符串对象中包含很多字符串处理方法，跟java类似，常用方法：

IndexOf：查找指定字符

subString：截取字符串

Substr：截取字符串

Split：分割

toUppercase ：转大写

Math

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// Math：数学运算类
			var number = Math.random(); // 生成0-1之间的小数
			document.write(number + "<br />");

			number = parseInt(Math.random() * 10 + 1);
			document.write(number + "<br />");

			// Math.round();  //四舍五入。
			number = Math.round(23.78);
			document.write(number + "<br />");
		</script>
	</head>
	<body>
	</body>
</html>

Date

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// Math：数学运算类
			var number = Math.random(); // 生成0-1之间的小数
			document.write(number + "<br />");

			number = parseInt(Math.random() * 10 + 1);
			document.write(number + "<br />");

			// Math.round();  //四舍五入。
			number = Math.round(23.78);
			document.write(number + "<br />");

			// 获取系统时间
			var date = new Date();
			document.write(date + "<br />");
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var day = date.getDate();
			document.write(year + "-" + month + "-" + day + "<br />");
			var h = date.getHours();
			var m = date.getMinutes();
			var s = date.getSeconds();
			document.write(year + "-" + month + "-" + day + " " + h + ":" + m + ":" + s + " <br / > ");
		</script>
	</head>
	<body>
	</body>
</html>

Javascript高级

JS对象的组成

ECMAscript对象：js中的核心对象。基础语法（String、Number、Object、Array...）

ECMAScript定义了脚本语言的所有属性、方法和对象

包括语法、类型、关键字、保留字、运算符、对象等

除了JavaScript外，同时也是Nombas的ScriptEase和Flash脚本ActionScript的基础

DOM对象：dom页面标签元素对象

Js中将整个文档对象（html文件）描述成树状模型结构，有元素节点、属性节点、文档节点等等。节点之间有父子关系 js可以通过描述出的节点及关系，动态的操作节点和节点属性。
BOM对象：windom对象

Js可对浏览器窗口进行访问和操作

例如：弹出新的浏览器窗口，移动、关闭浏览器窗口及调节浏览器窗口大小，WEB浏览器详细的定位对象

一、DOM对象【重点】

2.1、通过document获取对象

document：页面的DOM对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function show() {
				// 通过Id：获取单个的元素
				var userName = document.getElementById("username");
				// 获取元素的value值
				var usernamevalue = userName.value;
				alert("账号：" + usernamevalue);

				// 通过name获取元素
				var aihao = document.getElementsByName("aihao");
				// alert(aihao[0].value);
				for (var i = 0; i < aihao.length; i++) {
					var ai = aihao[i];
					if (ai.checked == true) {
						alert(ai.value);
					}
				}

				// 通过标签名获取元素
				var inputes = document.getElementsByTagName("input");
				for (var i = 0; i < inputes.length; i++) {
					var input = inputes[i];
					alert(input.value);
				}
			}
		</script>
	</head>
	<body>
		<form action="#" method="get">
			账号：<input type="text" name="username" id="username" value="11" size="15" maxlength="3" placeholder="aa" placeholder="请输入账号" />
			<br>
			密码：<input type="password" name="password" id="password" size="15" maxlength="16" placeholder="请输入密码" />
			<br>
			性别：
			<input id="man" type="radio" name="sex" value="男" checked="checked" /><label for="man"> 男 </label>
			<label><input type="radio" name="sex" value="女" /> 女</label>
			<br />
			爱好：
			<input type="checkbox" name="aihao" value="打篮球" /> 打篮球
			<input type="checkbox" name="aihao" value="吃饭" /> 吃饭
			<input type="checkbox" name="aihao" value="睡觉" /> 睡觉
			<input type="checkbox" name="aihao" value="打豆豆" /> 打豆豆
			<br />
			地址：
			<select name="address">
				<option value="湖北" selected="selected">湖北</option>
				<option value="湖南">湖南</option>
			</select>
			<br />
			生日：
			<input type="date" />
			<input type="datetime-local" />
			<br>
			图像：
			<input type="file" />
			<br>
			取色器：
			<input type="color" />
			<br />
			自我介绍：
			<textarea name="jieshao" cols="12" rows="7"></textarea>
			<br />
			<input type="submit" value="登录" />
			<input type="button" value="普通按钮" onclick="show()" />
			<input type="reset" value="重置" />
			<input type="image" src="img/1.jpg" width="10px" height="15px" />
		</form>
	</body>
</html>

通过标签的层次结构获取标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/**
			 *根据节点层次关系获取节点（属性 不是方法）
				parentNode：返回节点的父节点
				childNodes：返回子节点集合,childNodes[i]
				firstElementChild：返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
				lastElementChild： 返回节点的最后一个子节点
				nextElementSibling：下一个节点
				previousElementSibling：上一个节点
			 */
			function show() {
				var li = document.getElementById("zhiling");
				var parentNode = li.parentNode;
				alert(parentNode);
			}
		</script>
	</head>
	<body>
		<section id="news">
			<header>京东快报<a href="#">更多 > </a></header>
			<ul>
				<li onclick="show(this)" id="zhiling"><a href="#">志玲姐姐：墨镜300减30</a></li>
				<li><a href="#">京东无锡馆正式启动</a></li>
				<li><a href="#">99元抢平板！品牌配件199-100</a></li>
				<li><a href="#">节能领跑京东先行</a></li>
				<li><a href="#">高洁丝实力撩货，领券五折</a></li>
			</ul>
		</section>
	</body>
</html>

1.2、操作dom对象的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				font-size: 12px;
				font-family: "Arial", "微软雅黑";
				line-height: 25px;
			}

			div {
				padding: 5px;
				text-align: center;
			}

			div span {
				display: block;
			}
		</style>
		<script type="text/javascript">
			function changerImg(type) {
				// 1.获取img对象
				var img = document.getElementById("image");
				if (type == 0) { // 判断触发事件的按钮是哪一个,type=0==>我和狗狗一起活下来
					// 2.给img对象设置src属性值
					img.setAttribute("src", "img/dog.jpg");
					img.setAttribute("alt", "我和狗狗一起活下来");
				} else { // 判断触发事件的按钮是哪一个,type=1==>灰霾来了怎么办
					// 2.给img对象设置src属性值
					img.setAttribute("src", "img/mai.jpg");
					img.setAttribute("alt", "灰霾来了怎么办");
				}
			}

			function showImg() {
				// 1.获取img对象
				var img = document.getElementById("image");
				// 2.获取img对象的alt属性
				console.log(img.getAttribute("alt"));
			}
		</script>
	</head>
	<body>
		<p>
			选择你喜欢的书：
			<input type="radio" value="0" name="book" onclick="changerImg(0)">我和狗狗一起活下来
			<input type="radio" value="1" name="book" onclick="changerImg(1)">灰霾来了怎么办
		</p>
		<div><img src="" alt="" id="image" onm ouseover="showImg()"><span></span></div>
	</body>
</html>

1.3、节点操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function changeImg() {
				// 1.创建img元素对象
				// createElement("标签名"):是document
				var img = document.createElement("img"); // createElement:属于document对象的方法
				img.setAttribute("src", "img/dog.jpg");
				// 2.将img元素对象追加到标签中,才会在浏览器中显示
				// appendChild(元素对象):元素对象的函数,将创建的元素对象追加到元素对象的最后,不会覆盖之前的内容,创建的元素为元素对象的子元素
				// document.getElementById("imgDiv").appendChild(img);
				var div = document.getElementById("imgDiv");
				// insertBefore(newnode,oldnode):oldnode的父级节点来调用insertBefore,将newnode插入到oldnode之前
				div.parentNode.insertBefore(img, div);
			}
		</script>
	</head>
	<body>
		<p>
			选择你喜欢的书：
			<input onclick="changeImg()" type="radio" value="0" name="book">我和狗狗一起活下来
			<input onclick="changeImg()" type="radio" value="1" name="book">灰霾来了怎么办
		</p>
		<div id="imgDiv"></div>
	</body>
</html>

1.4、节点删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
				font-size: 12px;
			}

			ul,
			li {
				list-style: none;
			}

			li {
				float: left;
				text-align: center;
				width: 140px;
			}
		</style>
		<script type="text/javascript">
			function del() {
				var delNode = document.getElementById("first");
				// remove():删除当前的节点对象
				delNode.remove();
			}
		</script>
	</head>
	<body>
		<ul>
			<li>
				<img src="img/f01.jpg" id="first">
				<p><input type="button" value="删除我吧" onclick="del()"></p>
			</li>
		</ul>
	</body>
</html>

1.5、操作table

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function insertTr() {
				// HTMLTableElement
				var table = document.getElementById("userTable"); // 获取id为userTable的HTMLTableElement对象
				// alert(table);
				console.log(typeof(table) + table);
				console.log(table);
				// 获取table中所有的行
				var trs = table.rows; // table.rows:tr的集合
				console.log(trs);
				// 获取table中某一行所有的单元格
				var trCell = trs[0].cells;
				console.log(trCell);
				// 在table中添加一行
				var tr = table.insertRow();
				// 在tr中添加td(单元格)
				tr.insertCell().innerHTML = "aaa";
				tr.insertCell();
			}

			function deleteTr() {
				// HTMLTableElement
				var table = document.getElementById("userTable"); // 获取id为userTable的HTMLTableElement对象
				// 删除第二行
				table.deleteRow(1);
			}
		</script>
	</head>
	<body>
		<input type="button" value="添加行" onclick="insertTr()" />
		<input type="button" value="删除行" onclick="deleteTr()" />
		<br /><br />
		<table border="1" cellspacing="0" cellspacing="0" id="userTable">
			<tr>
				<td width="55px">张三</td>
				<td width="30px">男</td>
			</tr>
		</table>
	</body>
</html>

二、window对象

2.1、open、Close

window.open("地址"，”标题“，”窗口的属性设置，height=高度,width=宽度,top=离上面的边距,left=离左边的边距“);

window.close()：关闭当前的窗体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function openOther() {
				// 打开一个新的窗口
				window.open("1.弹框.html", "open", "height=300px,width=200px,top=20px,left=30px");
			}

			function closeThis() { // 函数名不要和其他对象中的方法相同
				// 关闭窗口
				window.close();
			}
			var i = 0;
			// setTimeout(function() {
			// 	document.write(i);
			// 	i++;
			// }, 1000);

			// setInterval(function() {
			// 	document.write(i);
			// 	i++;
			// }, 1000);
		</script>
	</head>
	<body>
		<input type="button" onclick="openOther()" value="打开新窗口" />
		<input type="button" onclick="closeThis()" value="关闭新窗口" />
	</body>
</html>

2.2、定时器

setTimeout：过多少秒调用一次方法

setInterval：间隔多少秒调用一次方法

clearTimeout：停止某个setTimeout方法

clearInterval：停止某个setInterval方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var i = 0;
			// setTimeout(function() {
			// 	document.write(i);
			// 	i++;
			// }, 1000);

			// setInterval(function() {
			// 	document.write(i);
			// 	i++;
			// }, 1000);

			function showMessage() {
				document.write(i)
			}
			// setTimeout("showMessage()", 1000);
			// setTimeout(showMessage,1000);

			var timeId = 0;
			// 显示系统时间
			function showTime() {
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth();
				var day = date.getDate();
				var hour = date.getHours();
				var minutes = date.getMinutes();
				var second = date.getSeconds();

				var times = document.getElementById("time");
				times.innerHTML = year + "年" + month + "月" + day + "日 " + hour + ":" + minutes + ":" + second;

				timeId = setTimeout(showTime, 1000);
			}

			timeId = setTimeout(showTime, 1000);


			var timeId2 = 0;
			// 显示系统时间
			function showTime2() {
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth();
				var day = date.getDate();
				var hour = date.getHours();
				var minutes = date.getMinutes();
				var second = date.getSeconds();

				var times = document.getElementById("time2");
				times.innerHTML = year + "年" + month + "月" + day + "日 " + hour + ":" + minutes + ":" + second;

				timeId2 = setTimeout(showTime2, 1000);
			}

			timeId2 = setTimeout(showTime2, 1000);

			function stop() {
				clearTimeout(timeId);
			}

			function stop2() {
				clearTimeout(timeId2);
			}
		</script>
	</head>
	<body>
		<div id="time"></div>
		<input type="button" onclick="stop()" value="停止time" />
		<div id="time2"></div>
		<input type="button" onclick="stop2()" value="停止time2" />
	</body>
</html>

三、location、hostory对象

Location：地址栏对象，就是window中的location属性

Hostory：历史记录对象，是window中的hostory属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function next() {
				// history.forward();
				window.history.go(1);
			}

			function getUrl() {
				location.href = "2.2localhost、hostory.html";
			}

			function reload() {
				// 刷新页面
				location.reload();
			}
		</script>

	</head>
	<body>
		<button onclick="reload()">刷新</button>
		<a href="javascript:void(0)" onclick="getUrl()">2.2</a>
		<a href="javascript:void(0)" onclick="next()">下一页</a>

	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function backOne() {
				// window.history.back(); // 上一页
				window.history.go(-1);
			}
		</script>
	</head>
	<body>
		<a href="javascript:void(0)" onclick="backOne()">上一页</a>
	</body>
</html>

四、正则表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function checking() {
				var username = document.getElementById("username");
				// 制定正则表达式的规则
				// var reg = /[abc]/;// 验证字符串中值要有[abc]就符合要求
				// var reg = /^[abc]$/;// [abc]只匹配一次
				// var reg = /^[a-z][a-z0-9]/;// 首字母是字母,第二个字符要是[a-z0-9]

				// 用户名:字母/数字,首字母是字母,长度为6-10
				// var reg = /^[a-z][a-z0-9]{5,9}$/;
				//身份证:18位,前17是数字,可能是数字,字母
				// var reg = /^[0-9]{17}[0-9x]$/;
				// 邮箱:字母/数字11位,@,邮箱类型{5},.,com|cn
				// var reg = /^\w{5,11}@{1}[0-9a-z]{2,5}.{1}(com|cn)$/;
				// 中文:[\u4e00-\u9fa5]
				// var reg = /^[\u4e00-\u9fa5]{2,4}$/;
				// 验证手机号:1[3，5，8，9，7][0-9]
				var reg = /^1[3|5|7|8|9][0-9]{9}$/;

				// 获取usernamevalue值
				var value = username.value;
				// 验证username是否符合reg
				var flag = reg.test(value);
				console.log(flag);
			}
		</script>
	</head>
	<body>
		<input type="text" id="username" name="username" onblur="checking()" /> <span id="usernamespan" style="color: red;"></span>
	</body>
</html>

五、JSON

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 定义个json数据（存储一个用户的信息）
			var heroJson = {
				"heroName": "小乔",
				"heroType": "法师",
				"gongji": "法术攻击力+4.2"
			};

			// 输出heroJson的值
			console.log("英雄名称：" + heroJson.heroName + "，英雄类型：" + heroJson.heroType + "，攻击：" + heroJson.gongji);

			var heroJson = {
				"heroName": "小乔",
				"heroType": "法师",
				"gongji": "法术攻击力+4.2",
				"pifu": ["青蛇", "丁香结", "天鹅之梦"]
			};
			// 输出heroJson的值
			console.log("英雄名称：" + heroJson.heroName + "，英雄类型：" + heroJson.heroType + "，攻击：" +
				heroJson.gongji + "，皮肤：" + heroJson.pifu + "，使用的皮肤：" + heroJson.pifu[2]);

			var heroJson = [{
				"heroName": "小乔",
				"heroType": "法师",
				"gongji": "法术攻击力+4.2",
				"pifu": ["青蛇", "丁香结", "天鹅之梦"]
			}, {
				"heroName": "猪八戒",
				"heroType": "坦克",
				"gongji": "法术攻击力+4.2",
				"pifu": ["青蛇", "丁香结", "天鹅之梦"]
			}, {
				"heroName": "马超",
				"heroType": "刺客",
				"gongji": "法术攻击力+4.2",
				"pifu": ["青蛇", "丁香结", "天鹅之梦"]
			}, {
				"heroName": "鲁班七号",
				"heroType": "射手",
				"gongji": "法术攻击力+4.2",
				"pifu": ["青蛇", "丁香结", "天鹅之梦"]
			}, {
				"heroName": "瑶",
				"heroType": "辅助",
				"gongji": "法术攻击力+4.2",
				"pifu": ["青蛇", "丁香结", "天鹅之梦"]
			}];
			heroJson.forEach(function(obj, index) {
				console.log(index, obj, obj.heroName, obj.heroType);
			});

			var heroList =
				'[{"heroName": "小乔","heroType": "法师","gongji": "法术攻击力+4.2","pifu": ["青蛇", "丁香结", "天鹅之梦"]}, {"heroName": "猪八戒","heroType": "坦克","gongji": "法术攻击力+4.2","pifu": ["青蛇", "丁香结", "天鹅之梦"]}, {"heroName": "马超","heroType": "刺客","gongji": "法术攻击力+4.2","pifu": ["青蛇", "丁香结", "天鹅之梦"]}]';

			// 将heroList字符串转为json的数据格式
			var json = eval(heroList);
			json.forEach(function(obj, index) {
				console.log("json：", index, obj, obj.heroName, obj.heroType);
			});

			// 练习：解析以下两个变量的值，将数据显示在table中
			/**
			 * 
			var heroJson = [{
				"heroName": "小乔",
				"heroType": "法师",
				"gongji": "法术攻击力+4.2",
				"pifu": [{name:"青蛇",price:168},{name:"丁香结",price:166},{name:"天鹅之梦",price:128}]
			}, {
				"heroName": "猪八戒",
				"heroType": "坦克",
				"gongji": "法术攻击力+4.2",
				"pifu": [{name:"青蛇",price:168},{name:"丁香结",price:166},{name:"天鹅之梦",price:128}]
			}];
			
			var heroJson = {
			userList:[{
				"heroName": "小乔",
				"heroType": "法师",
				"gongji": "法术攻击力+4.2",
				"pifu": [{name:"青蛇",price:168},{name:"丁香结",price:166},{name:"天鹅之梦",price:128}]
			}, {
				"heroName": "猪八戒",
				"heroType": "坦克",
				"gongji": "法术攻击力+4.2",
				"pifu": [{name:"青蛇",price:168},{name:"丁香结",price:166},{name:"天鹅之梦",price:128}]
			}],
			nowPage:1,
			pageSize:3
			};
			 */
		</script>
	</head>
	<body>
		<table>
			<tr>
				<td>英雄名称</td>
				<td>英雄类型</td>
				<td>攻击</td>
				<td>皮肤</td>
			</tr>
		</table>
		<br />
		<table>
			<thead>
				<tr>
					<th>英雄名称</th>
					<th>英雄类型</th>
					<th>攻击</th>
					<th>皮肤</th>
				</tr>
			</thead>
			<tbody></tbody>
			<tfoot>
				<tr>
					<td colspan="4">
						<!-- 分页信息在这里显示 -->
					</td>
				</tr>
			</tfoot>

		</table>
	</body>
</html>

标签：function,name,JavaScript,write,date,var,document
From： https://www.cnblogs.com/Liku-java/p/17019527.html

JavaScript

弹框

数组