DOM编程事件&正则表达式&表单校验

水深无声 2023-10-03 19:41 13阅读 0赞

**目录**

一、增加

二、删除

三、查找

购物车

四、事件和事件对象

4.1 事件对象

4.2 目标事件对象

4.3 事件监听对象

4.4 文档事件对象

4.5 鼠标键盘事件对象

4.6 事件阻断

4.7 鼠标事件

4.8 键盘事件

4.9 框架/对象（Frame/Object）事件

4.10 表单事件

事件冒泡

五、表单验证 正则表达式

5.1 正则表达式

表单校验特效

--------------------

> BOM 浏览器对象模型 操作window对象对浏览器窗口进行编程： 历史对象 地址栏对象 文档对象 导航对象 其他
> 
> DOM 文档对象模型 操作document对象 对网页上面的标签进行增删改查
> 
> JavaScript三大组成部分 ： ECMAScript (语法) BOM编程 DOM编程

## 一、增加 ##

传统模式

<input id="hehe" /><button id="haha">广播</button>
    		<div id="xixi"></div>
    		<script>
    			haha.onclick=function(){
    				var s =document.createElement("span");
    				s.innerHTML=hehe.value;
    				xixi.appendChild(s);
    			}
    		</script>

模板模式

<input id="hehe" /><button id="haha">广播</button>
    		<div id="xixi"></div>
    		<script type="text/template" id="lala">
    			<div>
    				<img src = "img/1.jpg"  width="150px" />八嘎说:
    				<p>xxx</p>
    				<span>yyy</span>
    				<button>评论</button>
    				<button>点赞</button>
    				<button>删除</button>
    			</div>
    		</script>
    		<script>
    			haha.onclick=function(){
    				xixi.innerHTML +=lala.innerHTML.replace("xxx",hehe.value).replace("yyy",new Date());
    			}
    		</script>

## 二、删除 ##

<div id="a2" style="width: 150px;border: 2px solid red;">
    			是兄弟就来啃我
    			<button id="a1">关闭</button>
    		</div>
    		
    		<input id="hehe" /><button id="haha">广播</button>
    		<div id="xixi"></div>
    		
    		<script type="text/template" id="lala">
    			<div class="k">
    				<img  src="img/1.jpg" width="50px" />赵鸭子说:
    				<p>xxx</p>
    				<span>yyy</span>
    				<button>评论</button>
    				<button>点赞</button>
    				<button onclick="del(this)">删除</button>
    			</div>
    		</script>
    		<script>
    			
    			function del(a){
    				a.parentNode.remove();
    			}
    			
    			a1.onclick=function(){
    				a2.remove();
    			}
    			
    			haha.onclick=function(){
    				xixi.innerHTML += lala.innerHTML.replace("xxx",hehe.value).replace("yyy",new Date());
    			}
    		</script>

## 三、查找 ##

<div id="haha">
    			<p id="hehe">A</p>
    			<p id="hehe">
    				<span id="xixi">
    					<span>1</span>
    					<span>2</span>
    					<span>3</span>
    				</span>
    			</p>
    			<p id="hehe">B</p>
    		</div>
    			
    			<script>
    				//获取所有id标签
    				var a = document.getElementById("xixi");
    				//获取第一个子标签
    				var d1 = a.firstElementChild;
    				//获取最后一个子标签
    				var d2 = a.lastElementChild;
    				//获取所有的子标签
    				var d3 = a.children;
    				//获取父级标签
    				var d4 = a.parentElement;
    				//获取父级标签
    				var d5 = a.parentNode;
    				//获取父级的父级标签
    				var d6 = a.parentNode.parentNode;
    				//获取往下同级的标签
    				var d7 = d5.nextElementSibling;
    				//获取网上同级的标签
    				var d8 = d5.previousElementSibling;
    				//使用选择器获取符合要求的所有标签 并以数组的形式进行返回
    				var d9 = document.querySelectorAll("#hehe");
    				//使用选择器获取符合要求的第一个标签
    				var d10 = document.querySelector("span");
    			</script>

## 购物车 ##

## 四、事件和事件对象 ##

> 事件就是 用户在浏览器中的操作 例如：点击事件  
> 事件对象 用户触发事件时 所有的信息封装成一个对象  
> 例如： 用户点击 这是一个事件 那么 他用的是左键点击还是右键点击 点击的时候是否按下了ctrl shift

