WEB05_jQuery、WEB06_jQuery（DOM转换和选择器、jQuery的属性操作、jQuery的遍历和DOM操作、jQuery的事件、validation插件）

た入场券 2022-03-21 16:08 244阅读 0赞

# 今日任务 #

1.  使用JQuery完成页面定时弹出广告(DOM转换和选择器)
2.  使用JQuery完成表格的隔行换色
3.  使用JQuery完成复选框的全选效果(jQuery的属性操作)
4.  使用JQuery完成省市联动效果(jQuery的遍历和DOM操作)
5.  使用JQuery完成下列列表左右选择(jQuery的事件)
6.  使用JQuery完成表单的校验.  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70]

# 一、使用JQ完成首页的定时广告弹出 #

## 1.需求分析 ##

在首页中(logo的上方)显示一个广告图片(页面加载后，间隔3秒弹出广告图片，再间隔3秒后隐藏广告图片)。【使用jQuery实现】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 1]

## 2.技术分析 ##

### 2.1 jquery相关的知识 ###

#### 1) 什么是jquery ####

Jquery它是javascript的一个轻量级框架，对javascript进行封装，它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。

#### 2) 怎么使用jQuery ####

## jQuery它是一个库(框架)，要想使用它，必须先引入！ ##

jQuery-1.8.3.js：一般用于学习阶段。
    
        jQuery-1.8.3.min.js：用于项目使用阶段

#### 3)jQuery的简单入门 ####

所有的jQuery代码写在页面加载函数

$(function(){
    
        Jquery代码
    
    });

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>jQuery入门</title>
    		<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
    		<script>
    			$(function(){
    				alert("hello jQuery！")
    			});
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>jQuery页面加载与JS加载区别</title>
    		<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
    		<script>
    			window.onload = function(){
    				alert("张三");
    			}
    			
    			//传统方式页面加载存在覆盖问题,加载比JQ慢（整个页面加载完毕<包括里面的其他内容,比如图片>）
    			window.onload = function(){
    				alert("老王");
    			}
    			
    			//JQ的加载比JS加载要快！(当整个dom树结构绘制完毕被加载)
    			jQuery(document).ready(function(){
    				alert("李四");
    			});
    			
    			//JQ不存在覆盖问题,加载的时候是顺序执行
    			$(document).ready(function(){
    				alert("王五");
    			});
    			
    			//JQ简写方式
    			$(function(){
    				alert("汾九");
    			});
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 5]  
点击之后出现“老王”  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 6]  
先出现李四,接着出现王五  
总的出现顺序：李四=>王五=>汾九=>老王

