WEB03_JS、WEB04_JS篇

本是古典何须时尚 2022-03-22 20:48 133阅读 0赞

# 今日任务 #

1.  使用JS完成简单的数据校验(document对象、事件、函数)
2.  使用JS完成图片轮播效果(事件、定时操作)
3.  使用JS完成页面定时弹出广告(总结BOM对象以及JS的引入方式)
4.  使用JS完成表单的校验(总结常用事件)  
    教学导航  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70]

# 一、使用JS完成注册表单数据校验 #

## 1.需求分析 ##

用户在进行注册的时候会输入一些内容，但是有些用户会输入一些不合法的内容，这样会导致服务器的压力过大，此时我们需要对用户输入的内容进行一个校验(前端校验和后台校验)，前端校验防君子不防小人。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 1]

## 2.技术分析 ##

### 2.1 javaScript的介绍 ###

![在这里插入图片描述][20190123133059404.png]  
JavaScript与java没有关系(雷锋和雷峰塔)，它不是编程语言(脚本语言）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 2]

### 2.2 javaScript的作用？ ###

HTML： 它是整个网站的骨架。

CSS： 它是对整个网站骨架的内容进行美化(修饰)

Javascript： 它能够让整个页面具有动态效果。

### 2.3 javaScript的组成部分 ###

![在这里插入图片描述][20190123133231920.png]  
ECMAScript: 它是javascript的核心(语法、变量、数据类型、语句、函数……)

DOM: document object model 整个文档对象

BOM: 浏览器对象

### 2.4 javaScript语法 ###

1）区分大小写

2）变量是弱类型的(String str=”aaa” ,var str=”123”?

3）每行结尾的分号可有可无(建议大家写上)

4）注释与java、php等语言相同。

### 2.5 javaScript的变量 ###

变量可以不用声明，变量是弱类型。统一使用var来定义！定义变量的时候不要使用关键字和保留字。

### 2.6 javaScript数据类型 ###

JavaScript数据类型分为原始数据类型和引用数据类型  
原始数据类型：  
string、number、boolean、null、undefined  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 3]  
引用数据类型：  
![在这里插入图片描述][20190123133504100.png]

### 2.7 javaScript运算符 ###

其它运算符与java大体一致，需要注意其等性运算符。

==     它在做比较的时候会进行自动转换。
    
    ===   它在做比较的时候不会进行自动转换。

### 2.8 javaScript语句 ###

所有语句与java大体一致。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 4]

### 2.9 获取元素内容 ###

获取元素

document.getElementById(“id名称”);   //如果是一个变量，不需要引号，如果是一个值，那么需要使用引号。

获取元素里面的值

document.getElementById(“id名称”).value;

### 2.10 javaScript事件 ###

表单提交事件：onsubmit

### 2.11 javaScript的输出 ###

警告框： alert();

向页面指定位置写入内容： innerHTML(属性)

向页面写入内容： document.write(“”);

## 3.步骤分析 ##

第一步：确定事件(**onsubmit**)并为其绑定一个函数

第二步：书写这个函数(获取用户输入的数据)

第三步：对输入的数据进行判断(非空)

第四步：如果输入的内容为空，给出错误提示信息(alert),不让表单提交

第五步：如果输入的内容合法，让表单提交。

### 问题：如何控制表单提交？ ###

关于事件(onsubmit)：一般用于表单提交的位置,那么需要在定义函数的时候给出一个返回值。onsubmit = returm checkForm()

## 4.代码实现 ##

Html部分代码：  
为表单绑定一个事件

对需要校验的输入项目定义id

Javascript部分代码

完整代码：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>获取元素</title>
    		<script>
    			window.onload = function(){
    				//获取页面指定位置的元素
    				var uEle = document.getElementById("username");
    				//alert(uEle);
    				//获取页面指定位置的内容（值）
    				var uValue = uEle.value;
    				alert(uValue);
    			}
    		</script>
    	</head>
    	<body>
    		用户名:<input type="text" name="username" id="username"/><br />
    		密码:  <input type="password" name="password" />
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 5]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>注册页面</title>
    		<script>
    			function checkForm(){
    				//测试一下事件响应是否成功
    				//alert("aa");
    				/*校验用户名*/
    				//1.获取用户输入的数据
    				var uValue = document.getElementById("user").value;
    				//alert(uValue);//打印用户框输入的数据,证明拿到了用户框数据
    				if(uValue == ""){
    					//2.给出错误提示信息
    					alert("用户名信息不能为空");
    					return false;
    				}
    				
    				/*校验密码*/
    				var pValue = document.getElementById("password").value;
    				if(pValue == ""){
    					alert("密码不能为空！");
    					return false;
    				}
    				
    				/*校验确认密码*/
    				var rpValue = document.getElementById("repassword").value;
    				if(rpValue != pValue){
    					alert("两次密码输入不一致");
    					return false;
    				}
    				
    				/*校验邮箱*/
    				var eValue = document.getElementById("email").value;
    				//匹配邮箱(正则表达式)：
    				///^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
    				if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
    					alert("邮箱格式不正确");
    					return false;
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
    			
    			<tr>
    				<td>
    					
    					<table border="1px" width="100%">
    						<tr height="50px">
    							<td width="33.3%">
    								<img src="../img/logo2.png" height="47px" />
    							</td>
    							<td width="33.3%">
    								<img src="../img/header.png" height="47px" />
    							</td>
    							<td width="33.3%">
    								<a href="#">登录</a>
    								<a href="#">注册</a>
    								<a href="#">购物车</a>
    							</td>
    						</tr>
    					</table>
    				</td>
    			</tr>
    			
    			<tr height="50px">
    				<td bgcolor="black">
    					   &nbsp
    					<a href="#">
    						<font size="5" color="white">首页</font>
    					</a>     
    					<a href="#">
    						<font color="white">手机数码</font>
    					</a>     
    					<a href="#">
    						<font color="white">电脑办公</font>
    					</a>     
    					<a href="#">
    						<font color="white">鞋靴箱包</font>
    					</a>     
    					<a href="#">
    						<font color="white">家用电器</font>
    					</a>
    				</td>
    			</tr>
    			
    			<tr>
    				<td height="600px" background="../img/regist_bg.jpg">
    					
    					
    
    					<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
    						<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
    							<tr height="40px">
    								<td colspan="2">
    									<font size="4">会员注册</font>   USER REGISTER
    								</td>
    							</tr>
    							<tr>
    								<td>
    									用户名
    								</td>
    								<td>
    									<input type="text" name="user" size="45px" id="user"/>
    								</td>
    							</tr>
    							<tr>
    								<td>
    									密码
    								</td>
    								<td>
    									<input type="password" name="password" id="password"/>
    								</td>
    							</tr>
    							<tr>
    								<td>
    									确认密码
    								</td>
    								<td>
    									<input type="password" name="repassword" id="repassword"/>
    								</td>
    							</tr>
    							<tr>
    								<td>
    									Email
    								</td>
    								<td>
    									<input type="text" name="email" id="email"/>
    								</td>
    							</tr>
    							<tr>
    								<td>
    									姓名
    								</td>
    								<td>
    									<input type="text" name="username" />
    								</td>
    							</tr>
    							<tr>
    								<td>
    									性别
    								</td>
    								<td>
    									<input type="radio" name="sex" value="男"/>男
    									<input type="radio" name="sex" value="女" checked="checked"/>女
    								</td>
    							</tr>
    							<tr>
    								<td>
    									出生日期
    								</td>
    								<td>
    									<input type="text" name="birthday" size="34px"/>
    								</td>
    							</tr>
    							<tr>
    								<td>
    									验证码
    								</td>
    								<td>
    									<input type="text" name="yzm"/>
    									<img src="../img/yanzhengma.png" />
    								</td>
    							</tr>
    							<tr>
    								<td colspan="2">
    									<input type="submit" value="注册" />
    								</td>
    							</tr>
    						</table>
    					</form>
    				</td>
    			</tr>
    			
    			<tr>
    				<td>
    					<img src="../img/footer.jpg" width="100%"/>
    				</td>
    			</tr>
    			
    			<tr>
    				<td align="center">
    					<a href="#">关于我们</a>
    					<a href="#">联系我们</a>
    					<a href="#">招贤纳士</a>
    					<a href="#">法律声明</a>
    					<a href="#">友情链接</a>
    					<a href="#">支付方式</a>
    					<a href="#">配送方式</a>
    					<a href="#">服务声明</a>
    					<a href="#">广告声明</a>
    					<p>
    						Copyright © 2005-2016 传智商城 版权所有
    					</p>
    				</td>
    			</tr>
    		</table>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 9]