#### 4.1 事件对象 ####

常量

<table> 
 <thead> 
  <tr> 
   <th>静态变量</th> 
   <th>描述</th> 
   <th>DOM</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>CAPTURING-PHASE</td> 
   <td>当前事件阶段为捕获阶段(1)</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>AT-TARGET</td> 
   <td>当前事件是目标阶段,在评估目标事件(1)</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>BUBBLING-PHASE</td> 
   <td>当前的事件为冒泡阶段 (3)</td> 
  </tr> 
 </tbody> 
</table>

属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
   <th>DOM</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-bubbles.html" title="bubbles" rel="nofollow">bubbles</a></td> 
   <td>返回布尔值，指示事件是否是起泡事件类型。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-cancelable.html" title="cancelable" rel="nofollow">cancelable</a></td> 
   <td>返回布尔值，指示事件是否可拥可取消的默认动作。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-currenttarget.html" title="currentTarget" rel="nofollow">currentTarget</a></td> 
   <td>返回其事件监听器触发该事件的元素。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>eventPhase</td> 
   <td>返回事件传播的当前阶段。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-target.html" title="target" rel="nofollow">target</a></td> 
   <td>返回触发此事件的元素（事件的目标节点）。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-timestamp.html" title="timeStamp" rel="nofollow">timeStamp</a></td> 
   <td>返回事件生成的日期和时间。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-type.html" title="type" rel="nofollow">type</a></td> 
   <td>返回当前 Event 对象表示的事件的名称。</td> 
   <td>2</td> 
  </tr> 
 </tbody> 
</table>

方法

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
   <th>DOM</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>initEvent()</td> 
   <td>初始化新创建的 Event 对象的属性。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>preventDefault()</td> 
   <td>通知浏览器不要执行与事件关联的默认动作。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>stopPropagation()</td> 
   <td>不再派发事件。</td> 
   <td>2</td> 
  </tr> 
 </tbody> 
</table>

#### 4.2 目标事件对象 ####

方法

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
   <th>DOM</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>addEventListener()</td> 
   <td>允许在目标事件中注册监听事件(IE8 = attachEvent())</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>dispatchEvent()</td> 
   <td>允许发送事件到监听器上 (IE8 = fireEvent())</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>removeEventListener()</td> 
   <td>运行一次注册在事件目标上的监听事件(IE8 = detachEvent())</td> 
   <td>2</td> 
  </tr> 
 </tbody> 
</table>

#### 4.3 事件监听对象 ####

方法

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
   <th>DOM</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>handleEvent()</td> 
   <td>把任意对象注册为事件处理程序</td> 
   <td>2</td> 
  </tr> 
 </tbody> 
</table>

#### 4.4 文档事件对象 ####

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
   <th>DOM</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>createEvent()</td> 
   <td></td> 
   <td>2</td> 
  </tr> 
 </tbody> 
</table>

#### 4.5 鼠标键盘事件对象 ####

属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
   <th>DOM</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-altkey.html" title="altKey" rel="nofollow">altKey</a></td> 
   <td>返回当事件被触发时，"ALT" 是否被按下。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-button.html" title="button" rel="nofollow">button</a></td> 
   <td>返回当事件被触发时，哪个鼠标按钮被点击。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-clientx.html" title="clientX" rel="nofollow">clientX</a></td> 
   <td>返回当事件被触发时，鼠标指针的水平坐标。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-clienty.html" title="clientY" rel="nofollow">clientY</a></td> 
   <td>返回当事件被触发时，鼠标指针的垂直坐标。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-ctrlkey.html" title="ctrlKey" rel="nofollow">ctrlKey</a></td> 
   <td>返回当事件被触发时，"CTRL" 键是否被按下。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-key-location.html" title="Location" rel="nofollow">Location</a></td> 
   <td>返回按键在设备上的位置</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-key-charcode.html" title="charCode" rel="nofollow">charCode</a></td> 
   <td>返回onkeypress事件触发键值的字母代码。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-key-key.html" title="key" rel="nofollow">key</a></td> 
   <td>在按下按键时返回按键的标识符。</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-key-keycode.html" title="keyCode" rel="nofollow">keyCode</a></td> 
   <td>返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-key-which.html" title="which" rel="nofollow">which</a></td> 
   <td>返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-metakey.html" title="metaKey" rel="nofollow">metaKey</a></td> 
   <td>返回当事件被触发时，"meta" 键是否被按下。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-relatedtarget.html" title="relatedTarget" rel="nofollow">relatedTarget</a></td> 
   <td>返回与事件的目标节点相关的节点。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-screenx.html" title="screenX" rel="nofollow">screenX</a></td> 
   <td>返回当某个事件被触发时，鼠标指针的水平坐标。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-screeny.html" title="screenY" rel="nofollow">screenY</a></td> 
   <td>返回当某个事件被触发时，鼠标指针的垂直坐标。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-shiftkey.html" title="shiftKey" rel="nofollow">shiftKey</a></td> 
   <td>返回当事件被触发时，"SHIFT" 键是否被按下。</td> 
   <td>2</td> 
  </tr> 
 </tbody> 