#### 4) 获取元素 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>jQuery的获取</title>
    		
    		<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
    		<script>
    			$(function(){
    				//1.传统方式获取
    				//document.getElementById("btn").onclick=function(){
    					//location.href="惊喜.html";
    				//}
    				
    				//2.JQ方式获取=====>$("#btn")
    				$("#btn").click(function(){
    					location.href="惊喜.html";
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<input type="button" value="点我有惊喜" id="btn" />
    	</body>
    </html>

![在这里插入图片描述][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]

#### 5) Jquery对象与DOM对象转换 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>DOM对象与JQ对象的转换</title>
    		<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
    		<script>
    			function write1(){
    				//1.JS的DOM操作
    				//document.getElementById("span1").innerHTML="么么哒";
    				//DOM对象无法操作JQ对象里面属性和方法
    				//document.getElementById("span1").html="么么哒";
    				
    				var spanEle = document.getElementById("span1");
    				
    				//将DOM对象转换成JQ对象
    				$(spanEle).html("思密达");
    			}
    			
    			$(function(){
    				$("#btn").click(function(){
    					//JQ对象无法操作JS里面的属性和方法！！！
    					//$("#span1").innerHTML="呵呵哒";
    					$("#span1").html("呵呵哒");
    					
    					//JQ对象向DOM对象转换方式一
    					$("#span1").get(0).innerHTML="美美哒";
    					
    					//JQ对象向DOM对象转换方式二
    					//$("#span1")[0].innerHTML="棒棒哒";
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<input type="button" value="JS写入" onclick="write1()" />
    		<input type="button" value="JQ写入" id="btn" /><br />
    		班长：<span id="span1">你好帅！</span>
    	</body>
    </html>

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

##### 注意： #####

JQ对象只能操作JQ里面的属性和方法  
JS对象只能操作JS里面的属性和方法。

#### 6) Jquery的效果 ####

![在这里插入图片描述][20190203223949449.png]

## 3.实现步骤 ##

第一步：引入jQuery相关的文件

第二步：书写页面加载函数

第三步：在页面加载函数中，获取显示广告图片的元素。

第四步：设置定时操作(显示广告图片的函数)

第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示(show())

第六步：清除显示广告图片的定时操作

第七步：设置定时操作(隐藏广告图片的函数)

第八步：在隐藏广告图片的函数中，使用jQuery的方法让广告图片隐藏(hide())

第九步：清除隐藏广告图片的定时操作

## 4.代码实现 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>使用JQ完成首页轮播图</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/jquery-1.8.3.js"></script>
    		<script>
    			$(function(){
    				//1.书写显示广告图片的定时操作 time-是全局变量
    				time = setInterval("showAd()",3000);
    			});
    			
    			//2.书写显示广告图片的函数
    			function showAd(){
    				//3.获取广告图片,并让其显示
    				//$("#img2").show(1000);
    				//$("#img2").show();
    				//slideDown(speed, [callback])
    				//通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
    				//$("#img2").slideDown(5000);
    				//fadeIn(speed, [callback])
    				//通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
    				$("#img2").fadeIn(3000);
    				//4.清除显示图片的定是操作
    				clearInterval(time);
    				//5.设置隐藏图片的定时操作
    				time = setInterval("hiddenAd()",3000);
    			}
    			
    			function hiddenAd(){
    				//6.获取广告图片,并让其隐藏
    				//$("#img2").hide();
    				//slideUp(speed, [callback])
    				//通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数
    				//$("#img2").slideUp(5000);
    			    //fadeOut(speed, [callback])
    				//通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
    				$("#img2").fadeOut(5000);
    
    				//7.清除隐藏图片的定时操作
    				clearInterval(time);
    			}
    		</script>
    		
    		
    		
    		
    		<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>

## 5.补充内容 ##

Toggle的使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 12]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>toggle的使用</title>
    		<style>
    			div{
    				border: 1px solid white;
    				width: 500px;
    				height: 350px;
    				margin: auto;
    				text-align: center;
    			}
    		</style>
    		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    		<script>
    			$(function(){
    				$("#btn").click(function(){
    					$("#img1").toggle();
    				});
    			});
    		</script>
    	</head>
    	<body>
    		
    		<div>
    			<input type="button"  value="显示/隐藏" id="btn"/><br />|
    			<img src="../img/飞机05.gif"  width="100%" height="100%" id="img1"/>
    		</div>
    	</body>
    </html>

![在这里插入图片描述][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]

## 6.总结 ##

### 6.1 jquery的选择器 ###

#### 1) 基本选择器 ####

id选择器： $(“\#id名称”);

元素选择器： $(“元素名称”);

类选择器： $(“.类名”);

通配符： \*

多个选择器共用(并集)

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>基本选择器</title>
    		<link rel="stylesheet" href="../../css/style.css" />
    		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
    		<script>
    			$(function(){
    				//id选择器
    				$("#btn1").click(function(){
    					//css(name, value) 在所有匹配的元素中，设置一个样式属性的值。
    					$("#one").css("background-color","pink");
    				});
    				
    				$("#btn2").click(function(){
    					//类名选择器
    					$(".mini").css("background-color","pink");
    				});
    				
    				$("#btn3").click(function(){
    					//元素选择器
    					$("div").css("background-color","pink");
    				});
    				
    				$("#btn4").click(function(){
    					//匹配所有元素
    					$("*").css("background-color","pink");
    				});
    				
    				$("#btn5").click(function(){
    					//selector1,selector2,selectorN
    					//你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内
    					$("#two,.mini").css("background-color","pink");
    				});
    			});
    		</script>
    			
    	</head>
    	<body>
    		<input type="button" id="btn1" value="选择为one的元素"/>
    		<input type="button" id="btn2" value="选择样式为mini的元素"/>
    		<input type="button" id="btn3" value="选择所有的div元素"/>
    		<input type="button" id="btn4" value="选择所有元素"/>
    		<input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
    		<hr/>
    		<div id="one">
    			<div class="mini">
    				111
    			</div>
    		</div>
    		
    		<div id="two">
    			<div class="mini">
    				222
    			</div>
    			<div class="mini">
    				333
    			</div>
    		</div>
    		
    		<div id="three">
    			<div class="mini">
    				444
    			</div>
    			<div class="mini">
    				555
    			</div>
    			<div class="mini">
    				666
    			</div>
    		</div>
    		
    		<span id="four">
    			
    		</span>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 15]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 16]  
![在这里插入图片描述][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]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 20]

#### 2) 层级选择器 ####

![在这里插入图片描述][20190203225207573.png]  
ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)

parent > child : 在给定的父元素下匹配所有的子元素(儿子)

prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)

prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>层级选择器</title>
    		<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
    		<script type="text/javascript">
    			$(function(){
    				$("#btn1").click(function(){
    					$("body div").css("background-color","gold");
    				});
    				
    				$("#btn2").click(function(){
    					$("body>div").css("background-color","gold");
    				});
    				
    				$("#btn3").click(function(){
    					$("#two+div").css("background-color","gold");
    				});
    				
    				$("#btn4").click(function(){
    					$("#one~div").css("background-color","gold");
    				});
    			});
    		</script>
    		
    		
    	</head>
    	<body>
    		<input type="button" id="btn1" value="选择body中的所有的div元素"/>
    		<input type="button" id="btn2" value="选择body中的第一级的孩子"/>
    		<input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
    		<input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>
    		
    		<hr/>
    		<div id="one">
    			<div class="mini">
    				111
    			</div>
    		</div>
    		
    		<div id="two">
    			<div class="mini">
    				222
    			</div>
    			<div class="mini">
    				333
    			</div>
    		</div>
    		
    		<div id="three">
    			<div class="mini">
    				444
    			</div>
    			<div class="mini">
    				555
    			</div>
    			<div class="mini">
    				666
    			</div>
    		</div>
    		
    		<span id="four">
    			
    		</span>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 21]  
![在这里插入图片描述][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]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 24]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 25]

