1 json的入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON数据格式</title>
</head>
<body>
<h2>JSON对象</h2>
<script type="text/javascript">
var person = {
firstname : "孙悟空",
lastname : "弼马温",
age : 18
}
document.write("姓名: " + person.firstname + ", 昵称: " + person.lastname + ", 年龄: " + person.age + "<br/>");
document.write(`姓名: ${person.firstname}, 昵称: ${person.lastname}, 年龄: ${person.age} <br/>`);
</script>
<hr/>
<h2>创建一个数组,其中每个元素是JSON对象</h2>
<script type="text/javascript">
var personArr = [
{
firstname : "孙悟空",
lastname : "弼马温",
age : 18
},
{
firstname : "猪八戒",
lastname : "天蓬元帅",
age : 19
},
{
firstname : "沙和尚",
lastname : "卷帘大将",
age : 28
}
];
for(let person of personArr) {
document.write(`姓名: ${person.firstname}, 昵称: ${person.lastname}, 年龄: ${person.age} <br/>`)
}
</script>
<hr/>
<h2>JSON对象,其中属性是集合</h2>
<script type="text/javascript">
var xiyouji = {
name : "唐僧",
age : 15,
brothers : [
{
firstname : "孙悟空",
lastname : "弼马温",
age : 18
},
{
firstname : "猪八戒",
lastname : "天蓬元帅",
age : 19
},
{
firstname : "沙和尚",
lastname : "卷帘大将",
age : 28
}
]
}
document.write(`师傅 姓名: ${xiyouji.name}, 年龄: ${xiyouji.age}<br/>`);
document.write("徒弟们: <br/>")
for(let personJson of xiyouji.brothers) {
document.write(`姓名: ${personJson.firstname}, 昵称: ${personJson.lastname}, 年龄: ${personJson.age} <br/>`)
}
</script>
</body>
</html>
2 json和字符串的相互转化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON有关的函数</title>
</head>
<body>
<script type="text/javascript">
var jsonStr = '{"name":"悟空", "age":18}';
document.write("类型:" + typeof(jsonStr));
var jsonObj = JSON.parse(jsonStr);
document.write("<hr/>");
document.write(jsonObj.name + " ====== " + jsonObj.age);
document.write("<hr/>");
var jsonStr2 = JSON.stringify(jsonObj);
document.write("jsonStr2 = " + jsonStr2 + "<br/>");
document.write("jsonStr2 类型:" + typeof(jsonStr2));
</script>
</body>
</html>
3 window.confirm 确认操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window中的方法</title>
</head>
<body>
<input type="button" value="删除订单" onclick="delOrder()" />
<script type="text/javascript">
function delOrder() {
var flag = confirm("2222222222 您确定要删除此订单吗?");
console.log(flag);
if(flag) {
document.write("用户选择的是确定! 执行删除操作!")
}else {
document.write("用户选择的是取消! 可能是用户误操作!")
}
}
</script>
</body>
</html>
4 location对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM:location对象</title>
</head>
<body>
<input type="button" onclick="location.reload()" value="刷新"> <br/>
<input type="button" onclick="history.back()" value="后退"> <br/>
<input type="button" onclick="history.go(-1)" value="后退"> <br/>
<script type="text/javascript">
console.log("当前页面地址: " + location.href);
let canshu = location.search;
console.log(canshu);
document.write(new Date().toLocaleString())
</script>
</body>
</html>
5 倒计时跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跳转</title>
</head>
<body>
<span id="counter">5</span>秒以后跳转
<script type="text/javascript">
var num = 5;
setInterval(function(){
if(num == 0) {
location.href = "http://www.baidu.com";
} else {
document.getElementById("counter").innerText = num;
}
num--;
}, 1000);
</script>
</body>
</html>
6 会动的时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>会动的时钟</title>
</head>
<body>
<input type="button" value="开始" id="btnBegin">
<input type="button" value="暂停" id="btnPause" disabled="disabled">
<hr/>
<h1 id="clock" style="color: darkgreen"></h1>
<script type="text/javascript">
var timer;
document.getElementById("btnBegin").onclick = function() {
timer = setInterval(function() {
document.getElementById("clock").innerText = new Date().toLocaleString();
}, 1000);
document.getElementById("btnBegin").disabled = true;
document.getElementById("btnPause").disabled = false;
}
document.getElementById("btnPause").onclick = function() {
clearInterval(timer);
document.getElementById("btnBegin").disabled = false;
document.getElementById("btnPause").disabled = true;
}
</script>
</body>
</html>
7 innerHtml 和 innerText的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>innerText和innerHTML的区别</title>
</head>
<body>
<input type="button" value="改内容" id="btn">
<hr/>
<span id="content1">xxxxxxx</span>
<span id="content2">xxxxxxx</span>
<script type="text/javascript">
document.getElementById("btn").onclick = function() {
document.getElementById("content1").innerText = "<h1 style='color:red'>32期 天生傲娇111</h1>";
document.getElementById("content2").innerHTML = "<h1 style='color:green'>32期 天生傲娇222</h1>";
}
</script>
</body>
</html>
8 dom的常用操作(查)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM:查找元素的方法</title>
<style>
table {
border-collapse: collapse;
width: 500px;
}
</style>
</head>
<body>
<input type="button" value="(通过标签名)给表格奇偶行添加不同的背景色" id="b1">
<hr/>
<table border="1">
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</table>
<script type="text/javascript">
document.getElementById("b1").onclick = function () {
var trObjArr = document.getElementsByTagName("tr");
for (let i = 0; i < trObjArr.length; i++) {
const trObj = trObjArr[i];
if(i%2==0) {
trObj.style.backgroundColor = "lightyellow";
}else {
trObj.style.backgroundColor = "lightblue";
}
}
}
</script>
<hr/>
<input type="button" value="(通过name属性)选中所有的商品" id="b2"/>
<hr/>
<input type="checkbox" name="product" >自行车
<input type="checkbox" name="product">电视机
<input type="checkbox" name="product">洗衣机
<script type="text/javascript">
document.querySelector("#b2").onclick = function() {
var productObjArr = document.getElementsByName("product");
for (const productObj of productObjArr) {
productObj.checked = true;
}
}
</script>
<hr/>
<input type="button" value="(通过类名)给a添加链接" id="b3"/>
<hr/>
<a class="company">传智播客</a>
<a class="company">传智播客</a>
<a class="company">传智播客</a>
<script type="text/javascript">
document.getElementById("b3").onclick = function () {
var companyObjArr = document.getElementsByClassName("company");
for (let i = 0; i < companyObjArr.length; i++) {
const companyObj = companyObjArr[i];
companyObj.href = "http://www.itcast.cn";
}
}
</script>
</body>
</html>
9 dom 增
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="myDiv"></div>
<script>
var str = "<a href='http://www.baidu.com'>百度</a>";
document.getElementById("myDiv").innerHTML = str;
</script>
</body>
</html>
10 二级联动
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>省市联动</title>
</head>
<body>
<select id="province">
<option>--请选择省份--</option>
</select>
<select id="city">
<option>--请选择城市--</option>
</select>
</body>
<script>
var provinces= ["广东省","湖南省","广西省"];
var cities = [["深圳","广州","东莞"],["长沙市","郴州市","湘潭市"],["南宁市","桂林市","柳州市"]];
var provinceStr = `<option>--请选择省份--</option>`;
for (let i = 0; i < provinces.length; i++) {
provinceStr += `<option value="${i}">${provinces[i]}</option>`;
}
document.getElementById("province").innerHTML = provinceStr;
document.getElementById("province").onchange = function () {
console.log(this.value);
var provinceVal = this.value;
var cityArr = cities[provinceVal];
var cityStr = `<option>--请选择城市--</option>`;
if(cityArr!=null && cityArr.length>0) {
for (let i = 0; i < cityArr.length; i++) {
cityStr += `<option value="${i}">${cityArr[i]}</option>`;
}
}
document.getElementById("city").innerHTML = cityStr;
}
</script>
</html>
11 正则写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则表达式</title>
</head>
<body>
<script type="text/javascript">
var reg1 = new RegExp("\\d{3}");
document.write("<hr/>")
var reg2 = new RegExp("^\\d{3}");
var reg4 = new RegExp("^\\d{3}$");
document.write(reg4.test("123") + "<br/>");
document.write(reg4.test("a123") + "<br/>");
document.write(reg4.test("123z") + "<br/>");
document.write(reg4.test("a123z") + "<br/>");
document.write("<hr/>");
var reg5 = /^\d{3}$/;
document.write(reg5.test("123") + "<br/>");
document.write(reg5.test("a123") + "<br/>");
document.write(reg5.test("123z") + "<br/>");
document.write(reg5.test("a123z") + "<br/>");
</script>
</body>
</html>
12 正则修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则表达式匹配模式</title>
</head>
<body>
<script type="text/javascript">
var reg1 = new RegExp("^cat$");
document.write(reg1.test("CAT") + "<br/>");
document.write(reg1.test("Cat") + "<br/>");
document.write("<hr/>");
var reg2 = new RegExp("^cat$", "i");
document.write(reg2.test("CAT") + "<br/>");
document.write(reg2.test("Cat") + "<br/>");
document.write("<hr/>");
var reg3 = /^cat$/;
document.write(reg3.test("CAT") + "<br/>");
document.write(reg3.test("Cat") + "<br/>");
document.write("<hr/>");
var reg4 = /^cat$/i;
document.write(reg4.test("CAT") + "<br/>");
document.write(reg4.test("Cat") + "<br/>");
</script>
</body>
</html>
13 注册案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>验证注册页面</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-size: 12px;
line-height: 20px;
}
.main {
width: 525px;
margin-left: auto;
margin-right: auto;
}
.hr_1 {
font-size: 14px;
font-weight: bold;
color: #3275c3;
height: 35px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #3275c3;
vertical-align: bottom;
padding-left: 12px;
}
.left {
text-align: right;
width: 80px;
height: 25px;
padding-right: 5px;
}
.center {
width: 280px;
}
.in {
width: 130px;
height: 16px;
border: solid 1px #79abea;
}
.red {
color: #cc0000;
font-weight: bold;
}
div {
color: #F00;
}
</style>
<script type="text/javascript">
function checkAll() {
var flag1 = checkUser();
var flag2 = checkMobile();
return flag1 && flag2;
}
function checkUser() {
let userVal = document.getElementById("user").value;
var reg = /[a-zA-Z]\w{3,15}/;
var flag = reg.test(userVal);
if(flag) {
document.getElementById("userInfo").innerHTML = `<img src="img/gou.png" width="20"/>`;
return true;
}else {
document.getElementById("userInfo").innerHTML = `用户名格式不对!`;
return false;
}
}
function checkMobile() {
let mobileVal = document.getElementById("mobile").value;
var reg = /^1[3456789]\d{9}$/;
var flag = reg.test(mobileVal);
if(flag) {
document.getElementById("mobileInfo").innerHTML = `<img src="img/gou.png" width="20"/>`;
return true;
}else {
document.getElementById("mobileInfo").innerHTML = `手机号格式不对!`;
return false;
}
}
</script>
</head>
<body>
<form action="server" method="post" id="myform" onsubmit="return checkAll()">
<table class="main" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/logo.jpg" alt="logo" /><img src="img/banner.jpg" alt="banner" /></td>
</tr>
<tr>
<td class="hr_1">新用户注册</td>
</tr>
<tr>
<td style="height:10px;"></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="left">用户名:</td>
<td class="center">
<input id="user" name="user" type="text" class="in" onblur="checkUser()"/>
<span id="userInfo" style="color:red"></span>
</td>
</tr>
<tr>
<td class="left">密码:</td>
<td class="center">
<input id="pwd" name="pwd" type="password" class="in" />
</td>
</tr>
<tr>
<td class="left">确认密码:</td>
<td class="center">
<input id="repwd" name="repwd" type="password" class="in"/>
</td>
</tr>
<tr>
<td class="left">电子邮箱:</td>
<td class="center">
<input id="email" name="email" type="text" class="in"/>
</td>
</tr>
<tr>
<td class="left">手机号码:</td>
<td class="center">
<input id="mobile" name="mobile" type="text" class="in" onblur="checkMobile()"/>
<span id="mobileInfo" style="color:red"></span>
</td>
</tr>
<tr>
<td class="left">生日:</td>
<td class="center">
<input id="birth" name="birth" type="text" class="in"/>
</td>
</tr>
<tr>
<td class="left"> </td>
<td class="center">
<input name="" type="image" src="img/register.jpg" />
</td>
</tr>
</table></td>
</tr>
</table>
</form>
</body>
</html>