</table>

方法

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
   <th>W3C</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>initMouseEvent()</td> 
   <td>初始化鼠标事件对象的值</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>initKeyboardEvent()</td> 
   <td>初始化键盘事件对象的值</td> 
   <td>3</td> 
  </tr> 
 </tbody> 
</table>

> 用altKey来判断事件触发时，ALT是否被按下 Ctrl Shift Meta 都是一样的

<button id="haha">改变就是好事</button>
    		<script type="text/javascript">
    			haha.onclick=function(e){
    				if(e.altKey){
    					document.body.style.backgroundColor = "yellow";
    				}else{
    					document.body.style.backgroundColor = "blue";
    				}
    			}
    		</script>

> onmousedown 鼠标被按下

#### 4.6 事件阻断 ####

> 在事件中 默认 return true; 代表事件正常执行 如果要阻断事件 则 return false;

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
   <th>DOM</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onclick.html" title="onclick" rel="nofollow">onclick</a></td> 
   <td>当用户点击某个对象时调用的事件句柄。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-oncontextmenu.html" title="oncontextmenu" rel="nofollow">oncontextmenu</a></td> 
   <td>在用户点击鼠标右键打开上下文菜单时触发</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-ondblclick.html" title="ondblclick" rel="nofollow">ondblclick</a></td> 
   <td>当用户双击某个对象时调用的事件句柄。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onmousedown.html" title="onmousedown" rel="nofollow">onmousedown</a></td> 
   <td>鼠标按钮被按下。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onmouseenter.html" title="onmouseenter" rel="nofollow">onmouseenter</a></td> 
   <td>当鼠标指针移动到元素上时触发。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onmouseleave.html" title="onmouseleave" rel="nofollow">onmouseleave</a></td> 
   <td>当鼠标指针移出元素时触发</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onmousemove.html" title="onmousemove" rel="nofollow">onmousemove</a></td> 
   <td>鼠标被移动。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onmouseover.html" title="onmouseover" rel="nofollow">onmouseover</a></td> 
   <td>鼠标移到某元素之上。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onmouseout.html" title="onmouseout" rel="nofollow">onmouseout</a></td> 
   <td>鼠标从某元素移开。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onmouseup.html" title="onmouseup" rel="nofollow">onmouseup</a></td> 
   <td>鼠标按键被松开。</td> 
   <td>2</td> 
  </tr> 
 </tbody> 
</table>

####  ####

#### 4.7 鼠标事件 ####

> onclick:当用户点击某个对象时调用的事件句柄。
> 
> ondblclick:当用户双击某个对象时调用的事件句柄。
> 
> onmousedown:鼠标按钮被按下。
> 
> onmouseup:鼠标按键被松开。
> 
> onmouseenter:当鼠标指针移动到元素上时触发。
> 
> onmouseleave:当鼠标指针移出元素时触发。

<button id="dd">点赞</button>
    		<span id="ss">传奇</span>
    		<script type="text/javascript">
    			dd.onclick=function(){
    				dd.innerHTML= "已赞";
    			}
    			dd.ondblclick=function(){
    				dd.innerHTML="大佬666 一刀8个9";
    			}
    			
    			ss.onmouseenter=function(){
    				ss.style.backgroundColor="blue";
    			}
    			ss.onmouseleave = function(){
    				ss.style.backgroundColor="red";
    			}
    			ss.onmousedown = function(){
    				ss.innerHTML="拉环";
    			}
    			ss.onmouseup=function(){
    				ss.innerHTML="爆炸";
    			}
    		</script>