#### 3) 基本过滤选择器 ####

$('li').first()    <=等价于=>    $(“li:first”)

![在这里插入图片描述][20190203225604465.png]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>层级选择器</title>
    		<link rel="stylesheet" href="../../css/style.css" type="text/css"/>
    		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
    		<script>
    			$(function(){
    				$("#btn1").click(function(){
    					//获取第一个元素
    					$("body div:first").css("background-color","red");
    				});
    				
    				$("#btn2").click(function(){
    					//获取最后个元素
    					$("body div:last").css("background-color","red");
    				});
    				
    				$("#btn3").click(function(){
    					//匹配所有索引值为奇数的元素，从 0 开始计数
    					$("body div:odd").css("background-color","red");
    				});
    				
    				$("#btn4").click(function(){
    					$("body div:even").css("background-color","red");
    				});
    			});
    		</script>
    		
    		
    	</head>
    	<body>
    		<input type="button" id="btn1" value="body中的第一个div元素"/>
    		<input type="button" id="btn2" value="body中的最后一个div元素"/>
    		<input type="button" id="btn3" value="选择body中的奇数的div"/>
    		<input type="button" id="btn4" value="选择body中的偶数的div"/>
    		
    		<hr/>
    		<div id="one">  
    			<div class="mini">
    				111
    			</div>
    		</div>
    		
    		<div id="two">
    			<div class="mini">
    				222
    			</div>
    			<div class="mini">
    				333
    			</div>
    		</div>
    		
    		<div id="three">
    			<div class="mini">
    				444
    			</div>
    			<div class="mini">
    				555
    			</div>
    			<div class="mini">
    				666
    			</div>
    		</div>
    		
    		<span id="four">
    			
    		</span>
    	</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]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 28]  
![在这里插入图片描述][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]

#### 4) 属性选择器 ####

![在这里插入图片描述][20190203225913803.png]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>层级选择器</title>
    		<link rel="stylesheet" href="../../css/style.css" />
    		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
    		<script>
    			$(function(){
    				$("#btn1").click(function(){
    					$("div[id]").css("background-color","red");
    				});
    				
    				$("#btn2").click(function(){
    					//$("input[name='newsletter']").attr("checked", true);
    					$("div[id='two']").css("background-color","red");
    				});
    				
    			});
    		</script>
    		
    		
    	</head>
    	<body>
    		<input type="button" id="btn1" value="选择有id属性的div"/>
    		<input type="button" id="btn2" value="选择有id属性的值为two的div"/>
    		
    		<hr/>
    		<div id="one">
    			<div class="mini">
    				111
    			</div>
    		</div>
    		
    		<div id="two">
    			<div class="mini">
    				222
    			</div>
    			<div class="mini">
    				333
    			</div>
    		</div>
    		
    		<div id="three">
    			<div class="mini">
    				444
    			</div>
    			<div class="mini">
    				555
    			</div>
    			<div class="mini">
    				666
    			</div>
    		</div>
    		
    		<span id="four">
    			
    		</span>
    	</body>
    </html>

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

#### 5) 表单选择器 ####

![在这里插入图片描述][2019020323010632.png]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>表单选择器</title>
    		<link rel="stylesheet" href="../../css/style.css" />
    		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
    		<script>
    			$(function(){		
    				$("#btn1").click(function(){
    	        		$(":input").css("background-color","red");
    	   			 });
    	
    	    		$("#btn2").click(function(){
    			        $(":text").css("background-color","red");
    			    });
    			});
    
    		</script>
    		
    	</head>
    	<body>
    		<input type="button" id="btn1" value="选择所有input元素" />
    		<input type="button" id="btn2" value="选择文本框" />
    		<br/>
    		<form>
    			<input type="text" /><br />
    			<input type="checkbox" /><br />
    			<input type="radio" /><br />
    			<input type="image" /><br />
    			<input type="file" /><br />
    			<input type="submit" />
    			<input type="reset" /><br />
    			<input type="password" /><br />
    			<input type="button" /><br />
    			<select><option/></select><br />
    			<textarea></textarea><br />
    			<button></button>
    		</form>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 34]  
![在这里插入图片描述][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]

# 二、使用JQ完成表格的隔行换色 #

## 1.需求分析 ##

在页面加载的时候让显示用户的表格进行隔行换色显示，效果如下：使用JQ实现！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 37]

## 2.技术分析 ##

需要使用jquery的选择器(基本选择器、基本过滤选择器)  
还需要使用jquery的CSS的方法(css(name,value))

如果CSS样式已经由美工写好，此时可以使用jquery的CSS类操作  
![在这里插入图片描述][20190203233130262.png]

## 3.步骤分析 ##

第一步：引入jquery的类库  
**第二步：直接写页面加载函数**  
第三步：直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行)  
第四步：分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色。

## 4.代码实现 ##

style.css

