JavaWEB_06 jQuery总结

朴灿烈づ我的快乐病毒、 2022-04-23 09:40 129阅读 0赞

## 01\_jQuery属性操作 ##

### 01\_属性attr操作.html ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>属性操作_attr</title>
    		<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
    		<script>
    			/**
    			 * 需求：
    			 * 	1.获取图片的路径
    			 * 	2.设置图片的高度属性
    			 *  3.给图片设置多个属性(宽度和高度)
    			 *  4.移出图片的高度属性
    			 */
    			
    			/**
    			 * 方法分析：
    			 * 	1.attr(name):读(获)取属性的值
    			 *  2.attr(key,value)：设置属性值
    			 *  3.attr(properties)：同时设置多个属性
    			 *  4.removeAttr(name)：删除某个属性
    			 * 
    			 * 所有方法注意查看运行显示结果，查看其中的某个方法时，请注释其它方法，后面的案例不再说明！
    			 */
    			
    			/*
    			 * 代码实现
    			 */
    			$(function(){
    				//1.attr(name):该方法用于获取属性的值(根据属性的名称)
    				var srcEle = $("img").attr("src");
    				alert(srcEle);//输出结果为该图片的路径：../../img/1.jpg
    				
    				//2.attr(key,value):该方法用于设置属性和值
    				//$("img").attr("height","800px");//设置该图片的高度属性，注意观察图片的高度变化
    				
    				//3.attr(properties)：同时设置多个属性值
    				//$("img").attr({"width":"1300px","height":"300px"});//注意观察图片发生的变化(宽高都改变)
    				
    				//4.removeAttr(name)：删除某个属性和值
    				$("img").removeAttr("width");//清除width属性后，图片变回其自身原有的大小
    				
    			});
    		</script>
    	</head>
    	<body>
    		<img src="../img/1.jpg"  width="800px" />
    	</body>
    </html>

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

### 02\_CSS类操作.html ###

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>属性操作_CSS类</title>
    		<style type="text/css">
    			.divclass {
    				color: red;
    			}
    			
    			.div1 {
    				background-color: yellow;
    			}
    			
    			#div1 {
    				border: 1px solid black;
    				width: 400px;
    				height: 250px;
    				margin: auto;
    			}
    			
    			#father {
    				border: 1px solid white;
    				width: 450px;
    				height: 300px;
    				margin: auto;
    				text-align: center;
    			}
    		</style>
    		<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    		<script>
    			/**
    			 * 需求：
    			 * 1.点击button，使一个div的背景颜色变为 黄色
    			 * 2.点击button，清空之前设置的背景颜色
    			 * 3.通过toggleClass(class) 实现点击字体变为紅色，再点击样式还原
    			 */
    
    			/**
    			 * 方法分析：
    			 *  1.addClass(class) 添加一个class属性
    			 *  2.removeClass([class]) 移除一个class属性
    			 *  3.toggleClass(class) 如果存在(不存在)就删除(添加)一个类
    			 */
    
    			/**
    			 *代码实现 
    			 */
    			$(function() {
    				// 1.点击button，使一个div的背景颜色变为黄色
    				$("#button1").click(function() {
    					//addClass(class)-为每个匹配的元素添加指定的类名。
    					//element-根据给定的元素名匹配所有元素
    					$("#div1").addClass("div1");
    				});
    
    				// 2.点击button，清空之前设置的背景颜色
    				$("#button2").click(function() {
    					//removeClass([class])-从所有匹配的元素中删除全部或者指定的类
    					$("#div1").removeClass("div1");
    				});
    
    				// 3.通过toggleClass(class) 实现点击字体变为紅色，再点击样式还原
    				$("#button3").click(function() {
    					//toggleClass(class)-如果存在（不存在）就删除（添加）一个类
    					$("#div1").toggleClass("divclass");
    				});
    			});
    		</script>
    	</head>
    
    	<body>
    		<div id="father">
    			<div id="div1">AAAAAA</div><br />
    			<input type="button" value="背景颜色变为黄色" id="button1" />
    			<input type="button" value="背景颜色清空" id="button2" />
    			<input type="button" value="字体颜色开关" id="button3" />
    		</div>
    	</body>
    
    </html>

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