#### 4.8 键盘事件 ####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
   <th>DOM</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onkeydown.html" title="onkeydown" rel="nofollow">onkeydown</a></td> 
   <td>某个键盘按键被按下。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onkeypress.html" title="onkeypress" rel="nofollow">onkeypress</a></td> 
   <td>某个键盘按键被按下并松开。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onkeyup.html" title="onkeyup" rel="nofollow">onkeyup</a></td> 
   <td>某个键盘按键被松开。</td> 
   <td>2</td> 
  </tr> 
 </tbody> 
</table>

<button id="qq">Q技能</button>
    		<button id="ww">W技能</button>
    		<script type="text/javascript">
    			document.body.onkeydown = function(e){
    				console.log(e.keyCode);
    				if(e.keyCode == 81){
    					qq.innerHTML = "蓄力Q技能";
    				}else if(e.keyCode == 87){
    					ww.innerHTML = "释放W技能";
    				}
    				document.body.onkeyup = function(e){
    					if(e.keyCode == 81){
    						qq.innerHTML="释放Q技能";
    					}
    				}
    			}
    		</script>

<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
                 body,html { height: 100%;}				 
    			 #haha{
    				 position: absolute;
    				 transition: all 2s;
    			 }
    		</style>
    
    	</head>
    	<body>
                <button id="haha">泽拉斯Q</button>
    	 		<script type="text/javascript">
    	 			
    				document.body.onkeydown = function(e){
    					if(e.keyCode == 87){
    						haha.style.top = "0px"
    					}else if(e.keyCode == 65){
    						haha.style.left = "0px"
    					}else if(e.keyCode == 83){
    						haha.style.top = "1000px"
    					}else if(e.keyCode == 68){
    						haha.style.left = "1000px"
    					}
    				}
    	 		</script>
    	</body>

#### 4.9 框架/对象（Frame/Object）事件 ####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
   <th>DOM</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onabort.html" title="onabort" rel="nofollow">onabort</a></td> 
   <td>图像的加载被中断。 ( &lt;object&gt;)</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onbeforeunload.html" title="onbeforeunload" rel="nofollow">onbeforeunload</a></td> 
   <td>该事件在即将离开页面（刷新或关闭）时触发</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onerror.html" title="onerror" rel="nofollow">onerror</a></td> 
   <td>在加载文档或图像时发生错误。 ( &lt;object&gt;, &lt;body&gt;和 &lt;frameset&gt;)</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onhashchange.html" title="onhashchange" rel="nofollow">onhashchange</a></td> 
   <td>该事件在当前 URL 的锚部分发生修改时触发。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onload.html" title="onload" rel="nofollow">onload</a></td> 
   <td>一张页面或一幅图像完成加载。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onpageshow.html" title="onpageshow" rel="nofollow">onpageshow</a></td> 
   <td>该事件在用户访问页面时触发</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onpagehide.html" title="onpagehide" rel="nofollow">onpagehide</a></td> 
   <td>该事件在用户离开当前网页跳转到另外一个页面时触发</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onresize.html" title="onresize" rel="nofollow">onresize</a></td> 
   <td>窗口或框架被重新调整大小。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onscroll.html" title="onscroll" rel="nofollow">onscroll</a></td> 
   <td>当文档被滚动时发生的事件。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onunload.html" title="onunload" rel="nofollow">onunload</a></td> 
   <td>用户退出页面。 ( &lt;body&gt; 和 &lt;frameset&gt;)</td> 
   <td>2</td> 
  </tr> 
 </tbody> 
</table>