body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
    form div { margin:5px 0;}
    .int label { float:left; width:100px; text-align:right;}
    .int input { padding:1px 1px; border:1px solid #ccc;height:16px;}
    .sub { padding-left:100px;}
    .sub input { margin-right:10px; }
    .formtips{width: 200px;margin:2px;padding:2px;}
    .onError{
        background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;
    	padding-left:25px;
    }
    .onSuccess{
        background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;
    	padding-left:25px;
    }
    .high{
        color:red;
    }
    
      div,span,p {
        width:140px;
        height:140px;
        margin:5px;
        background:#aaa;
    	border:#000 1px solid;
        float:left;
        font-size:17px;
        font-family:Verdana;
      }
      div.mini { 
        width:55px;
        height:55px;
        background-color: #aaa;
        font-size:12px;
      }
      div.hide { 
        display:none;
      }
    
    table		{ border:0;border-collapse:collapse;}
    td	{ font:normal 12px/17px Arial;padding:2px;width:100px;}
    th			{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
    .even		{ background:#FFF38F;}  /* 偶数行样式*/
    .odd		{ background:#FFFFEE;}  /* 奇数行样式*/
    .selected		{ background:#FF6500;color:#fff;}

01\_使用jQuery完成表格隔行变色.htm

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>使用jQuery完成表格隔行换色</title>
    		<link rel="stylesheet" href="../css/style.css" />
    		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
    		<script>
    			//1.页面加载
    			$(function(){
    				/*//2.获取tbody下面的偶数行并设置背景颜色
    				$("tbody tr:even").css("background-color","yellow");
    				//3.获取tbody下面的奇数行并设置背景颜色
    				$("tbody tr:odd").css("background-color","green");*/
    				
    				//2.获取tbody下面的偶数行并设置背景颜色
    				$("tbody tr:even").addClass("even");
    				//$("tbody tr:even").removeClass("even");
    				//3.获取tbody下面的奇数行并设置背景颜色
    				$("tbody tr:odd").addClass("odd");
    			});
    		</script>
    		
    	</head>
    	<body>
    		<table border="1" width="500" height="50" align="center" id="tbl" 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 38]

# 三、使用JQ完成全选和全不选 #

## 1.需求分析 ##

在系统后台进行人员管理时，进行批量删除，使用jq完成全选和全不选  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 39]

## 2.技术分析 ##

需要使用jquery的选择器(id选择器、类选择器)

需要使用jquery的属性操作方法 prop()

## 3.步骤分析 ##

第一步：引入jquery文件

第二步：书写页面加载函数

第三步：为上面的复选框绑定单击事件

第四步：将下面所有的复选框的选中状态设置成跟上面的一致！

## 4.代码实现 ##

### 注意：attr在jquery1.11版本不适用，采用prop()来替代(在各个版本都适用)。 ###

☞ 在jquery中如何调用方法？

元素.方法（）  //使用jquery选择器获取到需要操作元素

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>使用jQuery完成复选框的全选和全不选</title>
    		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
    		
    		<script>
    			$(function(){
    				$("#select").click(function(){
    					//获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。
    					//attr方法与JQ的版本有关，在1.8.3及以下有效。
    					//$("tbody input").attr("checked",this.checked);
    					$("tbody input").prop("checked",this.checked);
    				});
    			});
    		</script>
    		
    	</head>
    	<body>
    		<table border="1" width="500" height="50" align="center" id="tbl" >
    			<thead>
    				<tr>
    					<td colspan="4">
    						<input type="button" value="添加" />
    						<input type="button" value="删除" />
    					</td>
    				</tr>
    				<tr>
    					<th><input type="checkbox" id="select"></th>
    					<th>编号</th>
    					<th>姓名</th>
    					<th>年龄</th>
    				</tr>
    			</thead>
    			<tbody>
    				<tr >
    					<td><input type="checkbox" class="selectOne"/></td>
    					<td>1</td>
    					<td>张三</td>
    					<td>22</td>
    				</tr>
    				<tr >
    					<td><input type="checkbox" class="selectOne"/></td>
    					<td>2</td>
    					<td>李四</td>
    					<td>25</td>
    				</tr>
    				<tr >
    					<td><input type="checkbox" class="selectOne"/></td>
    					<td>3</td>
    					<td>王五</td>
    					<td>27</td>
    				</tr>
    				<tr >
    					<td><input type="checkbox" class="selectOne"/></td>
    					<td>4</td>
    					<td>赵六</td>
    					<td>29</td>
    				</tr>
    				<tr >
    					<td><input type="checkbox" class="selectOne"/></td>
    					<td>5</td>
    					<td>田七</td>
    					<td>30</td>
    				</tr>
    				<tr >
    					<td><input type="checkbox" class="selectOne"/></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 40]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 41]

# 四、使用JQ完成省市二级联动 #

## 1.需求分析 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 42]  
使用jquery完成省市二级联动

## 2.技术分析 ##

### 2.1数组的遍历操作 ###

方式一：

![在这里插入图片描述][20190204101336511.png]

$(function(){
    	// 全选/ 全不选
    	$("#checkallbox").click(function(){
    		var isChecked = this.checked;
    		//使用对象访问的方式进行遍历，语法：$().each(function(){})
    		$("input[name='hobby']").each(function(){
    			this.checked = isChecked;
    		});
    	});
    });

方式二：  
![在这里插入图片描述][20190204162354721.png]

$.each( [0,1,2], function(i, n){       //[0,1,2]: 被遍历的对象, i: 角标， n： 被遍历后的内容
      alert( "Item #" + i + ": " + n );
    });

### 2.2 文档处理操作 ###

追加内容

apend:  A.append(B)  将B追加到A的内容的末尾处
    
        appendTo: A.appendTo(B)  将A加到B内容的末尾处

## 3.步骤分析 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 43]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 44]  
![在这里插入图片描述][20190204170836898.png]  
第一步：确定事件(change事件),在绑定的函数里面获取用户选择的省份

第二步：创建二维数组来存储省份和城市

第三步：遍历二维数组中的省份(与用户选择的省份进行比较)【使用JQ的遍历操作】

第四步：接着遍历数组中的城市

第五步：创建一个城市文本节点

第六步：创建option元素节点

第七步：将文本节点添加到元素节点中【使用JQ的文档操作方法】

第八步：获取第二个下拉列表并将option元素节点添加进去

第九步：清除第二个下拉列表的option内容

## 4.代码实现 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>使用jQuery完成省市二级联动</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 type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    		<script>
    			//书写页面加载函数
    			$(function(){
    				//2.创建二维数组用户存储省份和城市
    			 	var cities = new Array(3);
    				cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
    				cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
    				cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
    				cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
    				
    				//1：确定事件(change事件),在绑定的函数里面获取用户选择的省份
    				$("#province").change(function(){
    					//alert("aaa");//测试
    					//10.清除第二个下拉列表的内容
    					//empty删除匹配的元素集合中所有的子节点。
    					$("#city").empty();
    					//1.获取用户选择的省份
    					var val = this.value;
    					//alert(val);//测试拿到索引
    					
    					//3.遍历二维数组中的省份
    					//jQuery.each(object, [callback])
    					//object-需要例遍的对象或数组,callback (可选)-每个成员/元素执行的回调函数。
    					$.each(cities, function(i,n) {
    						//测试遍历二维数组中的省份
    						//alert( "Item #" + i + ": " + n );
    						//4.判断用户选择的省份和遍历的省份
    						if(val == i){
    							//5.遍历该省份下的所有城市
    							$.each(cities[i],function(j,m){
    								//测试遍历选中的该省份下的城市
    								//alert(m);
    								//6.创建城市文本节点
    								var textNode = document.createTextNode(m);
    								//7.创建option元素节点
    								//这段代码创建新的 option元素：
    								var opEle = document.createElement("option");
    								//8.将城市文本节点添加到option元素节点去
    								//$(element)-根据给定的元素名匹配所有元素
    								$(opEle).append(textNode);
    								//9.将option元素节点追加到第二个下拉列表中去
    								//$("#id")根据给定的ID匹配一个元素
    								$(opEle).appendTo($("#city"));
    							});
    						}
    					});
    				});
    			});
    		</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 id="province">
    									<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 45]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 46]

