JavaScript
弹框
<!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 onload="test()">
<p id="p" onclick="test2('js')">你好</p>
<img src="img/btn_reg.gif" onmouseover="test3()" onmouseout="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" onmouseover="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>