#### 4.10 表单事件 ####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
   <th>DOM</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onblur.html" title="onblur" rel="nofollow">onblur</a></td> 
   <td>元素失去焦点时触发</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onchange.html" title="onchange" rel="nofollow">onchange</a></td> 
   <td>该事件在表单元素的内容改变时触发( &lt;input&gt;, &lt;keygen&gt;, &lt;select&gt;, 和 &lt;textarea&gt;)</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onfocus.html" title="onfocus" rel="nofollow">onfocus</a></td> 
   <td>元素获取焦点时触发</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onfocusin.html" title="onfocusin" rel="nofollow">onfocusin</a></td> 
   <td>元素即将获取焦点时触发</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onfocusout.html" title="onfocusout" rel="nofollow">onfocusout</a></td> 
   <td>元素即将失去焦点时触发</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-oninput.html" title="oninput" rel="nofollow">oninput</a></td> 
   <td>元素获取用户输入时触发</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onreset.html" title="onreset" rel="nofollow">onreset</a></td> 
   <td>表单重置时触发</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onsearch.html" title="onsearch" rel="nofollow">onsearch</a></td> 
   <td>用户向搜索域输入文本时触发 ( &lt;input="search"&gt;)</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onselect.html" title="onselect" rel="nofollow">onselect</a></td> 
   <td>用户选取文本时触发 ( &lt;input&gt; 和 &lt;textarea&gt;)</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onsubmit.html" title="onsubmit" rel="nofollow">onsubmit</a></td> 
   <td>表单提交时触发</td> 
   <td>2</td> 
  </tr> 
 </tbody> 
</table>

剪贴板事件

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
   <th>DOM</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-oncopy.html" title="oncopy" rel="nofollow">oncopy</a></td> 
   <td>该事件在用户拷贝元素内容时触发</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-oncut.html" title="oncut" rel="nofollow">oncut</a></td> 
   <td>该事件在用户剪切元素内容时触发</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onpaste.html" title="onpaste" rel="nofollow">onpaste</a></td> 
   <td>该事件在用户粘贴元素内容时触发</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

打印事件

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
   <th>DOM</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onafterprint.html" title="onafterprint" rel="nofollow">onafterprint</a></td> 
   <td>该事件在页面已经开始打印，或者打印窗口已经关闭时触发</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onbeforeprint.html" title="onbeforeprint" rel="nofollow">onbeforeprint</a></td> 
   <td>该事件在页面即将开始打印时触发</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

拖动事件

<table> 
 <thead> 
  <tr> 
   <th>事件</th> 
   <th>描述</th> 
   <th>DOM</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-ondrag.html" title="ondrag" rel="nofollow">ondrag</a></td> 
   <td>该事件在元素正在拖动时触发</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-ondragend.html" title="ondragend" rel="nofollow">ondragend</a></td> 
   <td>该事件在用户完成元素的拖动时触发</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-ondragenter.html" title="ondragenter" rel="nofollow">ondragenter</a></td> 
   <td>该事件在拖动的元素进入放置目标时触发</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-ondragleave.html" title="ondragleave" rel="nofollow">ondragleave</a></td> 
   <td>该事件在拖动元素离开放置目标时触发</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-ondragover.html" title="ondragover" rel="nofollow">ondragover</a></td> 
   <td>该事件在拖动元素在放置目标上时触发</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-ondragstart.html" title="ondragstart" rel="nofollow">ondragstart</a></td> 
   <td>该事件在用户开始拖动元素时触发</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-ondrop.html" title="ondrop" rel="nofollow">ondrop</a></td> 
   <td>该事件在拖动元素放置在目标区域时触发</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

多媒体（Media）事件