# 五、使用JQ完成下拉列表左右选择 #

## 1.需求分析 ##

见图片文字部分内容。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 47]

## 2.分析 ##

第一步：确定事件(鼠标单击事件click)  
第二步：获取左侧下拉列表被选中的option($(“\#left option:selected”))  
\[假设左侧select定义了一个id=left\]  
第三步：将获取到的option添加到右侧的下拉列表中去。(append方法的使用)

## 3.代码实现 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>下拉列表左右选择</title>
    		
    		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
    		<script>
    			$(function(){
    				/*1.选中单击去右边*/
    				//#id-根据给定的ID匹配一个元素
    				//触发每一个匹配元素的click事件
    				$("#selectOneToRight").click(function(){
    					$("#left option:selected").appendTo($("#right"));
    				});
    				
    				/*2.单击全部去右边*/
    				$("#selectAllToRight").click(function(){
    					$("#left option").appendTo($("#right"));
    				});
    				
    				/*3.选中双击去右边*/
    				//触发每一个匹配元素的dblclick事件
    				//:selected
    				//匹配所有选中的option元素
    				$("#left option").dblclick(function(){
    					$("#left option:selected").appendTo($("#right"));
    				});
    				
    				/*4.选中单击去左边*/
    				//#id-根据给定的ID匹配一个元素
    				//触发每一个匹配元素的click事件
    				$("#selectOneToleft").click(function(){
    					$("#right option:selected").appendTo($("#left"));
    				});
    				
    				/*5.单击全部去左边*/
    				$("#selectAllToleft").click(function(){
    					$("#right option").appendTo($("#left"));
    				});
    				
    				/*6.选中双击去左边*/
    				//触发每一个匹配元素的dblclick事件
    				//:selected
    				//匹配所有选中的option元素
    				$("#right option").dblclick(function(){
    					$("#right option:selected").appendTo($("#left"));
    				});
    			});
    		</script>
    	
    	</head>
    	<body>
    		<table border="1" width="600" align="center">
    			<tr>
    				<td>
    					分类名称
    				</td>
    				<td>
    					<input type="text" name="cname" value="手机数码"/>
    				</td>
    			</tr>
    			<tr>
    				<td>
    					分类描述
    				</td>
    				<td>
    					<textarea name="cdesc" rows="4" cols="20">手机数码类商品</textarea>
    				</td>
    			</tr>
    			<tr>
    				<td>
    					分类商品
    				</td>
    				<td>
    					<span style="float: left;">
    						<font color="green" face="宋体">已有商品</font><br/>
    						
    						<select multiple="multiple" style="width: 100px;height: 200px;" id="left">
    							<option>IPhone6s</option>
    							<option>小米4</option>
    							<option>锤子T2</option>
    						</select>
    						
    						<p><a href="#" style="padding-left: 20px;" id="selectOneToRight">>></a></p>
    						
    						<p><a href="#" style="padding-left: 20px;" id="selectAllToRight">>>></a></p>
    					</span>
    					<span style="float: right;">
    						<font color="red" face="宋体">未有商品</font><br/>
    						
    						<select multiple="multiple" style="width: 100px;height: 200px;" id="right">
    							<option>三星Note3</option>
    							<option>华为6s</option>
    						</select>
    						
    						<p><a href="#" style="padding-left: 20px;" id="selectOneToleft"><<</a></p>
    						
    						<p><a href="#" style="padding-left: 20px;" id="selectAllToleft"><<<</a></p>
    					</span>
    				</td>
    			</tr>
    			<tr>
    				<td colspan="2">
    					<input type='submit' value="修改"/>
    				</td>
    			</tr>
    		</table>
    	</body>
    </html>

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

# 六、使用JQ完成表单校验 #

## 1.需求分析 ##

![在这里插入图片描述][20190206195106292.png]

## 2.技术分析 ##

这里使用validation插件完成对表单数据的校验

validation插件介绍

一款优秀的表单验证插件——validation插件

### 特点： ###

1)内置验证规则：拥有必填、数字、email、url和信用卡号码等19类内置验证规则

2)自定义验证规则：可以很方便的自定义验证规则