# 二、使用JS完成首页轮播图效果案例 #

## 1.需求分析 ##

我们希望在首页完成对轮播图的效果实现：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 10]

## 2.技术分析 ##

获取元素: document.getElementById(“id名称”)  
事件(onload)  
定时操作：setInterval(“changeImg()”,3000); //changeImg() 指定一个表达式或者一个函数;3000 重复执行的周期时间(毫秒值)

## 3.步骤分析 ##

第一步：确定事件(页面加载事件onload)并为其绑定一个函数  
第二步：书写绑定的这个函数(设置一个定时操作);  
第三步：书写定时任务（setInterval）  
第四步：书写定时任务里面的函数  
第五步：通过变量的方式，**进行循环** （获取轮播图的位置,并设置src属性）  
在循环的时候，需要注意到了最后一张图片的时候要重置。

## 4.代码实现 ##

Javascript部分代码

HTML部分代码  
确定事件：onload 加在body里面！

给指定的图片位置定义一个id

## 切换图片 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>切换图片</title>
    		<style>
    			div{
    				border: 1px solid white;
    				width: 500px;
    				height: 350px;
    				margin: auto;
    				text-align: center;
    			}
    		</style>
    		<script>
    			var i = 1;
    			function changeImg(){
    				i++;
    				document.getElementById("img1").src="../../img/" + i + ".jpg";
    				if(i == 3){
    					i = 0;
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<div id="">
    			<input type="button" value="下一张" onclick="changeImg()"/>
    			<img src="../../img/1.jpg"  width="100%" height="100%" id="img1"/>
    		</div>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 11]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>使用DIV+CSS完成首页重新布局</title>
    		<style>
    			#father{
    				/*border: 0px-去除了边界线*/
    				border: 0px solid red;
    				width: 1300px;
    				height: 2170px;
    				margin: auto;
    			}
    			/*logo画框*/
    			/*#logo{
    				border: 0px solid black;
    				width: 1300px;
    				height: 50px;
    			}*/
    			#clear{
    				clear: both;
    			}
    			.top{
    				border: 0px solid blue;
    				width: 431px;
    				height: 50px;
    				float: left;
    			}
    			#top{
    				padding-top: 12px;
    				height: 38px;
    			}
    			#menu{
    				border: 0px solid red;
    				width: 1300px;
    				height: 50px;
    				background-color: black;
    				margin-bottom: 10px;
    			}
    			ul li{
    				display: inline;
    				color: white;
    			}
    			#product{
    				border: 0px solid red;
    				width: 1300px;
    				height: 558px;
    			}
    			#product_top{
    				border: 0px solid blue;
    				width: 100%;
    				height: 50px;
    				padding-top: 8px;
    			}
    			#product_bottom{
    				border: 0px solid green;
    				width: 100%;
    				height: 500px;
    			}
    			#product_bottom_left{
    				border: 0px solid red;
    				width: 200px;
    				height: 500px;
    				float: left;
    			}
    			#product_bottom_right{
    				border: 0px solid blue;
    				width: 1094px;
    				height: 500px;
    				float: left;
    			}
    			#big{
    				border: 0px solid red;
    				width: 544px;
    				height: 250px;
    				float: left;
    			}
    			#small{
    				border: 0px solid blue;
    				width: 180px;
    				height: 250px;
    				float: left;
    				/*让里面内容居中*/
    				text-align: center;
    			}
    			#bottom{
    				text-align: center;
    			}
    			/*去除下划线的标签*/
    			a{
    				text-decoration: none;
    			}
    		</style>
    		<script>
    			function init(){
    				//书写轮播图片显示的定时操作
    				setInterval("changeImg()",3000);
    			}
    			
    			//书写函数
    			var i = 0;
    			function changeImg(){
    				i++;
    				//获取图片位置并设置src属性值
    				document.getElementById("img1").src="../img/" + i + ".jpg";
    				if(i == 3){
    					i = 0;
    				}
    			}
    		</script>
    	</head>
    	<body "init()">
    		<div id="father">
    			
    			<div id="logo">
    				<div class="top">
    					<img src="../img/logo2.png" height="46px" />
    				</div>
    				<div class="top">
    					<img src="../img/header.png" height="46px" />
    				</div>
    				<div class="top" id="top">
    					<a href="#">登录</a>
    					<a href="#">注册</a>
    					<a href="#">购物车</a>
    				</div>				
    			</div>
    			
    			<div id="clear">
    				
    			</div>
    			
    			<div id="menu">
    				<ul>
    					<a href="#"><li style="font-size: 20px;">首页</li></a>    
    					<a href="#"><li>手机数码</li></a>    
    					<a href="#"><li>家用电器</li></a>    
    					<a href="#"><li>鞋靴箱包</li></a>    
    					<a href="#"><li>奢饰品</li></a>    
    					<a href="#"><li>飞机大炮</li></a>
    				</ul>
    			</div>
    			
    			<div id="">
    				<img src="../img/1.jpg" width="100%" id="img1"/>
    			</div>
    			
    			
    			<div id="product">
    				<div id="product_top">
    					   
    					
    					<span style="font-size: 25px;">最新商品</span>   
    					<img src="../img/title2.jpg" />
    				</div>
    				<div id="product_bottom">
    					<div id="product_bottom_left">
    						<img src="../img/big01.jpg" width="100%" height="100%" />
    					</div>
    					<div id="product_bottom_right">
    						<div id="big">
    							<a href="#"><img src="../img/middle01.jpg"  width="100%" height="100%"/></a>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    					</div>
    				</div>
    			</div>
    			
    			<div id="">
    				<img src="../img/ad.jpg" width="100%" height="100%"/>
    			</div>
    			
    			
    			<div id="product">
    				<div id="product_top">
    					   
    					<span style="font-size: 25px;">热门商品</span>   
    					<img src="../img/title2.jpg" />
    				</div>
    				<div id="product_bottom">
    					<div id="product_bottom_left">
    						<img src="../img/big01.jpg" width="100%" height="100%" />
    					</div>
    					<div id="product_bottom_right">
    						<div id="big">
    							<a href="#"><img src="../img/middle01.jpg"  width="100%" height="100%"/></a>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    					</div>
    				</div>
    			</div>
    			
    			<div id="">
    				<img src="../img/footer.jpg" width="100%" height="100%"/>
    			</div>
    			
    			<div id="bottom">
    				<a href="#">关于我们</a>
    				<a href="#">联系我们</a>
    				<a href="#">招贤纳士</a>
    				<a href="#">法律声明</a>
    				<a href="#">友情链接</a>
    				<a href="#">支付方式</a>
    				<a href="#">配送方式</a>
    				<a href="#">服务声明</a>
    				<a href="#">广告声明</a>
    				<p>
    					Copyright © 2005-2016 传智商城 版权所有
    				</p>
    			</div>
    		</div>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 12]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 13]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 14]