<table> 
 <thead> 
  <tr> 
   <th>事件</th> 
   <th>描述</th> 
   <th>DOM</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onabort-media.html" title="onabort" rel="nofollow">onabort</a></td> 
   <td>事件在视频/音频（audio/video）终止加载时触发。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-oncanplay.html" title="oncanplay" rel="nofollow">oncanplay</a></td> 
   <td>事件在用户可以开始播放视频/音频（audio/video）时触发。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-oncanplaythrough.html" title="oncanplaythrough" rel="nofollow">oncanplaythrough</a></td> 
   <td>事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-ondurationchange.html" title="ondurationchange" rel="nofollow">ondurationchange</a></td> 
   <td>事件在视频/音频（audio/video）的时长发生变化时触发。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onemptied</td> 
   <td>当期播放列表为空时触发</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onended.html" title="onended" rel="nofollow">onended</a></td> 
   <td>事件在视频/音频（audio/video）播放结束时触发。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onerror-media.html" title="onerror" rel="nofollow">onerror</a></td> 
   <td>事件在视频/音频（audio/video）数据加载期间发生错误时触发。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onloadeddata.html" title="onloadeddata" rel="nofollow">onloadeddata</a></td> 
   <td>事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onloadedmetadata.html" title="onloadedmetadata" rel="nofollow">onloadedmetadata</a></td> 
   <td>事件在指定视频/音频（audio/video）的元数据加载后触发。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onloadstart.html" title="onloadstart" rel="nofollow">onloadstart</a></td> 
   <td>事件在浏览器开始寻找指定视频/音频（audio/video）触发。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onpause.html" title="onpause" rel="nofollow">onpause</a></td> 
   <td>事件在视频/音频（audio/video）暂停时触发。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onplay.html" title="onplay" rel="nofollow">onplay</a></td> 
   <td>事件在视频/音频（audio/video）开始播放时触发。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onplaying.html" title="onplaying" rel="nofollow">onplaying</a></td> 
   <td>事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onprogress.html" title="onprogress" rel="nofollow">onprogress</a></td> 
   <td>事件在浏览器下载指定的视频/音频（audio/video）时触发。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onratechange.html" title="onratechange" rel="nofollow">onratechange</a></td> 
   <td>事件在视频/音频（audio/video）的播放速度发送改变时触发。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onseeked.html" title="onseeked" rel="nofollow">onseeked</a></td> 
   <td>事件在用户重新定位视频/音频（audio/video）的播放位置后触发。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onseeking.html" title="onseeking" rel="nofollow">onseeking</a></td> 
   <td>事件在用户开始重新定位视频/音频（audio/video）时触发。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onstalled.html" title="onstalled" rel="nofollow">onstalled</a></td> 
   <td>事件在浏览器获取媒体数据，但媒体数据不可用时触发。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onsuspend.html" title="onsuspend" rel="nofollow">onsuspend</a></td> 
   <td>事件在浏览器读取媒体数据中止时触发。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-ontimeupdate.html" title="ontimeupdate" rel="nofollow">ontimeupdate</a></td> 
   <td>事件在当前的播放位置发送改变时触发。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onvolumechange.html" title="onvolumechange" rel="nofollow">onvolumechange</a></td> 
   <td>事件在音量发生改变时触发。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onwaiting.html" title="onwaiting" rel="nofollow">onwaiting</a></td> 
   <td>事件在视频由于要播放下一帧而需要缓冲时触发。</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

动画事件

<table> 
 <thead> 
  <tr> 
   <th>事件</th> 
   <th>描述</th> 
   <th>DOM</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-animationend.html" title="animationend" rel="nofollow">animationend</a></td> 
   <td>该事件在 CSS 动画结束播放时触发</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-animationiteration.html" title="animationiteration" rel="nofollow">animationiteration</a></td> 
   <td>该事件在 CSS 动画重复播放时触发</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-animationstart.html" title="animationstart" rel="nofollow">animationstart</a></td> 
   <td>该事件在 CSS 动画开始播放时触发</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

过渡事件

<table> 
 <thead> 
  <tr> 
   <th>事件</th> 
   <th>描述</th> 
   <th>DOM</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-transitionend.html" title="transitionend" rel="nofollow">transitionend</a></td> 
   <td>该事件在 CSS 完成过渡后触发。</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

其他事件

<table> 
 <thead> 
  <tr> 
   <th>事件</th> 
   <th>描述</th> 
   <th>DOM</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onmessage</td> 
   <td>该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onmousewheel</td> 
   <td>已废弃。 使用 <a href="https://www.runoob.com/jsref/event-onwheel.html" title="onwheel" rel="nofollow">onwheel</a> 事件替代</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-ononline.html" title="ononline" rel="nofollow">ononline</a></td> 
   <td>该事件在浏览器开始在线工作时触发。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onoffline.html" title="onoffline" rel="nofollow">onoffline</a></td> 
   <td>该事件在浏览器开始离线工作时触发。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onpopstate</td> 
   <td>该事件在窗口的浏览历史（history 对象）发生改变时触发。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onshow.html" title="onshow" rel="nofollow">onshow</a></td> 
   <td>该事件当 &lt;menu&gt; 元素在上下文菜单显示时触发</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onstorage</td> 
   <td>该事件在 Web Storage(HTML 5 Web 存储)更新时触发</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-ontoggle.html" title="ontoggle" rel="nofollow">ontoggle</a></td> 
   <td>该事件在用户打开或关闭 &lt;details&gt; 元素时触发</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/event-onwheel.html" title="onwheel" rel="nofollow">onwheel</a></td> 
   <td>该事件在鼠标滚轮在元素上下滚动时触发</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