### 03\_HTML代码操作.html ###

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>属性操作_html代码</title>
    		<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    		<script>
    			/**
    			 * 需求：
    			 * 	1.点击按钮获取div中 html
    			 * 	2.点击按钮设置div中html
    			 */
    
    			/**
    			 * 方法分析
    			 * 	1.html()方法用于读取innerHTML
    			 * 	2.html(val)方法用于设置innerHTML
    			 */
    			
    			/**
    			 *代码实现 
    			 */
    			
    			$(function(){
    				//1.点击按钮获取div中 html
    				$("#btn1").click(function(){
    					//html()-返回值:String
    					var divEle = $("div").html();
    					alert(divEle);//<p>传智播客</p>
    				});
    				
    				//2.点击按钮设置div中html
    				$("#btn2").click(function(){
    					//html(val)方法用于设置innerHTML
    					$("div").html("Java学院");//覆盖之前此位置的内容
    				});
    				
    			})
    		</script>
    	</head>
    
    	<body>
    		<div><p>传智播客</p></div>
    		<input type="button" value="获取html" id="btn1" />
    		<input type="button" value="设置html" id="btn2" />
    	</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]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 9]

### 04\_文本text操作.html ###

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>属性操作_文本text</title>
    		<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    		<script>
    			/**
    			 * 需求：
    			 * 	1.点击按钮获取div中text
    			 * 	2.点击按钮设置div中text
    			 */
    
    			/**
    			 * 方法分析
    			 * 	1.text()方法用于读取文本内容
    			 * 	2.text(val)方法用于设置文本内容
    			 */
    			
    			/**
    			 *代码实现 
    			 */
    			
    			$(function(){
    				//1.点击按钮获取div中 text
    				$("#btn1").click(function(){
    					//text()方法用于读取文本内容
    					var divEle = $("div").text();
    					alert(divEle);//传智播客
    				});
    				
    				//2.点击按钮设置div中text
    				$("#btn2").click(function(){
    					//text(val)方法用于设置文本内容
    					$("div").text("Java学院");//覆盖之前此位置的内容
    				});
    				
    			})
    		</script>
    	</head>
    
    	<body>
    		<div><p>传智播客</p></div>
    		<input type="button" value="获取text" id="btn1" />
    		<input type="button" value="设置text" id="btn2" />
    	</body>
    
    </html>

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

### 05\_值val操作.html ###

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>属性操作_值val</title>
    		<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    		<script>
    			/**
    			 * 需求：
    			 *  1.点击按钮获得文本框、下拉框、单选框选中的value
    			 *  2.点击按钮设置用户名的默认值为“老王”
    			 */
    
    			/**
    			 * 方法分析
    			 * 	1.val()方法用于读取元素value属性
    			 * 	2.val(val)方法用于设置元素value属性
    			 */
    			
    			/**
    			 *代码实现 
    			 */
    			
    			$(function(){
    				//1.点击按钮获得文本框、下拉框、单选框选中的value
    				$("#btn1").click(function(){
    					//val()方法用于读取元素value属性
    					alert($("#username").val());
    					alert($("#city").val());
    					alert($("input[type='radio']:checked").val());
    				});
    					
    				//2.点击按钮设置用户名的默认值为“老王”
    				$("#btn2").click(function(){
    					//val(val)方法用于设置元素value属性
    					$("#username").val("老王");
    				});
    			})
    		</script>
    	</head>
    
    	<body>
    		用户名 <input type="text" id="username" /> <br/> 
    		性别 <input type="radio" name="gender" value="男" />男
    			<input type="radio" name="gender" value="女" checked="checked"/> 女<br/> 
    		城市
    			<select id="city">
    				<option value="北京">北京</option>
    				<option value="上海">上海</option>
    				<option value="广州">广州</option>
    			</select> <br/>
    			<input type="button" value="获取val" id="btn1" />
    			<input type="button" value="设置val" id="btn2" />
    	</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]  