# 三、使用JS完成页面定时弹出广告 #

## 1.需求分析 ##

我们希望在首页中的顶部做一个定时弹出广告图片。其实现效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 15]

## 2.技术分析 ##

获取图片的位置(document.getElementById(“”))
    
    隐藏图片：display：none
    
    定时操作：setInterval(“显示图片的函数”，3000);

## 3.步骤分析 ##

第一步：确定事件(页面加载事件onload)并为其绑定一个函数init()

第二步：在init函数中设置一个显示图片的定时操作。

第三步：书写显示图片的函数(获取图片元素，设置其display属性为block)

第四步：设置一个隐藏图片的定时操作

第五步：书写隐藏图片的函数(获取图片元素，设置其display属性为none)

## 4.代码实现 ##

Html部分代码：
    
     <img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="1300px" style="display: none;" id="img1"/>
    
    确定事件(<body "init()">)

## 5.总结 ##

### 5.1 javascript的引入方式 ###

1） 内部引入方式

直接将javascript代码写到<script type=”text/javascript”></script>    //type=”text/javascript” 可以省略,但不建议

1.  外部引入方式  
    需要创建一个.js文件，在里面书写javaScript代码，然后在html文件中通过Script标签的src属性引入该外部的js文件

### 5.2 BOM对象 ###

BOM对象：浏览器对象模型(操作与浏览器相关的内容)

#### 1) Window对象 ####

Window 对象表示浏览器中打开的窗口。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 16]  
setInterval(): 它有一个返回值，主要是提供给clearInterval使用。

setTimeout(): 它有一个返回值，主要是提供给clearTimeout使用。

clearInterval(): 该方法只能清除由setInterval设置的定时操作

clearTimeout(): 该方法只能清除由setTimeout设置的定时操作

弹出框的几个方法：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 17]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 18]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 19]

#### 2) Location对象 ####

Location 对象包含有关当前 URL 的信息。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 20]  
href:该属性可以完成通过JS代码控制页面的跳转。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script>
    		    function tiao(){
    		
    		        window.location.href="http://www.itcast.cn";
    		
    		    }
    		</script>
    	</head>
    	<body>
    		<a href="#" onclick="tiao()">跳转到传智播客首页</a>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 21]

#### 3) History对象 ####

History 对象包含用户（在浏览器窗口中）访问过的 URL。  
![在这里插入图片描述][20190123212003975.png]  
历史页面：使用location页面(把href属性值改为当前的history)

History页面代码：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>Location对象</title>
    	</head>
    	<body>
    		<input type="button" value="跳转到history页面" onclick="javascript:location.href='02_History对象.html'"/>	
    	</body>
    </html>

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>History对象</title>
    		<script>
    			function fanhui(){
    				history.go(-1);
    				//history.back();
    			}
    		</script>
    	</head>
    	<body>
    		<input type="button" value="返回上一页" onclick="fanhui()"/><br />
    		<a href="03_Location对象.html">下一页</a>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 22]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 23]  
go(参数)

参数：-1 返回上一个历史记录页面；-2返回上上一个历史记录页面，1进入下一个历史记录页面。

让按钮点击失效：

onclick=”javascript:volid(0)”

#### 4) Navigator对象 ####

Navigator 对象包含有关浏览器的信息。(该对象开发中不怎么常用)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 24]

#### 5) Screen对象 ####

Screen 对象包含有关客户端显示屏幕的信息。(该对象开发中不怎么常用)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 25]

## JS外部注入完成定时首页.js ##