#### 事件冒泡 ####

<ul>
    			<li>川菜
    				<ul>
    					<li>麻婆豆腐</li>
    					<li>麻辣烫</li>
    					<li>宫保鸡丁</li>
    				</ul>
    			</li>
    		</ul>
    		<ul>
    			<li>粤菜
    				<ul>
    					<li>广东烧鹅</li>
    					<li>白切鸡</li>
    					<li>红色乳鸽</li>
    				</ul>
    			</li>
    		</ul>
    		<script>
    			var arr = document.querySelectorAll("li");
    			for(i=0;i<arr.length;i++){
    				var li = arr[i];
    				li.onclick=function(e){
    					try{
    						this.firstElementChild.style.display = this.firstElementChild.style.display=="none"?"block":"none";
    					}catch{
    						e.cancelBubble = true;
    					}
    				}
    			}
    		</script>

## 五、表单验证 正则表达式 ##

> 在我们表单采集数据之前 需要对用户输入的内容进行合法性校验 所以需要表单验证
> 
> ![86a2195ab8da438b92cd3fefd19ffd78.png][]

#### 5.1 正则表达式 ####

> 学习路线： 1 今天 会用 2 走之前 会看 3 五年以后 会自己写
> 
> 正则表达式，又称规则表达式,（Regular Expression，在代码中常简写为regex、regexp或RE），是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"），是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串，通常被用来检索、替换那些符合某个模式（规则）的文本。
> 
>   
> 正则常用符号  
>   
> 1 在没有 ^和$的时候 代表只要包含则匹配  
> 2 . 代表任意字符  
> 3 \\ 代表转义符  
> 4 \* 匹配前面的子表达式任意次。例如，zo\*能匹配“z”，也能匹配“zo”以及“zoo”。\*等价于\{0,\}。  
> 5 + 匹配前面的子表达式一次或多次(大于等于1次）。例如，“zo+”能匹配“zo”以及“zoo”，但不能匹配“z”。+等价于\{1,\}。  
> 6 ? 匹配前面的子表达式零次或一次。例如，“do(es)?”可以匹配“do”或“does”。?等价于\{0,1\}。  
> 7 \{n\} \{n,\} \{n,m\} 匹配次数  
> 8 \[\] 匹配范围  
> 9 ^匹配输入字行首。如果设置了RegExp对象的Multiline属性，^也匹配“\\n”或“\\r”之后的位置。  
> $匹配输入行尾。如果设置了RegExp对象的Multiline属性，$也匹配“\\n”或“\\r”之前的位置。

[正则表达式![icon-default.png_t_M666][]https://blog.csdn.net/xuemoyao/article/details/8033138?ops\_request\_misc=%257B%2522request%255Fid%2522%253A%2522165899260216781683926595%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request\_id=165899260216781683926595&biz\_id=0&utm\_medium=distribute.pc\_search\_result.none-task-blog-2~all~top\_positive~default-1-8033138-null-null.142%5Ev35%5Eexperiment\_28w\_v1&utm\_term=%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F&spm=1018.2226.3001.4187][icon-default.png_t_M666_https_blog.csdn.net_xuemoyao_article_details_8033138_ops_request_misc_257B_2522request_255Fid_2522_253A_2522165899260216781683926595_2522_252C_2522scm_2522_253A_252220140713.130102334.._2522_257D_request_id_165899260216781683926595_biz_id_0_utm_medium_distribute.pc_search_result.none-task-blog-2_all_top_positive_default-1-8033138-null-null.142_5Ev35_5Eexperiment_28w_v1_utm_term_E6_AD_A3_E5_88_99_E8_A1_A8_E8_BE_BE_E5_BC_8F_spm_1018.2226.3001.4187]

#### 表单校验特效 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    		<style>
    			fieldset{
    				width: 500px;
    				margin: 100px auto;
    			}
    			.form-control{
    				margin-bottom: 30px;
    			}
    			.form-group{
    				position: relative;
    			}
    			.form-group span{
    				position: absolute;
    				bottom: -25px;
    				display: none;
    			}
    		</style>
    	</head>
        <body>
    		
    		<fieldset id="">
    			<legend>用户注册</legend>
    				 	
    				<form action="http://www.jd.com" method="post" id="tt">
    				 	  <div class="form-group">
    				 	    <label for="exampleInputEmail1">账号</label>
    				 	    <input type="text" class="form-control" id="username" placeholder="请输入账号">
    						<span class="text-muted">请输入账号 6-18位 不能用中文 开头必须是字母</span>
    						<span class="text-success">账号可用</span>
    						<span class="text-danger" >账号输入有问题 请正确输入</span>
    				 	  </div>
    				 	  <div class="form-group">
    				 	    <label for="exampleInputPassword1">密码</label>
    				 	    <input type="password" class="form-control" id="password" placeholder="请输入密码">
    						<span class="text-muted">请输入账号 6-18位 不能用中文 开头必须是字母</span>
    						<span class="text-success">密码可用</span>
    						<span class="text-danger" >密码输入有问题 请正确输入</span>
    				 	  </div>
    				 	 <div class="form-group">
    				 	   <label for="exampleInputPassword1">确认密码</label>
    				 	   <input type="password" class="form-control" id="pwd" placeholder="请确认密码">
    					   <span class="text-muted">请重复输入密码</span>
    					   <span class="text-success">重复密码可用</span>
    					   <span class="text-danger" >两次密码不一致</span>
    				 	 </div>
    					 <div class="form-group">
    						<label for="exampleInputPassword1">邮箱</label>
    						<input type="text" class="form-control" id="email" placeholder="请输入邮箱">
    						<span class="text-muted">请正确输入您的邮箱</span>
    						<span class="text-success">邮箱可用</span>
    						<span class="text-danger" >邮箱输入有问题 请正确输入</span>
    					  </div>
    					  <button type="submit" class="btn btn-danger btn-block">注册</button>
    				</form>
    				
    		<script>
    			 //注册提交
    			tt.onsubmit=function(){
    				var arr =  document.querySelectorAll(".text-success");
    				for(i=0;i<arr.length;i++){
    					successSpan = arr[i];
    					if(successSpan.style.display !="inline"){
    						return false;
    					}
    				}
    			}
    			
    			
    			var regArr = [
    				//帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)
    				/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/,
    				//强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)
    				/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/,
    				0,
    				//Email地址
    				/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
    			]
    			
    			
    			var arr = document.querySelectorAll(".form-control");
    			for(i=0;i<arr.length;i++){
    				var input =arr[i];
    				input.aaa=i;
    				input.onfocus=function(){
    					this.parentNode.children[3].style.display="none";
    					this.parentNode.children[4].style.display="none";
    					this.parentNode.children[2].style.display="inline";
    				}
    				input.onblur = function(){
    					if(this.aaa==2){
    						regArr.splice(2,1,new RegExp("^"+password.value+"$"))
    					}
    					this.parentNode.children[2].style.display="none";
    					if(this.value.length>0){
    						if(regArr[this.aaa].test(this.value)){
    							this.parentNode.children[3].style.display="inline";
    						}else{
    							this.parentNode.children[4].style.display="inline";
    						}
    					}
    				}
    			}
    		</script>
    		
    	</body>
    </html>

[86a2195ab8da438b92cd3fefd19ffd78.png]: https://img-blog.csdnimg.cn/86a2195ab8da438b92cd3fefd19ffd78.png
[icon-default.png_t_M666]: https://csdnimg.cn/release/blog_editor_html/release2.1.7/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=M666
[icon-default.png_t_M666_https_blog.csdn.net_xuemoyao_article_details_8033138_ops_request_misc_257B_2522request_255Fid_2522_253A_2522165899260216781683926595_2522_252C_2522scm_2522_253A_252220140713.130102334.._2522_257D_request_id_165899260216781683926595_biz_id_0_utm_medium_distribute.pc_search_result.none-task-blog-2_all_top_positive_default-1-8033138-null-null.142_5Ev35_5Eexperiment_28w_v1_utm_term_E6_AD_A3_E5_88_99_E8_A1_A8_E8_BE_BE_E5_BC_8F_spm_1018.2226.3001.4187]: https://blog.csdn.net/xuemoyao/article/details/8033138?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165899260216781683926595%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=165899260216781683926595&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-8033138-null-null.142%5Ev35%5Eexperiment_28w_v1&utm_term=%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F&spm=1018.2226.3001.4187