![在这里插入图片描述][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]

## 02\_jQuery文档处理 ##

### 01\_插入操作.html ###

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>文档处理_插入操作</title>
    		<script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			/**
    			 * 需求 
    			 *  在id=edu下增加<option value="大专">大专</option> 
    			 */
    
    			/**
    			 * 方法分析：
    			 *  内部插入
    			 * 		1.append(content):内部结尾处，将B追加到A里面去
    			 *  	2.appendTo(content):内部结尾处，将A追加到B里面去
    			 *  	3.prepend(content):内部开始处，将B追加到A里面去
    			 *  	4.prependTo(content):内部开始处，将B追加到A里面去
    			 * 	外部插入
    			 *  	1.after(content):外部，将B追加到A后面
    			 * 		2.before(content):外部，将A追加到B前面
    			 * 		3.insertAfter(content):外部，将A追加到B后面
    			 * 		4.insertBefore(content)::外部，将A追加到B前面
    			 */
    
    			$(function() {
    				// 追加 option 内容大专
    				// 创建元素
    				var $newNode = $("<option value='大专'>大专</option>");
    				
    				//内部插入
    				//$("#edu").append($newNode);   // 内部结尾处，将B追加到A里面去
    				//$("#edu").prepend($newNode);  // 内部开始处，将B追加到A里面去
    
    				//外部插入
    				//$("option[value='本科']").after($newNode);//外部，将B追加到A后面
    				$newNode.insertBefore($("option:contains('硕士')"));//外部，将A追加到B前面
    			});
    		</script>
    
    	</head>
    
    	<body>
    		<select id="edu">
    			<option value="博士">博士</option>
    			<option value="硕士">硕士</option>
    			<option value="本科">本科</option>
    			<option value="高中">高中</option>
    		</select>
    
    	</body>
    
    </html>

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

### 02\_复制操作.html ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>文档处理_复制操作</title>
    		<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
    		<script>
    			/**
    			 * 需求
    			 * 	1.单击苹果、橘子或者菠萝列表项，复制点击的内容并追加到ul的末尾
    			 *  2.单击苹果、橘子或者菠萝列表项，复制点击的内容并追加到ul的末尾，要求复制后的内容也具有复制的能力
    			 */
    			
    			/**
    			 * 方法分析：
    			 * 	1.clone()：克隆匹配的DOM元素并且选中这些克隆的副本。
    			 *  2.clone()：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
    			 */
    		
    			 $(function(){
    			 	//点击li列表项，将当选点击的li内容追加到ul末尾
    				$("ul li").click(function(){
    				    //$(this).clone().appendTo("ul"); // 复制当前点击的节点，并将它追加到<ul>元素
    				    $(this).clone(true).appendTo("ul");//设置参数true后，复制后的内容也具备单击事件
    				})   
    			  });
    		</script>
    	</head>
    	<body>
    		<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
    		<ul>
    		  <li title='苹果'>苹果</li>
    		  <li title='橘子'>橘子</li>
    		  <li title='菠萝'>菠萝</li>
    		</ul>
    	</body>
    </html>

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

### 03\_替换操作.html ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>文档处理_替换操作</title>
    		<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
    		<script>
    			$(function(){
    				//将B的内容替换掉A处的内容
    				//replaceWith(content)-将所有匹配的元素替换成指定的HTML或DOM元素
    			 	$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>"); 
    			 	//同样的实现： $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p"); 
    			});
    		</script>
    	</head>
    	<body>
    		<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
    		<ul>
    		  <li title='苹果'>苹果</li>
    		  <li title='橘子'>橘子</li>
    		  <li title='菠萝'>菠萝</li>
    		</ul>
    	</body>
    </html>

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