## 使用JS完成首页轮播图.html ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>使用JS完成首页轮播图</title>
    		<style>
    			#father{
    				/*border: 0px-去除了边界线*/
    				border: 0px solid red;
    				width: 1300px;
    				height: 2170px;
    				margin: auto;
    			}
    			/*logo画框*/
    			/*#logo{
    				border: 0px solid black;
    				width: 1300px;
    				height: 50px;
    			}*/
    			#clear{
    				clear: both;
    			}
    			.top{
    				border: 0px solid blue;
    				width: 431px;
    				height: 50px;
    				float: left;
    			}
    			#top{
    				padding-top: 12px;
    				height: 38px;
    			}
    			#menu{
    				border: 0px solid red;
    				width: 1300px;
    				height: 50px;
    				background-color: black;
    				margin-bottom: 10px;
    			}
    			ul li{
    				display: inline;
    				color: white;
    			}
    			#product{
    				border: 0px solid red;
    				width: 1300px;
    				height: 558px;
    			}
    			#product_top{
    				border: 0px solid blue;
    				width: 100%;
    				height: 50px;
    				padding-top: 8px;
    			}
    			#product_bottom{
    				border: 0px solid green;
    				width: 100%;
    				height: 500px;
    			}
    			#product_bottom_left{
    				border: 0px solid red;
    				width: 200px;
    				height: 500px;
    				float: left;
    			}
    			#product_bottom_right{
    				border: 0px solid blue;
    				width: 1094px;
    				height: 500px;
    				float: left;
    			}
    			#big{
    				border: 0px solid red;
    				width: 544px;
    				height: 250px;
    				float: left;
    			}
    			#small{
    				border: 0px solid blue;
    				width: 180px;
    				height: 250px;
    				float: left;
    				/*让里面内容居中*/
    				text-align: center;
    			}
    			#bottom{
    				text-align: center;
    			}
    			/*去除下划线的标签*/
    			a{
    				text-decoration: none;
    			}
    		</style>
    		
    		
    		
    		
    		<script type="text/javascript" src="JS外部注入完成定时首页.js"></script>
    	</head>
    	<body "init()">
    		<div id="father">
    			
    			<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none;" id="img2"/>
    			
    			<div id="logo">
    				<div class="top">
    					<img src="../img/logo2.png" height="46px" />
    				</div>
    				<div class="top">
    					<img src="../img/header.png" height="46px" />
    				</div>
    				<div class="top" id="top">
    					<a href="#">登录</a>
    					<a href="#">注册</a>
    					<a href="#">购物车</a>
    				</div>				
    			</div>
    			
    			<div id="clear">
    				
    			</div>
    			
    			<div id="menu">
    				<ul>
    					<a href="#"><li style="font-size: 20px;">首页</li></a>    
    					<a href="#"><li>手机数码</li></a>    
    					<a href="#"><li>家用电器</li></a>    
    					<a href="#"><li>鞋靴箱包</li></a>    
    					<a href="#"><li>奢饰品</li></a>    
    					<a href="#"><li>飞机大炮</li></a>
    				</ul>
    			</div>
    			
    			<div id="">
    				<img src="../img/1.jpg" width="100%" id="img1"/>
    			</div>
    			
    			
    			<div id="product">
    				<div id="product_top">
    					   
    					
    					<span style="font-size: 25px;">最新商品</span>   
    					<img src="../img/title2.jpg" />
    				</div>
    				<div id="product_bottom">
    					<div id="product_bottom_left">
    						<img src="../img/big01.jpg" width="100%" height="100%" />
    					</div>
    					<div id="product_bottom_right">
    						<div id="big">
    							<a href="#"><img src="../img/middle01.jpg"  width="100%" height="100%"/></a>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    					</div>
    				</div>
    			</div>
    			
    			<div id="">
    				<img src="../img/ad.jpg" width="100%" height="100%"/>
    			</div>
    			
    			
    			<div id="product">
    				<div id="product_top">
    					   
    					<span style="font-size: 25px;">热门商品</span>   
    					<img src="../img/title2.jpg" />
    				</div>
    				<div id="product_bottom">
    					<div id="product_bottom_left">
    						<img src="../img/big01.jpg" width="100%" height="100%" />
    					</div>
    					<div id="product_bottom_right">
    						<div id="big">
    							<a href="#"><img src="../img/middle01.jpg"  width="100%" height="100%"/></a>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    						<div id="small">
    							<img src="../img/small01.jpg" />
    							<a href="#"><p style="color: gray;">咖啡机</p></a>
    							<p style="color: red;">¥399</p>
    						</div>
    					</div>
    				</div>
    			</div>
    			
    			<div id="">
    				<img src="../img/footer.jpg" width="100%" height="100%"/>
    			</div>
    			
    			<div id="bottom">
    				<a href="#">关于我们</a>
    				<a href="#">联系我们</a>
    				<a href="#">招贤纳士</a>
    				<a href="#">法律声明</a>
    				<a href="#">友情链接</a>
    				<a href="#">支付方式</a>
    				<a href="#">配送方式</a>
    				<a href="#">服务声明</a>
    				<a href="#">广告声明</a>
    				<p>
    					Copyright © 2005-2016 传智商城 版权所有
    				</p>
    			</div>
    		</div>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 26]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 27]

# 四、使用JS完成注册页面表单校验 #

## 1.需求分析 ##

之前我们已经使用弹出框的方式实现了表单校验的功能，但是此种方式用户体验效果极差！我们希望做成如下这种效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 28]

## 2.技术分析 ##

使用事件(聚焦事件onfocus和离焦事件onblur),之前使用onsubmit也需要！

使用<span></span>

向页面指定位置写入内容：innerHTML属性(该属性的值存在覆盖现象)

## 3.步骤分析 ##

第一步：确定事件(给出提示信息使用聚焦事件，给出校验结果信息使用离焦事件)并为其绑定函数

第二步：聚焦事件绑定的函数中(获取span给出提示信息)

第三步：离焦事件绑定的函数中(获取用户输入的内容进行判断)

第四步：如果失败，在span位置给出错误提示信息，如果成功，让span内容为空。

1.	确定事件（onfocus聚焦事件）并为其绑定一个函数
    2.	书写绑定函数（在输入框的后面给出提示信息）
    3.	确定事件（onblur离焦事件）并为其绑定一个函数
    4.	书写函数（对数据进行校验,分别给出提示）

## 4.代码实现 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>注册页面</title>
    		
    		
    		<script>
    			function showTips(id,info){
    				document.getElementById(id+"span").innerHTML="<font color='gray'>" + info + "</font>";
    			}
    			
    			function check(id,info){
    				//1.获取用户输入的用户名数据
    				var uValue = document.getElementById(id).value;
    				//2.进行校验
    				//第四步：如果失败，在span位置给出错误提示信息，如果成功，让span内容为空。
    				if(uValue == ""){
    					document.getElementById(id+"span").innerHTML="<font color='red'>" + info + "</font>";
    				}else{
    					document.getElementById(id + "span").innerHTML="";
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
    			
    			<tr>
    				<td>
    					
    					<table border="1px" width="100%">
    						<tr height="50px">
    							<td width="33.3%">
    								<img src="../img/logo2.png" height="47px" />
    							</td>
    							<td width="33.3%">
    								<img src="../img/header.png" height="47px" />
    							</td>
    							<td width="33.3%">
    								<a href="#">登录</a>
    								<a href="#">注册</a>
    								<a href="#">购物车</a>
    							</td>
    						</tr>
    					</table>
    				</td>
    			</tr>
    			
    			<tr height="50px">
    				<td bgcolor="black">
    					   &nbsp
    					<a href="#">
    						<font size="5" color="white">首页</font>
    					</a>     
    					<a href="#">
    						<font color="white">手机数码</font>
    					</a>     
    					<a href="#">
    						<font color="white">电脑办公</font>
    					</a>     
    					<a href="#">
    						<font color="white">鞋靴箱包</font>
    					</a>     
    					<a href="#">
    						<font color="white">家用电器</font>
    					</a>
    				</td>
    			</tr>
    			
    			<tr>
    				<td height="600px" background="../img/regist_bg.jpg">
    					
    					
    
    					<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
    						<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
    							<tr height="40px">
    								<td colspan="2">
    									<font size="4">会员注册</font>   USER REGISTER
    								</td>
    							</tr>
    							<tr>
    								<td>
    									用户名
    								</td>
    								<td>
    									
    									<input type="text" name="user" size="34px" id="user" onfocus="showTips('user','用户名必填！')" onblur="check('user','用户名不能为空！')"/><span id="userspan"></span>
    								</td>
    							</tr>
    							<tr>
    								<td>
    									密码
    								</td>
    								<td>
    									<input type="password" name="password" size="34px" id="password" onfocus="showTips('password','密码必填！')" onblur="check('password','密码不能为空！')"/><span id="passwordspan"></span>
    								</td>
    							</tr>
    							<tr>
    								<td>
    									确认密码
    								</td>
    								<td>
    									<input type="password" name="repassword" size="34px" id="repassword"/>
    								</td>
    							</tr>
    							<tr>
    								<td>
    									Email
    								</td>
    								<td>
    									<input type="text" name="email" size="34px"  id="email"/>
    								</td>
    							</tr>
    							<tr>
    								<td>
    									姓名
    								</td>
    								<td>
    									<input type="text" name="username"  size="34px" />
    								</td>
    							</tr>
    							<tr>
    								<td>
    									性别
    								</td>
    								<td>
    									<input type="radio" name="sex" value="男"/>男
    									<input type="radio" name="sex" value="女" checked="checked"/>女
    								</td>
    							</tr>
    							<tr>
    								<td>
    									出生日期
    								</td>
    								<td>
    									<input type="text" name="birthday" size="34px"/>
    								</td>
    							</tr>
    							<tr>
    								<td>
    									验证码
    								</td>
    								<td>
    									<input type="text" name="yzm"/>
    									<img src="../img/yanzhengma.png" />
    								</td>
    							</tr>
    							<tr>
    								<td colspan="2">
    									<input type="submit" value="注册" />
    								</td>
    							</tr>
    						</table>
    					</form>
    				</td>
    			</tr>
    			
    			<tr>
    				<td>
    					<img src="../img/footer.jpg" width="100%"/>
    				</td>
    			</tr>
    			
    			<tr>
    				<td align="center">
    					<a href="#">关于我们</a>
    					<a href="#">联系我们</a>
    					<a href="#">招贤纳士</a>
    					<a href="#">法律声明</a>
    					<a href="#">友情链接</a>
    					<a href="#">支付方式</a>
    					<a href="#">配送方式</a>
    					<a href="#">服务声明</a>
    					<a href="#">广告声明</a>
    					<p>
    						Copyright © 2005-2016 传智商城 版权所有
    					</p>
    				</td>
    			</tr>
    		</table>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 29]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 30]