3)简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能

4)实时验证：可以通过keyup或bulr事件触发验证，而不仅仅在表单提交的时候验证。

下载：

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 50][]  
快速入门：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 51]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 52]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 53]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 54]

### validate入门案例 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>validate入门案例</title>
    		
    		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
    		
    		<script type="text/javascript" src="../../js/jquery.validate.min.js" ></script>
    		
    		<script type="text/javascript" src="../../js/messages_zh.js" ></script>
    		<script>
    			$(function(){
    				$("#checkForm").validate({
    					rules:{
    						username:{
    							required:true,
    							minlength:6
    						},
    						password:{
    							required:true,
    							digits:true,
    							minlength:6
    						}
    					},
    					messages:{
    						username:{
    							required:"用户名不能为空!",
    							minlength:"用户名不得少于6位！"
    						},
    						password:{
    							required:"密码不能为空!",
    							digits:"密码必须是整数!",
    							minlength:"密码不得少于6位!"
    						}
    					}
    				});
    			});
    		</script>
    		
    	</head>
    	<body>
    		<form action="#" id="checkForm">
    			用户名：<input type="text" name="username" /><br />
    			密码：<input type="password" name="password"/><br />
    			<input type="submit"/>
    		</form>
    	</body>
    </html>

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

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>网站注册页面</title>
    		<style>
    			#contanier{
    				border: 0px solid white;
    				width: 1300px;
    				margin: auto;
    			}
    			
    			#top{
    				border: 0px solid white;
    				width: 100%;
    				height: 50px;
    			}
    			#menu{
    				border: 0px solid white;
    				height: 40px;
    				background-color: black;
    				padding-top: 10px;
    				margin-bottom: 15px;
    				margin-top: 10px;
    			}
    			.top{
    				border: 0px solid white;
    				width: 405px;
    				height: 100%;
    				float: left;
    				padding-left: 25px;
    			}
    			#top1{
    				padding-top: 15px;
    			}
    			#bottom{
    				margin-top: 13px;
    				text-align: center;
    			}
    			
    			#form{
    				height: 500px;
    				padding-top: 70px;
    				background-image: url(../img/regist_bg.jpg);
    				margin-bottom: 10px;
    			}
    			a{
    				text-decoration: none;
    			}
    			
    			label.error{
    				background:url(../img/unchecked.gif) no-repeat 10px 3px;
    				padding-left: 30px;
    				font-family:georgia;
    				font-size: 15px;
    				font-style: normal;
    				color: red;
    			}
    			
    			label.success{
    				background:url(../img/checked.gif) no-repeat 10px 3px;
    				padding-left: 30px;
    			}
    			
    			#father{
    				border: 0px solid white;
    				padding-left: 307px;
    			}
    			
    			#form2{
    				border: 5px solid gray;
    				width: 660px;
    				height: 450px;
    			}
    			
    		</style>
    		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
    		
    		<script type="text/javascript" src="../js/jquery.validate.min.js" ></script>
    		
    		<script type="text/javascript" src="../js/messages_zh.js" ></script>
    		<script>
    			$(function(){
    				$("#registForm").validate({
    					rules:{
    						user:{
    							required:true,
    							minlength:3
    						},
    						password:{
    							required:true,
    							digits:true,
    							minlength:6
    						},
    						repassword:{
    							required:true,
    							equalTo:"[name='password']"
    						},
    						email:{
    							required:true,
    							email:true
    						},
    						username:{
    							required:true,
    							maxlength:5
    						},
    						sex:{
    							required:true
    						}
    					},
    					messages:{
    						user:{
    							required:"用户名不能为空!",
    							minlength:"用户名不得少于3位!"
    						},
    						password:{
    							required:"密码不能为空!",
    							digits:"密码必须是整数!",
    							minlength:"密码不得少于6位!"
    						},
    						repassword:{
    							required:"确认密码不能为空!",
    							equalTo:"两次输入密码不一致!"
    						},
    						email:{
    							required:"邮箱不能为空!",
    							email:"邮箱格式不正确!"
    						},
    						username:{
    							required:"姓名不能为空!",
    							maxlength:"姓名不得多于5位!"
    						},
    						sex:{
    							required:"性别必须勾选!"
    						}
    					},
    					errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label
    					success: function(label) { //验证成功后的执行的回调函数
    						//label指向上面那个错误提示信息标签label
    						label.text(" ") //清空错误提示消息
    							.addClass("success"); //加上自定义的success类
    					}
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<div id="contanier">
    			<div id="top">
    				<div class="top">
    					<img src="../img/logo2.png" height="47px"/>
    				</div>
    				<div class="top">
    					<img src="../img/header.png" height="45px" />
    				</div>
    				<div class="top" id="top1">
    					<a href="#">登录</a>
    					<a href="#">注册</a>
    					<a href="#">购物车</a>
    				</div>
    			</div>
    			<div id="menu">
    				<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>	
    			</div>
    			<div id="form">
    				<form action="#" method="get" id="registForm">
    					<div id="father">
    						<div id="form2">
    							<table border="0px" width="100%" height="100%" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
    								<tr>
    									<td colspan="2" >
    										          
    										<font size="5">会员注册</font>   USER REGISTER 
    									</td>
    								</tr>
    								<tr>
    									<td width="180px">
    										      
    										      
    										   
    										<label for="user" >用户名</label>
    									</td>
    									<td>
    										<em style="color: red;">*</em>   <input type="text" name="user" size="35px" id="user"/>
    									</td>
    								</tr>
    								<tr>
    									<td>
    										      
    										      
    										   
    										密码
    									</td>
    									<td>
    										<em style="color: red;">*</em>   <input type="password"  name="password" size="35px" id="password" />
    									</td>
    								</tr>
    								<tr>
    									<td>
    										      
    										      
    										   
    										确认密码
    									</td>
    									<td>
    										<em style="color: red;">*</em>   <input type="password" name="repassword" size="35px"/>
    									</td>
    								</tr>
    								<tr>
    									<td>
    										      
    										      
    										   
    										Email
    									</td>
    									<td>
    										<em style="color: red;">*</em>   <input type="text" name="email" size="35px" id="email"/>
    									</td>
    								</tr>
    								<tr>
    									<td>
    										      
    										      
    										   
    										姓名
    									</td>
    									<td>
    										<em style="color: red;">*</em>   <input type="text" name="username" size="35px"/>
    									</td>
    								</tr>
    								<tr>
    									<td>
    										      
    										      
    										   
    										性别
    									</td>
    									<td>
    										<span style="margin-right: 155px;">
    											<em style="color: red;">*</em>   <input type="radio" name="sex" value="男"/>男
    											<input type="radio" name="sex" value="女"/>女<em></em>
    											<label for="sex" class="error" style="display: none;"></label>
    										</span>
    										
    									</td>
    								</tr>
    								<tr>
    									<td>
    										      
    										      
    										   
    										出生日期
    									</td>
    									<td>
    										<em style="color: red;">*</em>   <input type="text" name="birthday"  size="35px"/>
    									</td>
    								</tr>
    								<tr>
    									<td>
    										      
    										      
    										   
    										验证码
    									</td>
    									<td>
    										<em style="color: red;">*</em>   <input type="text" name="yanzhengma" />
    										<img src="../img/yanzhengma.png" style="height: 18px;width: 85px;"/>
    									</td>
    								</tr>
    								<tr>
    									<td colspan="2">
    										      
    										      
    										      
    										      
    										      
    										      
    										<input type="submit" value="注      册" height="50px"/>
    									</td>
    								</tr>
    							</table>
    						</div>
    					</div>
    				</form>
    			</div>
    			<div>
    				<img src="../img/footer.jpg"  width="100%"/>
    			</div>
    			<div id="bottom">
    				<a href="../案例一：网站信息显示页面/网站信息显示页面.html">关于我们</a>
    				<a href="#">联系我们</a>
    				<a href="#">招贤纳士</a>
    				<a href="#">法律声明</a>
    				<a href="../案例三：网站友情链接显示页面/网站友情链接显示页面.html">友情链接</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 57]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 58]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70]: /images/20220321/6058cdae9705487eafac3f9fa45ece7d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 1]: /images/20220321/a650caaa10e84365be3cac5ba56431d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 2]: /images/20220321/efaa3c9411164ec6bd47a578b8ad75b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 3]: /images/20220321/dcb6299badac4c6ba6179cdb2bfcfcd4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 4]: /images/20220321/1ad81f50731748f78e22924d2e79a509.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 5]: /images/20220321/056fb164cedd4067b572d21b2a583a03.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 6]: /images/20220321/0e9da50741ca4de8a17f22c8e6295900.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 7]: /images/20220321/53bb562ce17e4f8fb08a1f15573d1ae0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 8]: /images/20220321/49dd7daf0b58470d99819afb481d2155.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 9]: /images/20220321/9c4042a0bdf748648899da2e3711e147.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 10]: /images/20220321/7d65ec1e068c44da9af87e867ead96a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 11]: /images/20220321/afad65552b914d5683db050e88836c63.png