### 04\_删除操作.html ###

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>文档处理_删除操作</title>
    		<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    		<script type="text/javascript">
    			/**
    			 * 需求
    			 * 	分别使用detach和remove 删除带有click事件的p标签，删除后再将p 重新加入body 查看事件是否存在
    			 */
    			
    			/**
    			 * 方法分析
    			 * 	1.remove()：删除节点后，事件也会删除
    			 *  2.detach()：删除节点后，事件会保留 从1.4新API 
    			 *  3.empty():清空元素中的所有后代节点。(这个案例是要删除而不是清空，需要注意)
    			 */
    			
    			/**
    			 * 代码实现 
    			 */
    			$(function() {
    				$("p").click(function() {
    					alert($(this).text());
    				});
    				// 使用remove方法删除 p元素，连同事件一起删除
    				//var $p = $("p").remove();
    				// 使用detach删除，事件会保留
    				var $p = $("p").detach();
    
    				$("div").append($p);
    			});
    		</script>
    
    	</head>
    
    	<body>
    		<p>AAA</p>
    		
    		<div>BBB</div>
    	</body>
    
    </html>

![在这里插入图片描述][20190206205248643.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 27]  
// 使用detach删除，事件会保留  
点击AAA会弹出下面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 28]

### 05\_删除相关操作的区别.html ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>删除相关操作的区别</title>
    		<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
    		<script>
    			/**
    			 * 方法分析
    			 * 	1.remove()：删除节点后，事件也会删除
    			 *  2.empty():清空元素中的所有后代节点。(这个案例是要删除而不是清空，需要注意)
    			 */
    			$(function(){
    				//清空第二个li元素节点的所有后代节点(此处是文本节点橘子)，通过firebug查看html源码验证
    				//:eq--匹配一个给定索引值的元素
    				$("ul li:eq(1)").empty();
    				
    				//删除第一个li元素节点
    				//$("ul li:eq(0)").remove();
    			});
    		</script>
    	</head>
    	<body>
    		<p title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
    		<ul>
    			<li title='苹果'>苹果</li>
    			<li title='橘子'>橘子</li>
    			<li title='菠萝'>菠萝</li>
    		</ul>
    	</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]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 31]

## 03\_jQuery遍历操作 ##

### 01\_each(callback).html ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>使用对象访问方式遍历</title>
    		<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
    		<script>
    			$(function(){
    				// 全选/ 全不选
    				$("#checkallbox").click(function(){
    					var isChecked = this.checked;
    					//使用对象访问的方式进行遍历，语法：$().each(function(){})
    					$("input[name='hobby']").each(function(){
    						this.checked = isChecked;
    					});
    				});
    			});
    		</script>
    	</head>
    	<body>
    		请选择您的爱好<br/>
    		<input type="checkbox" id="checkallbox" /> 全选/全不选 <br/>
    		<input type="checkbox" name="hobby" value="足球" /> 足球
    		<input type="checkbox" name="hobby" value="篮球" /> 篮球
    		<input type="checkbox" name="hobby" value="游泳" /> 游泳
    		<input type="checkbox" name="hobby" value="唱歌" /> 唱歌 <br/>
    	</body>
    </html>

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

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>使用工具类遍历方式</title>
    		<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
    		<script>
    			/**
    			 * 说明：两种遍历方式，掌握其中一种即可，个人觉得此种方式较容易理解!
    			 */
    		
    			$(function(){
    				// 全选/ 全不选
    				$("#checkallbox").click(function(){
    					var isChecked = this.checked;
    					//使用工具类遍历方式，语法：$.each(array，function(i,j){})  
    					//其中array代表被遍历的对象，i代表角标，j代表遍历后的内容。
    					$.each($("input[name='hobby']"), function(i,j) {
    						//checked 属性设置或返回 checkbox 是否应被选中
    						j.checked = isChecked;
    					});
    				});
    			});
    		</script>
    	</head>
    	<body>
    		请选择您的爱好<br/>
    		<input type="checkbox" id="checkallbox" /> 全选/全不选 <br/>
    		<input type="checkbox" name="hobby" value="足球" /> 足球
    		<input type="checkbox" name="hobby" value="篮球" /> 篮球
    		<input type="checkbox" name="hobby" value="游泳" /> 游泳
    		<input type="checkbox" name="hobby" value="唱歌" /> 唱歌 <br/>
    	</body>
    </html>

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