# javaScript简单介绍（WEB03） #

## ECMAScript ##

1.语法
    2.变量：只能使用var定义，如果在函数的内部使用var定义，那么它是一个局部变量，如果没有使用var它是一个全局的。弱类型！
    3.数据类型：原始数据类型(undefined/null/string/number/boolean)
    4.语句：
    5.运算符：==与===的区别
    6.函数：两种写法(有名称的，匿名的)

## BOM对象 ##

window:alert(),prompt(),confirm(),setInterval(),clearInterval(),setTimeout(),clearTimeout()
    history:go(参数)，back(),forward()
    location: href属性

## 事件： ##

onsubmit()此事件写在form标签中，必须有返回值。
    onload()此事件只能写一次并且放到body标签中
    其它事件放到需要操作的元素位置。(onclick、onfocus、onblur)

## 获取元素： ##

document.getElementById("id")

获取元素里面的值:  
document.getElementById(“id”).value

## 向页面输出 ##

弹窗：alert();……
    向浏览器中写入内容：document.write(内容)；
    向页面指定位置写入内容,innerHTML

# 五、使用JS完成表格的一个隔行换色 #

## 1.需求分析 ##

我们希望在后台页面中实现一个隔行换色的效果显示所有的用户信息，显示效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 31]

## 2.技术分析 ##

新标签的学习

确定事件(页面加载事件onload)

获取元素：获取表格(document.getElementById()),最终是为了获取表格中tbody里面的行数(长度)。

tbody里面的行数(rows.length)

JS的遍历(for循环)

获取奇数行和偶数行(对遍历中角标对2取余)

设置背景颜色(.style.backgroundColor)

## 3.步骤分析 ##

第一步：确定事件(onload)并为其绑定一个函数

第二步：书写函数(获取表格)

第三步：获取tbody里面的行数

第四步：对tbody里面的行进行遍历

第五步：获取奇数行和偶数行(角标对2取余)

第六步：分别对奇数行和偶数行设置背景颜色

## 4.代码实现 ##

JS代码：

HTML代码：

给table里面添加一个id=“tbl”,在table里面添加新标签<thead></thead>和<tbody></tbody>

## 5.实现一个表格的高亮显示 ##

为了加强对事件的学习，添加此案例：

分析：  
第一步：确定事件(onmouseover和onmouseout)并分别为其绑定一个函数  
第二步：获取鼠标移上去的那行，对其设置背景颜色

代码：  
JS代码：

HTML代码

## 6.总结 ##

回顾之前已经使用过的事件

(onsubmit/onclick/onload/onfocus/onblur/onmouseover/onmouseout)

![加粗样式][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 32]  
onfocus/onblur: 聚焦离焦事件，用于表单校验的时候比较合适。

onclick/ondblclick: 鼠标单击和双击事件

onkeydown/onkeypress：搜索引擎使用较多

onload：页面加载事件，所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称，那么在html页面中只能写一个。

onmouseover/onmouseout/onmousemove：购物网站商品详情页。

onsubmit：表单提交事件 ，有返回值，控制表单是否提交。

onchange: 当用户改变内容的时候使用这个事件(二级联动)

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>表格隔行换色</title>
    		<script>
    			window.onload = function(){
    				//1.获取表格
    				var tblEle = document.getElementById("tbl");
    				//2.获取表格中tbody里面的行数(长度)
    				var len = tblEle.tBodies[0].rows.length;
    				//alert(len);
    				//3.对tbody里面的行进行遍历
    				//小心定义变量都是var
    				for(var i=0;i<len;i++){
    					if(i%2==0){
    						//4.对偶数行设置背景颜色
    						tblEle.tBodies[0].rows[i].style.backgroundColor="pink";
    					}else{
    						//5.对奇数行设置背景颜色
    						tblEle.tBodies[0].rows[i].style.backgroundColor="gold";
    					}
    				}
    			}
    		</script>
    
    	</head>
    	<body>
    		<table border="1" width="500" height="50" align="center" id="tbl">
    			
    			<thead>
    				<tr>
    					<th>编号</th>
    					<th>姓名</th>
    					<th>年龄</th>
    				</tr>
    			</thead>
    			<tbody>
    				<tr >
    					<td>1</td>
    					<td>张三</td>
    					<td>22</td>
    				</tr>
    				<tr >
    					<td>2</td>
    					<td>李四</td>
    					<td>25</td>
    				</tr>
    				<tr >
    					<td>3</td>
    					<td>王五</td>
    					<td>27</td>
    				</tr>
    				<tr >
    					<td>4</td>
    					<td>赵六</td>
    					<td>29</td>
    				</tr>
    				<tr >
    					<td>5</td>
    					<td>田七</td>
    					<td>30</td>
    				</tr>
    				<tr >
    					<td>6</td>
    					<td>汾九</td>
    					<td>20</td>
    				</tr>
    			</tbody>
    		</table>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 33]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>表格高亮显示</title>
    		<script>
    			function changeColor(id,flag){
    				if(flag=="over"){
    					document.getElementById(id).style.backgroundColor="red";
    				}else if(flag=="out"){
    					document.getElementById(id).style.backgroundColor="white";
    				}
    			}
    		</script>
    
    	</head>
    	<body>
    		<table border="1" width="500" height="50" align="center">
    			<thead>
    				<tr>
    					<th>编号</th>
    					<th>姓名</th>
    					<th>年龄</th>
    				</tr>
    			</thead>
    			<tbody>
    				<tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">
    					<td>1</td>
    					<td>张三</td>
    					<td>22</td>
    				</tr>
    				<tr onmouseover="changeColor('tr2','over')" id="tr2" onmouseout="changeColor('tr2','out')">
    					<td>2</td>
    					<td>李四</td>
    					<td>25</td>
    				</tr>
    				<tr onmouseover="changeColor('tr3','over')" id="tr3" onmouseout="changeColor('tr3','out')">
    					<td>3</td>
    					<td>王五</td>
    					<td>27</td>
    				</tr>
    				<tr onmouseover="changeColor('tr4','over')" id="tr4" onmouseout="changeColor('tr4','out')">
    					<td>4</td>
    					<td>赵六</td>
    					<td>29</td>
    				</tr>
    				<tr onmouseover="changeColor('tr5','over')" id="tr5" onmouseout="changeColor('tr5','out')">
    					<td>5</td>
    					<td>田七</td>
    					<td>30</td>
    				</tr>
    				<tr onmouseover="changeColor('tr6','over')" id="tr6" onmouseout="changeColor('tr6','out')">
    					<td>6</td>
    					<td>汾九</td>
    					<td>20</td>
    				</tr>
    			</tbody>
    		</table>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 34]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script>
    			window.onload = function(){
    				document.getElementById("btn").onclick = function(){
    					location.href="惊喜.html"
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<input type="button" value="点我有惊喜！" id="btn" />
    	</body>
    </html>

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>打飞机</title>
    		<style>
    			div{
    				border: 1px solid white;
    				width: 500px;
    				height: 300px;
    				margin: auto;
    				text-align: center;
    			}
    		</style>
    	</head>
    	<body>
    		<div>
    			<img src="../img/飞机05.gif" width="100%" height="100%"/>
    		</div>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 35]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 36]