[20190203223949449.png]: /images/20220321/cb1c86f60b4c4b1387e573f02ee93cf4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 12]: /images/20220321/1839bf0f86ae42bbbb8ce301eddc8c65.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 13]: /images/20220321/1ce8a8bba80a45a795ce3ca2c9973eb1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 14]: /images/20220321/f4aa4c4af49340bf858f1b06e94ab853.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 15]: /images/20220321/41034aeadc89480188355c9c2ba511f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 16]: /images/20220321/f1103d7f0aba42828eb42d13c6ac4fc3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 17]: /images/20220321/05c8127e25d742cd9d1a1b4b0390a65e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 18]: /images/20220321/bb1865de3a084b969031142195410e8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 19]: /images/20220321/76d8f2ee85e348c8b25af7b3dc339a2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 20]: /images/20220321/a25c3086a6c344f3bf0bd6ceeccbc72b.png
[20190203225207573.png]: /images/20220321/c3206f258a2240d4bfbb297f006b1f2e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 21]: /images/20220321/e50b08c5b1804c59a4d5ef3245fc722b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 22]: /images/20220321/de7a40bc72d34c64b1f75d1463946687.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 23]: /images/20220321/8b51a60d74f9438eb16bf42918160fd3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 24]: /images/20220321/9baca737e0354325b00c465852641029.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 25]: /images/20220321/209a34f408a5415b8f581a7c955b09cc.png
[20190203225604465.png]: /images/20220321/4284e715c608405a92c4c1459d98d777.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 26]: /images/20220321/20bd58bc99b745348516ad78d5392e1e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 27]: /images/20220321/e2ca507449864cc28d2a9166175c0cfd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 28]: /images/20220321/c5bc6da9094a43f29f4050090095ce00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 29]: /images/20220321/48019fca3e5e4ce2961f77944ae90666.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 30]: /images/20220321/a6afee3bf0bb407a977e774d72a921d5.png
[20190203225913803.png]: /images/20220321/b9936715340b4f9b8edb1689cdcc04df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 31]: /images/20220321/435db4f6c5ca45dd90f7c935babde30e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 32]: /images/20220321/aab9b8c218e64c4d9777dde3ece1f7e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 33]: /images/20220321/e9c10e9dba1241c88c39f389a97d20d9.png
[2019020323010632.png]: /images/20220321/96e96c80bd85405f9844751698ea538a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 34]: /images/20220321/ca4c6791bc6c4f72b39c89310eae2cba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 35]: /images/20220321/d3df53b528a548a58e1456200f8c6b34.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 36]: /images/20220321/d5599fd6a40440e09054d707b7c06129.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 37]: /images/20220321/06f875416c94438eaa2f7386d505ccb8.png
[20190203233130262.png]: /images/20220321/d39ee25834904ab9b5a5fe871988faf2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 38]: /images/20220321/21898a996dd24e6f86ce3abbab3e93b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 39]: /images/20220321/ad32c51a9693465ab5b3f3428522e190.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 40]: /images/20220321/ae6ce479e98648699c8d76f15db3ea9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 41]: /images/20220321/f56eb3d505b04711a4482d7b8621140e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 42]: /images/20220321/36f10d9593264bb3b93506ba7c64e1c7.png
[20190204101336511.png]: /images/20220321/d9156623c6ad480dad7106540b0491b9.png
[20190204162354721.png]: /images/20220321/9f48238bb6624231aa4eedd80c8b378f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 43]: /images/20220321/fcf7d6edeccc4c67b3c1872b740f23a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 44]: /images/20220321/4be1fb4be3254b6b9655cae95b67abe7.png
[20190204170836898.png]: /images/20220321/a8dc56577fdf4aae87652475561bdcca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 45]: /images/20220321/c723b1714b2743ce83f6184ca2175521.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 46]: /images/20220321/e16cf2d4154e4ab6bb5e26075960accd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 47]: /images/20220321/970d5f12268e4d86aca54ac501bd414f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 48]: /images/20220321/05419194891246048b72bdee4a68b5ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 49]: /images/20220321/7b58d50a6b57433296846580bc52f24d.png
[20190206195106292.png]: /images/20220321/2c3f0f0c0e574aebbe63ea06802675ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 50]: /images/20220321/0c0c30068ddc47829e4fb75dae44a999.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 51]: /images/20220321/1934e8a2cf374ccc99a5b65993099d62.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 52]: /images/20220321/351a38cc401c42cfb8c6fcb09bd18d68.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 53]: /images/20220321/8807b8264d3840d7b091dfb2add36c0f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 54]: /images/20220321/35928eb68309493f88ce3f94b575a89c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 55]: /images/20220321/64dad5503cbd46eb9e17c27ded084da4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 56]: /images/20220321/d52206fc13ef4c82ab79c03de61b173c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 57]: /images/20220321/7337d1a9363f4e568c9f3135e4519e2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 58]: /images/20220321/6cfa4e52b0964be39591358b9b4b5f7d.png