## 04\_jQuery的CSS操作 ##

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>属性操作_CSS类</title>
    		<style type="text/css">
    			.divclass {
    				color: red;
    			}
    			
    			.div1 {
    				background-color: yellow;
    			}
    			
    			#div1 {
    				border: 1px solid black;
    				width: 400px;
    				height: 250px;
    				margin: auto;
    			}
    			
    			#father {
    				border: 1px solid white;
    				width: 450px;
    				height: 300px;
    				margin: auto;
    				text-align: center;
    			}
    		</style>
    		<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    		<script>
    			/**
    			 * 需求：
    			 * 1.点击button，使一个div的背景颜色变为绿色
    			 * 2.点击button，使一个div的背景颜色变为绿色以及里面内容的字体颜色变成红色
    			 */
    
    			/**
    			 * 方法分析：
    			 *  1.css(name, value) 设置一个CSS样式属性
    			 *  2.css(properties) 传递key - value对象， 设置多个CSS样式属性
    			 */
    
    			/**
    			 * CSS操作方法汇总：
    			 * 1.通过attr属性设置 / 获取 style属性
    			 * 	attr('style', 'color:red'); // 添加style属性
    			 * 2.设置CSS样式属性
    			 * 	css(name, value) 设置一个CSS样式属性
    			 * 	css(properties) 传递key - value对象， 设置多个CSS样式属性		
    			 * 3.设置class属性
    			 * 	addClass(class) 添加一个class属性
    			 * 	removeClass([class]) 移除一个class属性
    			 * 	toggleClass(class) 如果存在(不存在)就删除(添加) 一个类
    			 */
    	
    			/**
    			 *代码实现 
    			 */
    			$(function() {
    				// 1.点击button，使一个div的背景颜色变为绿色
    				//方式一
    				$("#button1").click(function() {
    					$("#div1").css("background-color","green");
    				});
    				
    				//方式二：
    				//1.通过attr属性设置 / 获取 style属性
    //				$("#button1").click(function() {
    //					$("#div1").attr("style","background-color:green");
    //				});
    
    				// 2.点击button，使一个div的背景颜色变为绿色，内容字体颜色变成红色
    				$("#button2").click(function() {
    					$("#div1").css({"background-color":"green","color":"red"});
    				});
    			});
    		</script>
    	</head>
    
    	<body>
    		<div id="father">
    			<div id="div1">AAAAAA</div><br />
    			<input type="button" value="背景颜色变为绿色" id="button1" />
    			<input type="button" value="背景颜色变为绿色内容字体变成红色" id="button2" />
    		</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]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 37]

## 05\_jQuery事件 ##

### 01\_页面未加载执行失败.html ###

[对元素的操作和事件的绑定需要等待一个合适的时机][Link 1]

### 02\_事件绑定 ###

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>点击展开</title>
    		<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() {
    				//bind(type, [data], fn)
    				//这个代码能使为ID的元素响应click事件
    				$("#panel h5.head").bind("click", function() {
    					//next([expr])-找到每个段落的后面紧邻的同辈元素
    					var $content = $(this).next();
    					//:visible-匹配所有的可见元素
    					if($content.is(":visible")) {
    						//隐藏显示的元素
    						$content.hide();
    					} else {
    						//显示隐藏的匹配元素
    						$content.show();
    					}
    				})
    			})
    		</script>
    	</head>
    
    	<body>
    		<div id="panel">
    			<h5 class="head">什么是jQuery?</h5>
    			<div class="content">
    				jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
    			</div>
    		</div>
    	</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]