# 六、使用JS完成全选和选不选操作 #

## 1.需求分析 ##

我们希望在后台系统实现一个批量删除的操作(全选所有的复选框)，显示效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 37]

## 2.技术分析 ##

确定事件(鼠标单击事件onclick)，事件绑定到编号前面的复选框里面

获取编号前面的复选框的状态(是否选中)  
获取复选框：var checkAllEle = document.getElementById(“id”)  
获取复选框的状态：checkAllEle.checked?

获取下面所有的复选框：  
document.getElementsByName(“name”);

## 3.步骤分析 ##

第一步：确定事件(onclick)并为其绑定一个函数  
第二步：书写函数(获取编号前面的复选框，获取其状态)  
第三步：判断编号前面复选框的状态(如果为选中，获取下面所有的复选框，并将其状态置为选中)  
第四步：判断编号前面复选框的状态(如果为未选中，获取下面所有的复选框，并将其状态置为未选中)

## 4.代码实现 ##

JS部分代码：

HTML代码：  
复选框前面的：

下面所有的复选框：

## 案例实现： ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>全选和全不选</title>
    		<script>
    			function checkAll(){
    				//1.获取编号前面的复选框
    				var checkAllEle = document.getElementById("checkAll");
    				//2.对编号前面复选框的状态进行判断
    				if(checkAllEle.checked==true){
    					//3.获取下面所有的复选框
    					var checkOnes = document.getElementsByName("checkOne");
    					//4.对获取的所有复选框进行遍历
    					for(var i=0;i<checkOnes.length;i++){
    						//5.拿到每一个复选框，并将其状态置为选中
    						checkOnes[i].checked=true;
    					}
    				}else{
    					//6.获取下面所有的复选框
    					var checkOnes = document.getElementsByName("checkOne");
    					//7.对获取的所有复选框进行遍历
    					for(var i=0;i<checkOnes.length;i++){
    						//8.拿到每一个复选框，并将其状态置为未选中
    						checkOnes[i].checked=false;
    					}
    				}
    			}
    		</script>
    		
    	</head>
    	<body>
    		<table border="1" width="500" height="50" align="center" >
    			<thead>
    				<tr>
    					<td colspan="4">
    						<input type="button" value="添加" />
    						<input type="button" value="删除" />
    					</td>
    				</tr>
    				<tr>
    					<th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>
    					<th>编号</th>
    					<th>姓名</th>
    					<th>年龄</th>
    				</tr>
    			</thead>
    			<tbody>
    				<tr >
    					<td><input type="checkbox" name="checkOne"/></td>
    					<td>1</td>
    					<td>张三</td>
    					<td>22</td>
    				</tr>
    				<tr >
    					<td><input type="checkbox" name="checkOne"/></td>
    					<td>2</td>
    					<td>李四</td>
    					<td>25</td>
    				</tr>
    				<tr >
    					<td><input type="checkbox" name="checkOne"/></td>
    					<td>3</td>
    					<td>王五</td>
    					<td>27</td>
    				</tr>
    				<tr >
    					<td><input type="checkbox" name="checkOne"/></td>
    					<td>4</td>
    					<td>赵六</td>
    					<td>29</td>
    				</tr>
    				<tr >
    					<td><input type="checkbox" name="checkOne"/></td>
    					<td>5</td>
    					<td>田七</td>
    					<td>30</td>
    				</tr>
    				<tr >
    					<td><input type="checkbox" name="checkOne"/></td>
    					<td>6</td>
    					<td>汾九</td>
    					<td>20</td>
    				</tr>
    			</tbody>
    		</table>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 38]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 39]

## 5.总结 ##

### 5.1 javascript的DOM操作 ###

![在这里插入图片描述][20190125110206499.png]  
Document:整个html文件都成为一个document文档  
Element:所有的标签都是Element元素  
Attribute：标签里面的属性  
Text：标签中间夹着的内容为text文本  
Node:document、element、attribute、text统称为节点node.

#### Document对象 ####

每个载入浏览器的 HTML 文档都会成为 Document 对象。  
![在这里插入图片描述][20190125110238394.png]  
后面两个方法获取之后需要遍历！

#### 以下两个方法很重要，但是在手册中查不到！ ####

创建文本节点：document.createTextNode()  
创建元素节点：document.createElement()

#### Element对象 ####

我们所认知的html页面中所有的标签都是element元素

element.appendChild()
    向元素添加新的子节点，作为最后一个子节点。
    element.firstChild
    返回元素的首个子节点。
    element.getAttribute()
    返回元素节点的指定属性值。
    element.innerHTML
    设置或返回元素的内容。
    element.insertBefore()
    在指定的已有的子节点之前插入新节点。
    element.lastChild
    返回元素的最后一个子元素。
    element.setAttribute()
    把指定属性设置或更改为指定值。
    element.removeChild()
    从元素中移除子节点。
    element.replaceChild()
    替换元素中的子节点。

#### Attribute对象 ####

我们所认知的html页面中所有标签里面的属性都是attribute  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 40]

#### 5.2 DOM练习 ####

在页面中使用列表显示一些城市

我们希望点击一个按钮实现动态添加城市。

##### 分析： #####

事件(onclick)
    获取ul元素节点
    创建一个城市的文本节点
    创建一个li元素节点
    将文本节点添加到li元素节点中去。
    使用element里面的方法appendChild()来添加子节点

##### 代码： #####

HTML代码

##### 案例实现： #####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>动态添加城市</title>
    		<script>
    			window.onload = function(){
    				document.getElementById("btn").onclick = function(){
    					//1.获取ul元素节点
    					var ulEle = document.getElementById("ul1");
    					//2.创建城市文本节点
    					var textNode = document.createTextNode("深圳");//深圳
    					//3.创建li元素节点
    					var liEle = document.createElement("li");//<li></li>
    					//4.将城市文本节点添加到li元素节点中去
    					liEle.appendChild(textNode);//<li>深圳</li>
    					//5.将li添加到ul中去
    					ulEle.appendChild(liEle);
    				}
    			}
    		</script>		
    	</head>
    
    	<body>
    		<input type="button" value="添加新城市" id="btn"/>
    		<ul id="ul1">
    			<li>北京</li>
    			<li>上海</li>
    			<li>广州</li>
    		</ul>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 41]

# 七、使用JS完成省市二级联动 #

## 1.需求分析 ##

我们希望在注册页面中添加一个字段(籍贯)，当用户选择一个具体的省份，在后面的下拉列表中动态加载该省份下所有的城市。显示的效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 42]

## 2.技术分析 ##

事件(onchange)  
使用一个二维数组来存储省份和城市(二维数组的创建？)  
获取用户选择的省份(使用方法传参的方式：this.value)  
遍历数组(获取省份与用户选择的省份比较，如果相同了，继续遍历该省份下所有的城市)  
创建文本节点和元素节点并进行添加操作

createTextNode()  
createElement()  
appendChild()

## 3.步骤分析 ##

第一步：确定事件(onchange)并为其绑定一个函数  
第二步：创建一个二维数组用于存储省份和城市  
第三步：获取用户选择的省份  
第四步：遍历二维数组中的省份  
第五步：将遍历的省份与用户选择的省份比较  
第六步：如果相同，遍历该省份下所有的城市  
第七步：创建城市文本节点  
第八步：创建option元素节点  
第九步：将城市文本节点添加到option元素节点中去  
第十步：获取第二个下拉列表，并将option元素节点添加进去  
第十一步：每次操作前清空第二个下拉列表的option内容。

## 4.代码实现 ##

### JS代码： ###

### HTML代码： ###

### 案例实现： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>省市二级联动</title>
    		<style type="text/css">
    			.top{
    				border: 1px solid red;
    				width: 32.9%;
    				height: 50px;
    				float: left;
    			}
    
    			#clear{
    				clear: both;
    			}
    			#menu{
    				border: 1px solid blue;
    				width: 99%;
    				height: 40px;
    				background-color: black;
    			}
    			#menu ul li{
    				display: inline;
    				color: white;
    				font-size: 19px;
    			}
    			#bottom{
    				text-align: center;
    			}
    			#contanier{
    				border: 1px solid red;
    				width: 99%;
    				height: 600px;
    				background: url(../img/regist_bg.jpg);
    				position: relative;
    			}
    			#content{
    				border: 5px solid gray;
    				width: 50%;
    				height: 60%;
    				position: absolute;
    				top: 100px;
    				left: 300px;
    				background-color: white;
    				padding-top: 50px;
    			}
    
    		</style>
    		
    		<script>
    			//1.创建一个二维数组用于存储省份和城市
    			var cities = new Array(3);
    			cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
    			cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
    			cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
    			cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
    			
    			function changeCity(val){
    				
    				//7.获取第二个下拉列表
    				var cityEle = document.getElementById("city");
    				
    				//9.清空第二个下拉列表的option内容
    				cityEle.options.length=0;
    				
    				//2.遍历二维数组中的省份
    				for(var i=0;i<cities.length;i++){
    					//注意，比较的是角标
    					//val-用户选择的省份    将遍历的省份与用户选择的省份比较
    					if(val==i){
    						//3.遍历用户选择的省份下的城市
    						for(var j=0;j<cities[i].length;j++){
    							//alert(cities[i][j]);//可查看下拉第一个菜单后拿到一个省份里面的所有城市
    							//4.创建城市的文本节点
    							var textNode = document.createTextNode(cities[i][j]);
    							//5.创建option元素节点
    							var opEle = document.createElement("option");
    							//6.将城市的文本节点添加到option元素节点
    							opEle.appendChild(textNode);
    							//8.将option元素节点添加到第二个下拉列表中去
    							cityEle.appendChild(opEle);
    						}
    					}
    				}
    			}
    		</script>
    		
    	</head>
    	<body>
    		<div>
    			
    			
    			<div>
    				
    				<div class="top">
    					<img src="../img/logo2.png" height="47px"/>
    				</div>
    				<div class="top">
    					<img src="../img/header.png" height="47px"/>
    				</div>
    				<div class="top" style="padding-top: 15px;height: 35px;">
    					<a href="#">登录</a>
    					<a href="#">注册</a>
    					<a href="#">购物车</a>
    				</div>
    			</div>
    			
    			<div id="clear">
    				
    			</div>
    			
    			<div id="menu">
    				<ul>
    					<li >首页</li>
    					<li >电脑办公</li>
    					<li >手机数码</li>
    					<li >孕婴保健</li>
    					<li >鞋靴箱包</li>
    				</ul>
    			</div>
    			
    			<div id="contanier">
    				<div id="content">
    					<table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white">
    						<form method="get" action="#" onsubmit="return checkForm()">
    						<tr>
    							<td colspan="2" align="center">
    								<font size="5">会员注册</font>
    							</td>
    							
    						</tr>
    						<tr>
    							<td>
    								用户名
    							</td>
    							<td>
    								<input type="text" name="username" id="username" onfocus="showTips('username','必须以字母开头')" onblur="check('username','用户名不能为空')" /><span id="usernamespan"></span>
    							</td>
    						</tr>
    						<tr>
    							<td>密码</td>
    							<td>
    								<input type="password" name="password" id="password" onfocus="showTips('password','密码长度不能低于6位！')" onblur="check('password','密码不能为空！')" /><span id="passwordspan"></span>
    							</td>
    						</tr>
    						<tr>
    							<td>确认密码</td>
    							<td>
    								<input type="password" name="repassword" />
    							</td>
    						</tr>
    						<tr>
    							<td>email</td>
    							<td>
    								<input type="text" name="email" id="email" />
    							</td>
    						</tr>
    						<tr>
    							<td>姓名</td>
    							<td>
    								<input type="text" name="name" />
    							</td>
    						</tr>
    						<tr>
    							<td>籍贯</td>
    							<td>
    								
    								<select onchange="changeCity(this.value)">
    									<option>--请选择--</option>
    									<option value="0">湖北</option>
    									<option value="1">湖南</option>
    									<option value="2">河北</option>
    									<option value="3">河南</option>
    								</select>
    								<select id="city">
    									
    								</select>
    							</td>
    						</tr>
    						<tr>
    							<td>性别</td>
    							<td>
    								<input type="radio" name="sex" value="男"/>男
    								<input type="radio" name="sex" value="女"/>女
    							</td>
    						</tr>
    						<tr>
    							<td>出生日期</td>
    							<td>
    								<input type="text" name="birthday" />
    							</td>
    						</tr>
    						<tr>
    							<td>验证码</td>
    							<td>
    								<input type="text" name="yanzhengma" />
    								<img src="../img/yanzhengma.png" />
    							</td>
    						</tr>
    						<tr>
    							<td colspan="2">
    								<input type="submit" value="注册" />											
    							</td>
    						</tr>
    						</form>
    					</table>
    				</div>
    			</div>
    			
    			<div id="">
    				<img src="../img/footer.jpg" width="99%" />
    			</div>
    			
    			<div id="bottom">
    				<a href="#">关于我们 </a>
    				<a href="#">联系我们 </a>
    				<a href="#">招贤纳士 </a>
    				<a href="#">法律声明</a>
    				<a href="#">友情链接</a>
    				<a href="#">支付方式</a>
    				<a href="#">配送方式 </a>
    				<a href="#">服务声明 </a>
    				<a href="#">广告声明 </a>
    				<p>Copyright © 2005-2016 传智商城 版权所有 </p>
    			</div>
    		</div>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 43]