### 02\_鼠标滑过.html ###

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>鼠标滑过</title>
    		<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() {
    				//在每一个匹配元素的mouseover事件中绑定一个处理函数
    				//mouseover事件会在鼠标移入对象时触发
    				$(".head").mouseover(function() {
    					//next([expr])-找到每个段落的后面紧邻的同辈元素
    					//.show()-显示隐藏的匹配元素
    					$(this).next().show();
    				
    				//在每一个匹配元素的mouseout事件中绑定一个处理函数
    				//mouseout事件在鼠标从元素上离开后会触发
    				}).mouseout(function() {
    					//next([expr])-找到每个段落的后面紧邻的同辈元素
    					//.hide()-隐藏显示的元素
    					$(this).next().hide();
    				})
    			})
    		</script>
    	</head>
    
    	<body>
    		<div id="panel">
    			<h5 class="head">什么是jQuery?</h5>
    			<div class="content">
    				jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
    			</div>
    		</div>
    	</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]

### 03\_移除事件 ###

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>事件移除</title>
    		<style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    			}
    			
    			body {
    				font-size: 13px;
    				line-height: 130%;
    				padding: 60px;
    			}
    			
    			p {
    				width: 200px;
    				background: #888;
    				color: white;
    				height: 16px;
    			}
    		</style>
    		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
    		<script type="text/javascript">
    			$(function() {
    				//bind(type, [data], fn)
    				//这个代码能使为ID的元素响应click事件
    				$('#btn').bind("click", function() {
    					$('#test').append("<p>我的绑定函数1</p>");
    				});
    				$('#delAll').click(function() {
    					//unbind() 方法移除被选元素的事件处理程序
    					$('#btn').unbind("click");
    				});
    			})
    		</script>
    	</head>
    
    	<body>
    		<button id="btn">点击我</button>
    		<div id="test"></div>
    		<button id="delAll">删除所有事件</button>
    	</body>
    
    </html>

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

### 04\_合成事件 ###

#### 01\_合成事件hover.html ####

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>合成事件hover</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() {
    				//hover(over, out)
    				$(".head").hover(function() {
    					$(this).next().show();
    				}, function() {
    					$(this).next().hide();
    				})
    			})
    		</script>
    	</head>
    
    	<body>
    		<div id="panel">
    			<h5 class="head">什么是jQuery?</h5>
    			<div class="content">
    				jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
    			</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]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 47]

#### 02\_合成事件toggle.html ####

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>合成事件toggle</title>
    		<link rel="stylesheet" type="text/css" href="../../../css/style.css" />
    		<script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
    		<script type="text/javascript">
    			$(function() {
    				$(".head").toggle(function() {
    					$(this).next().hide();
    				}, function() {
    					$(this).next().show();
    				})
    			})
    		</script>
    	</head>
    
    	<body>
    		<div id="panel">
    			<h5 class="head">什么是jQuery?</h5>
    			<div class="content">
    				jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
    			</div>
    		</div>
    	</body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 49]  