## 5.总结 ##

### 5.1 javascript内置对象 ###

#### Array对象 ####

数组的创建：  
数组的特点：  
长度可变！数组的长度=最大角标+1

#### Boolean对象 ####

对象创建：  
如果value 不写，那么默认创建的结果为false

#### Date对象 ####

getTime()  
返回 1970 年 1 月 1 日至今的毫秒数。  
解决浏览器缓存问题

#### Math和number对象 ####

与java里面的基本一致。

#### String对象 ####

match()  
找到一个或多个正则表达式的匹配。  
substr()  
从起始索引号提取字符串中指定数目的字符。  
substring()  
提取字符串中两个指定的索引号之间的字符。

#### 例子： ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>String对象</title>
    		<script>
    			var str = "-a-b-c-d-e-f-";
    			var str1 = str.substr(2,4);//-b-c
    			alert(str1);
    			
    			var str2 = str.substring(2,4);//-b
    			alert(str2);
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 44]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 45]

#### RegExp对象 ####

正则表达式对象  
test  
检索字符串中指定的值。返回 true 或 false。

### 5.2 全局函数 ###

全局属性和函数可用于所有内建的 JavaScript 对象  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 46]  
关于编码和解码的一组方法：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>全局函数</title>
    		<script>
    			var str = "张三";
    			alert(encodeURI(str));//%E5%BC%A0%E4%B8%89
    			alert(encodeURIComponent(str));//%E5%BC%A0%E4%B8%89
    			
    			alert(decodeURI(encodeURI(str)));//张三
    			alert(decodeURIComponent(encodeURIComponent(str)));//张三
    			
    			var str1 = "http://www.itheima.cn";
    			alert(encodeURI(str1));//http://www.itheima.cn
    			alert(encodeURIComponent(str1));//http%3A%2F%2Fwww.itheima.cn
    			
    			alert(decodeURI(encodeURI(str1)));//http://www.itheima.cn
    			alert(decodeURIComponent(encodeURIComponent(str1)));//http://www.itheima.cn
    			
    			var str2 = "alert('abc')";
    			alert(str2);
    			eval(str2);
    			
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70]: /images/20220323/bcb7490f5baf49188176711e54c28e65.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 1]: /images/20220323/2f622ac18f2b428aab233fe62830b74d.png
[20190123133059404.png]: /images/20220323/621a7844dbb0478b84ec0fb6263a5bde.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 2]: /images/20220323/05bfa7e5cd454051bf6d2c320fb9cf08.png
[20190123133231920.png]: /images/20220323/434feb1891aa402291239996d0965505.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 3]: /images/20220323/36325d04ba444a36acd85213769e6662.png
[20190123133504100.png]: /images/20220323/a3a2cda8ed694eefb23f6c664ed3e46f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 4]: /images/20220323/20315481f82443df941260e1f99c57cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 5]: /images/20220323/038c1c33d9634471b635ac45f24ea456.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 6]: /images/20220323/1a5612698dba4c07b58f4828aae9d0b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 7]: /images/20220323/bc5faad3afdb4ba182fa44a4b63be84e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 8]: /images/20220323/781519b9e3e74ddfab7bf5d7d3139a47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 9]: /images/20220323/cc316306c52a4cc28105f019d5aadd74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 10]: /images/20220323/1e1d0be743604a898dd15cb1dbed5e55.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 11]: /images/20220323/d146848ce3e349feb92a4cc30ecb3b72.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 12]: /images/20220323/e8f539d87e274dfc982d57e6f7224bf4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 13]: /images/20220323/344c3aa138304ed483681e3e294fa2c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 14]: /images/20220323/f2c1c32aa7ed4b6086b1745dd1e1d27e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 15]: /images/20220323/1e6598c787a64fe99d6aa4ece7829d38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 16]: /images/20220323/cb7039477d3b444c846162e6b971a4ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 17]: /images/20220323/c125eac74b234c689383730728f647f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 18]: /images/20220323/bb49e6d10e084883ad987abbeb0f35f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 19]: /images/20220323/ba73e4e144644f9ea8855d9a170b27d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 20]: /images/20220323/839a755e4ec24a538f77967de86afa21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 21]: /images/20220323/704194c4b7594a98a8b3d6a582b507e0.png
[20190123212003975.png]: /images/20220323/9479357735024973821a685141ef431a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 22]: /images/20220323/aac022f943804a83a9276e30731d7b83.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 23]: /images/20220323/2c71a3c22cea450189307e0943620bec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 24]: /images/20220323/e2d14d950afc48e7bad585ae95690658.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 25]: /images/20220323/2e77ba9735414997b7396c727533161a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 26]: /images/20220323/98b1b8a83f1444dea0ec88aa216f5792.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 27]: /images/20220323/db8feca1b67641daa344a1c657b60c02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 28]: /images/20220323/9b62eae2c7644346b090e9c492b870dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 29]: /images/20220323/a74a61b2b8fa4df5abb0b37de5b5c6a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 30]: /images/20220323/4ceb8ffcc7e64226aaa5398c2a441cc5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 31]: /images/20220323/541974459eed4018ae5b5f111b4d4235.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 32]: /images/20220323/e58e4dacb8b343f7bb5b534b1644f437.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 33]: /images/20220323/0846fad339b74ae59380b5759a6c8a3f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 34]: /images/20220323/845a9e6bfb734a7898831993d5dbb5b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 35]: /images/20220323/35a6a1be24fd4d63b51c47da3bd62aeb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 36]: /images/20220323/5fa670333b054e34bd456fbb1707094a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 37]: /images/20220323/f9cdcce69d1e4d059a7cc7030434ff24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 38]: /images/20220323/f8eb5582809a4da3b6ff781dcc9c25fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 39]: /images/20220323/e3b1f5364b2a47af9f71234f93d1f1ab.png
[20190125110206499.png]: /images/20220323/e38d14b3683d42c59775cfc8abdf4122.png
[20190125110238394.png]: /images/20220323/f4c0c9806d7c4d34b84523b7b7ade82b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 40]: /images/20220323/004c820679404fdc85f36434dacabaf9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 41]: /images/20220323/69189989b3644399859ee11d3390cd9c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 42]: /images/20220323/c71916d99d204bc583e33ccde01abf55.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 43]: /images/20220323/ac332bfba44f452f8ac5ad4db1f6e4b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 44]: /images/20220323/f7e8ac881ad44959ad104d97185fd59c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 45]: /images/20220323/f1a8cc1619f14f6b94972a0548008245.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 46]: /images/20220323/229b6ac0107f4276a7a8d8b2bd238faf.png