![在这里插入图片描述][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]: /images/20220321/e3cb18f4f0a54bb4b302f84c46ec5ac6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 1]: /images/20220321/00d19f2d52a44cccb8267b9fcda74939.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 2]: /images/20220321/31f7e63a5bd544218b4bf9e7708d3f74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 3]: /images/20220321/6edc3be137734d039e9cb716cc24e6dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 4]: /images/20220321/cd683fb9596940cc84d00b4ef2ac8ffb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 5]: /images/20220321/58c2d32f9b6c4c0a9e7758572646dcc4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 6]: /images/20220321/a00d301edc5c4f3790a5379f7a6ad047.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 7]: /images/20220321/ba12d58bc21c47548b66798be7fed71d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 8]: /images/20220321/d50b478a78db4fe6b0e7a50110653a3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 9]: /images/20220321/ccbbe41d34a84a41a51736ffa84faf48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 10]: /images/20220321/c20a9ed5048c4c23b67e6c0b69b0475d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 11]: /images/20220321/889250439b5b4bb282d1f0f5dd56ead9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 12]: /images/20220321/67c2f44ceba0417d82425038f984dd09.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 13]: /images/20220321/4b7dfe2b62e34217b3a5ffb69b589379.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 14]: /images/20220321/77ee7ad96083446fad09b11759276e65.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 15]: /images/20220321/2f2870a32c124cf8a669a13e0b9e332d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 16]: /images/20220321/240415bc01f7410590cd1074541aa5ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 17]: /images/20220321/79f6e458ea1a442ba3af4f9e0f19312e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 18]: /images/20220321/7a6f344e4f30442e9dfd00cf0584f7be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 19]: /images/20220321/db46a6090d4b4c9e8922b5da7a693e3f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 20]: /images/20220321/85e1f703e9284d6b8bc58538654419d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 21]: /images/20220321/12eb06430e3043f6b8aaca55cf52c2cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 22]: /images/20220321/1f825620ec8d47f194dc372b0aceafca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 23]: /images/20220321/6ec198f467ff44ab8912985880787f02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 24]: /images/20220321/2ccb810971f0426ea7eae3db2bf38656.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 25]: /images/20220321/8441cd4767ff4c2083281a41dc31c477.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 26]: /images/20220321/e5361e48859c42a7aa7593bdbf85c382.png
[20190206205248643.png]: /images/20220321/3e448a9157184a95a0fe22f79d969b8d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 27]: /images/20220321/4d59f451d6f24580b0cb4a8e4a8a8a73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 28]: /images/20220321/0230c56df6fe40f7a911233454f8ac86.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 29]: /images/20220321/28bea59bc8f4476c9815f5f6dd20170d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 30]: /images/20220321/56b7b88f8c6d4ef7a855ea75f53387ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 31]: /images/20220321/2c84f51b87e6414996748d2054ae0d82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 32]: /images/20220321/a41600e4479048d385fb2d7e164fca50.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 33]: /images/20220321/7effbacaa0b540c1b8e223906eb3b3fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 34]: /images/20220321/8220bc315d564073b678987f15262e64.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 35]: /images/20220321/5c14162f13fb45e1940c12318f964b39.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 36]: /images/20220321/3ae36a7b70c64f89954bf9a1c21e1b7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 37]: /images/20220321/4a3abfae23f746708690a4298960a936.png
[Link 1]: https://blog.csdn.net/weixin_40807247/article/details/86768315
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 38]: /images/20220321/25f27e2c277b4a82b77fa7c1ad9dc21f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 39]: /images/20220321/a075eb5cf6894bd7b0eb8bab3a802639.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 40]: /images/20220321/ce0b01bd0ff24b24b2352f91ba54adc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 41]: /images/20220321/3f34623d84d74aba871ffededa294b49.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 42]: /images/20220321/c5b7078a9c234a24b047d463249dc1a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 43]: /images/20220321/3191a2c20b134e2eafbf983fd12b078b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 44]: /images/20220321/75dce71dd5134bdebd6b7fe5ac7d1536.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 45]: /images/20220321/0642f82a4b514d6e85ccbafe59af5211.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 46]: /images/20220321/693f7e025ae64c74ae43edaf8d4072fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 47]: /images/20220321/bf657371d6fd428f95d12aea1b16dc60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 48]: /images/20220321/5415d1b4f5784181b47e84de2f7d1e29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 49]: /images/20220321/c13502e18661452fb57f1022f14b2f5d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 50]: /images/20220321/5e77624763164fe3925d74530e2d7d5c.png