JavaScript学习

快来打我* 2022-04-01 11:27 105阅读 0赞

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

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

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

# 原生JavaScript #

#### 1、定位 ####

*  position属性
 *  static（默认）
 *  Relative：相关的 /*设置 距离是指咋原来文档流的位置处做偏移*/
 *  Fixed：固定的（脱离文档流）
 *  Absolute：绝对的（脱离文档流）
 *  与top、left、bottom和right连用
 *  绝对定位默认是以浏览器作为参考，但是如果绝对定位在relative定位的元素中（绝对定位中也行），那么就以这个元素左作为参考
 *  绝对定位中位置的层次
 *  z-index ：设置层叠顺序

#### 2、 display显示与隐藏以及设置显示样式 ####

none、block(块)、inline(行级)  
  div、span

#### 3、 JavaScript ####

（1）基础语法  
（2）DOM(文档对象模型)  
（3）BOM（浏览器对象模型）  
（4）jQuery(DOM、BOM)  
（5）js高级

#### 4、 JavaScript基础 ####

基本历史和现状
    	-> 1994-1995,点击一个网页，需要40s左右才可以打开
    		注册的问题
    	-> 就是为了检验页面中的数据
    		网景：livescript，1995年sun的java火了，更名为javascript
    		微软ie绑定到操作体统中(JScript语言)
    		// CGI->asp(vbscript)->jsp
    		1996-2000
    		谷歌v8引擎(可以将脚本编译成机器语言执行)
    	-> js
    		ecma-v3
    		ecma-v5	严格模式 strict
    		历史分歧，是的javascript的多面化
    		执行在浏览器上的一个脚本语言
    		flex：actionscript(js是变种)
    		node.js(v8引擎作为js的解释引擎，将js带到了服务器后端)
    		NginX
    		CommonJS
    	-> 库
    		jQuery
    		prototype
    		YUI
    		Extjs
    		dojo

#### 5、 JavaScript基础 [blog.csdn.net/personJiangKun][blog.csdn.net_personJiangKun] ####

写在哪里？hello world  
    -> 1.新建一个html文件  
    -> 2.在head标签中添加一个  
    -> 3.在里面添加代码  
    -> 词法与句法(参照C\#学习)

#### 6、 javascript的数据类型(记下来) ####

（1）基本类型：数字类型number、布尔类型boolean、字符串类型string  
（2）引用类型：对象类型、函数类型  
（3）空类型：null和undefined  
（4）运算符：typeof  
（5）语法：string typeof (变量);

#### 7、 JavaScript是一个弱类型的语言 ####

-> 弱类型不代表没有类型，不严格的检查类型
    -> C#		int num = 10;	// 需要检查类型赋值如果不符合要求就报错，编译不通过
    			int num = "123"; // 报错
    -> js
    	使用var声明变量
    	var num = 123;	// 不会检查类型，任何赋值都可以成功

#### 8、 运算符 ####

（1）数学运算符：+、-、\*、/  
（2）逻辑运算符：>、<、>=、<=、 == 、 ！= 、&&、|| === 和 !== 完全等于  
（3）与对象相关  
  new  
  delete  
  instanceof

#### 9、 逻辑控制与流程控制 ####

-> if
        	if(bool表达式) { 
        		语句
        	} else if(bool表达式) { 
        		语句
        	} else { 
        		语句
        	}
        	解释性的语言，规范结尾用分号，但是如果不用分号，也不会错，js引擎会根据换行自动加分号
        -> switch-case
        	switch(val) { 
        		case 值1: 语句; break;
        		case 值2: 语句; break;
        		case 值3: 语句; break;
        		... ...
        		case 值N: 语句; break;
        		default: 语句; break;
        	}
        -> while
        	while(逻辑表达式) { 
        		循环体
        	}
        -> do-while
        	do { 
        	
        	} while(条件);
        -> for
        	for (var i = 0; i < max; i++ ) { 
        		循环体
        	}
        -> for-in结构(有点像foreach，但是不同)
        	for(var item in 集合或对象) { 
        		遍历这个集合对象，item为每一个项的键
        		循环体
        	}

类型转换：js中只有浮点数类型，可以用parseInt() 函数进行转换

#### 10、使用函数(函数、方法) ####

-> 函数的语法
    		声明式语法：
    		function 函数名(参数列表) { 
    			// 函数体
    			// 如果有返回值直接return即可
    		}
    		Lambda函数(匿名函数)
    		var func = function(参数) { 
    			方法体
    		};
    	-> 在C#中委托如何使用的？
    		-> 声明委托类型
    		-> 定义委托变量
    		-> 授权方法(匿名)
    			func = delegate(参数) {  方法体 };
    			func = (参数) => {  方法体 };
    		-> 使用委托变量调用方法
    	-> arguments参数
    		函数内部都有一个arguments参数，表示函数的参数
    		像数组的对象
    	-> 使用函数，计算兔子数列(Fibonacci数列)
    		1	1	2	3	5	8	13	...
    	-> Function对象(动态函数)
    		语法
    		var func = new Function(...);
    		// Function参数中最后一个参数是方法体，前面的参数都是该方法的参数
    		// 参数类型都是字符串
    		var getMax = function(n1, n2) { 
    			return n1 > n2 ? n1 : n2;
    		};
    		// 
    		var func = new Function("n1", "n2", "return n1 > n2 ? n1 : n2;");
    		// 将字符串变成函数

#### 11、使用浏览器调试js代码 ####

（1）js的代码量非常大，封装技巧非常强  
（2）代码分析

#### 12、节点的操作 ####

（1）创建节点  
  元素节点： var node=document.createElement(“标签名”);  
  文本节点：var textNode=document.createTextNode(“文本”);  
  <节点>.innerHTML=“文本”; //这里可以使用html  
  <节点>.innerText=“文本”; //非标准

（2）追加节点：  
  追加到尾部：  
    父节点.appendChild(子节点);  
  插入到中间（插入到某一个元素的前面）：  
    父节点.insertBefore(新元素，旧元素);

（3） 修改节点  
  所谓的修改节点就是修改节点的属性与包含的文本。  
  修改属性的标准方法（DOM-Core）  
    .setAttribute(“属性名”, “值”);  
    文本 .getAttribute(“属性名”);  
  -> DOM-html  
    .属性名 = 值;  
    var v = .属性名;

（4）删除  
  父节点.removeChild(子节点);

（5）隐藏  
  P.style.display=“none”;

#### 13、数组排序： ####

Var arr=[2,1,3];
    Arr.sort();
    Alert(arr);     //默认为升序 降序：arr.sort(function(a,b) { return b-a;});

#### 14、得到json格式的数组 ####

Var str='[{ name:"赵小虎",age:18},{ name:"赵小虎",age:18},{ name:"赵小虎",age:18}];
    Var jsons=new function(){  "return "+ str};

#### 15、全局和局部 ####

Var fuc=function(){ }    //局部，不会覆盖
    Function func(){ }    //全局，覆盖

## BOM，浏览器对象 ##

*  Window
 *  》window.onload
 *  Document=>window.document
 *  Document.write();

//输入window中的对象
    Var i=0;
    For(var k in window){ 
    	Document.write(i+ '  '+k+ '  '+typeof window[k]+'<br />';
    	i++;
    }

#### 1、事件 ####

onload：页面加载完毕时触发  
onunload：页面卸载后触发  
onbeforeunload：页面卸载前触发

*  window就是一个全局的对象，是一个全局的容器，所有的东西都是他的成员。
 *  confirm方法 返回布尔类型
 *  Window.location.href ：获得或设置当页面的地址（url）
 *  reload（）方法 刷新
 *  history对象：  
    History.forward(); 前一页面  
    History.back(); 后退页面  
    History.go(-1); 也可以后退

#### 2、事件对象： ####

（1）鼠标点击事件 button  
（2）鼠标移动事件：onmousemove  
（3）属性：screenX、screenY clientX、 clientY layerX、layerY

//将json格式的字符串变成数组
    Var o =new Function("return "+jsonParam)();

（4）事件对象，就是与事件相关的一个参数  
  如何编程，事件是一个待执行的方法，不是我们去调用，而是浏览器因某个时间的触发而自动的调用。  
  语法：事件 = function ()\{\};  
  这个函数是由浏览器自己调用，那么事件的参数也与浏览器有关

onload = function () { 
        var dv = document.getElementById("dv");
        dv.onmousedown = function (e) { 
            e= e || window.event;
            //如果e不存在，就用event，这个不是标准做法
            //如果e存在 就使用e本身
            alert(e.button);
        };
    };

#### 3、关于坐标问题： ####

clineX、layerX、 pageX offsetLeft

#### 4、功能键 ####

Alert(e.altKey);  
  Alert(e.shiftKey);  
  Alert(e.controlKey);

#### 5、计时器-电子 时钟 ####

开启计时器：Number window.setinterval( callback, millsecond);  
  关闭计时器：Window.clearInterval (计时器id)

//计时跳转页面
    onload = function () { 
         var p = this.document.getElementById("se");
         var interval = setInterval(
             function () { 
                 p.innerHTML = Number(p.innerHTML) - 1;
                 if (Number(p.innerHTML) <= 0) { 
                     clearInterval(interval);
                     this.window.location.href = "http://baidu.com";
                 }
             }
             , 1000);
    
     };

#### 6、延迟操作： ####

setTimeout(function(){},1000)

#### 7、剪切板： ####

Window.clipboardData.setData("text",value)

（1）获取剪切板的内容：window.clipboardData.getData(“text”);  
（2）向剪切板放回内容 : clipboardData.setData(“text”,txt);

Return false;     //取消其默认事件

#### 8、定义数组 var arr=\[\] ####

Arr.push("fdsa");   //向数组里放内容
    Arr.join("/r/n");   //向数组里每一项内容后添加 内容？？？

#### 9、获取时间： ####

<table> 
 <thead> 
  <tr> 
   <th>获取时间</th> 
   <th>方法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>New Date()</td> 
   <td>getFullYear();</td> 
  </tr> 
  <tr> 
   <td> </td> 
   <td>getHours();</td> 
  </tr> 
  <tr> 
   <td> </td> 
   <td>getSecondes();</td> 
  </tr> 
  <tr> 
   <td> </td> 
   <td>getMinutes();</td> 
  </tr> 
 </tbody> 
</table>

#### 10、事件冒泡： ####

div套了一个p，p有一个点击事件，div也有一个点击事件。点击p也就相当于点击了div，会向触发p的点击事件然后触发div的点击事件。

获取事件源： e.srcElement  
    			     e.currentTarget
    	//取消事件冒泡
    	// IE8 : e.cancelBubble=true;
    	e.stopPropagation();

#### 11、表单事件： ####

（1）获取元素  
  Document.forms 获取文档中所有的表单、  
（2）每一个事件都会有相对应的一个方法来提供调用，比如onclick（）事件 会有一个click（）方法来调用。  
（3）表单有一个提交的事件

Form.onsubmit = function(){ 
    	//Return false; 永不提交
    	Return confirm("您确定要提交么？");
    }
    
    
    //获表单里元素
    Onload=function(){ 
    	Var form = document.forms[0];
    	Var input = form.elements[1];
    	Input.value="测试";
    	
    };

#### 12、函数的四种调用形式： ####

js中函数和方法不一样，体现在this上。this具有全局性  
（1）函数形态  
（2）方法形态  
  将函数赋值给某一个对象的成员，那么就成为方法  
（3）构造器形态  
  就是构造函数，了解构造函数的执行过程。构造函数改变了函数的返回值，如果函数的返回值是一个对象，那么就按返回值来返回，如果返回值不是一个对象就忽略返回值，直接返回this  
（4）上下文形态  
  想用什么模式就用什么模式  
  语法：函数.apply（对象，\[参数列表\]) 例如： f.apply(null,\[12,34\]);

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

## JavaScript的面向对象 ##

#### 1、基本概念 ####

（1）对象，即键值对  
（2）方法，即值为函数的属性  
（3）原型 ，即对象继承实体。有一个对象存在，构造函数设置原型为这个对象，创建出来的对象就继承于这个对象（从对象那里继承）。 原型就是函数的prototype属性，它的值是键值对的形式。  
（4）原型链，一直往原型上找。

#### 2、关于对象里的方法： ####

Var Persion= functino(name){ 
    			This.name=name;
    			This.say= function(){ 
    				Alert("你好，我是"+this.name);
    			};
    		};
    		
    		Var p =new Persion("牛亮亮");
    		P.say();        //打印 你好，我是牛亮亮 ，通过对象调用方法
    		P.say.call();   //打印 你好，我是 ，这种方式，直接调用对象里的方法
    		P.say.call(p);	//打印 你好，我是牛亮亮 ,通过传入对象，再调方法。
    						     //这种调用方法是获得函数的通用调用形式，将对象传入，表示在这个对象上调用该方法。
    		
    		Delete p.name;  //删除对象的属性

#### 3、原型继承 ####

// 模拟c#中的人类
    			var o = {
    				say:function() {
    					if(this.name && this.age && this.sex)
    					alert("你好，我是" + 
    						this.name + "，我今年" + 
    						this.age + "岁了，我是" +
    						this.sex + "生");
    				},
    				get_Name : function() {
    					if(this.name) return this.name;
    				},
    				set_Name : function(value) {
    					if(this.name) this.name = value;
    				}
    			};
    			
    			var Person = function(name,age,sex) {
    				this.name = name;
    				//this.age = age;
    				this.sex = sex;
    			};
    			
    			Person.prototype = o;
    			
    			var p1 = new Person("赵晓虎", 19, "男");
    			
    			p1.say();

如果需要原型，那么就是一定要有函数，函数的prototype属性就是原型。每一个对象又一个属性叫\_\_proto\_\_ 这个属性就是这个对象的原型。

（1）继承：  
  需要有一个对象，Inherite.apply(对象，参数);一次性调用多个方法，完成派生。

（2）原型链：

*  对象有原型，那么原型也是对象，原型也有原型。
 *  所有的函数是对象，继承自Function.prototype。
 *  Function.prototype是对象，继承自Object.prototype
 *  Object.prototype是对象，继承自null
    
        obj是对象，继承自Object.prototype
         	function是对象，继承自Function.prototype
         	function是函数，继承自Function.prototype

（3）js成员的访问规则  
  O.方法() 。首先在o当前这个类型中寻找该成员的定义，如果存在该成员的定义，那么久直接使用该成员。如果该成员不在当前类型中，就访问其原型，一次类推，直到null位置

（4）原型的读写操作：  
  读取操作：会在当前对象中寻找，向上找，找到为止  
  修改的操作：会在当前对象中找，找到了就使用； 如果没有找到就创建一个

（5）给元素添加事件  
  元素\[“onclick”\]=function()\{\};

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

## JQuery部分 ##

#### 1、当页面加载完毕时执行 ####

jQuery("document").ready(function (){ 
    	Alert("加载完毕");
    });
    //简写形式：
    $(function(){ 
    	Alert("加载完毕");
    });

#### 2、了解jq的基本书写方式 ####

（1）熟练使用选择器  
  选择器（css）  
    基本选择器：\#id 、 类 、 标签

（2）dom操作

*  事件的添加办法：  
    $(…).事件名(function()\{\});
 *  属性与样式：  
    $(…).css(“border”,“1px solid red”) 设置  
    $(…).css(\{…\})  
    $(…).css(“border”) 获取，没值就是获取，有值就是设置
    
    $(…).attr(属性名,值)
    
    $(…).html() innerHtml  
    $(…).text() innerText
    
    $(…).val() value
    
    $(…).addClass()

（3）两个循环  
  **①map循环**  
    语法：$.map(数组或对象, 回调函数);

Var arr = ["a","b","c","d"];
    		Var newArr = $.map(arr, function (v , i){ 
    			Console.log(I + "," + v);     //i是索引，v是值
    			Return v + ","+I;    //使用return 可以返回自定义的新内容
    		};

ps：注意回调函数是有参数的，表示循环的数组对象的索引与值。  
  意义何在：目的就是将过程操作，变成函数式操作  
  功能：用回调函数处理每一个数组或对象中的元素，然后返回一个新数组

**②each循环**  
    语法：$each(对象或数组，回调函数)；

Var o = { name:"张三",age: 19 , set: "男"};
    		$.each(o, function (k , v) { 
    			Console.log(k + "----" + v);
    		});

如果需要停止遍历，return false。  
  注意回调函数的参数是每一个成员的键与值.  
  功能：就是遍历对象或数组，注意不返回内容

map循环与each循环的基本思想就是面向步骤过程的操作，变成一个函数式的操作，方便进行链式编程（函数式编程）  
函数式编程是一个流水线生产模型  
  F1().f2().f3()  
  F3(f2(f1()))  
函数式编程近年来在并发要求较高的领域使用较多。

（4）tirm方法：  
  本质就是正则表达式，用“”替换掉左边的空格，替换掉右边的空格。

#### 3、JQuery对象和DOM对象 ####

（1）转换：  
dom对象变jq对象：$(dom对象)

（2）方法

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Next()</td> 
   <td>返回被选元素的后一个同级元素</td> 
  </tr> 
  <tr> 
   <td>nextAll()</td> 
   <td>获得匹配元素集合中每个元素的所有跟随的同胞元素</td> 
  </tr> 
  <tr> 
   <td>Prev()</td> 
   <td>获取前一个元素</td> 
  </tr> 
  <tr> 
   <td>prevAll()</td> 
   <td>获取前面所有的元素</td> 
  </tr> 
  <tr> 
   <td>Siblings()</td> 
   <td>返回被选元素的所有同级元素</td> 
  </tr> 
  <tr> 
   <td>Children()</td> 
   <td>返回被选元素的所有直接子元素</td> 
  </tr> 
  <tr> 
   <td>find()</td> 
   <td>返回被选元素的后代元素</td> 
  </tr> 
 </tbody> 
</table>

（3）保持链和破坏链  
  带all的方法会破坏链，可以使用end()方法来保持链。

（4）与样式有关的方法：  
  addClass（类名）  
    功能：为标签添加class属性  
    注释：class属性是可以追加的  
  removeClass（类名）  
    功能：移除标签的class属性  
  hasClass（类名）  
    功能：如果有该样式返回True 否则返回False  
  toggleClass（类名）  
    切换样式的应用与删除

（5）过滤选择器  
  语法：$("\#ul li:过滤器名")

（6）基本过滤器：  
  :first、 ：last、eq（索引）、：even、：odd、qt（索引）大于、lt（索引）小于 ：not

（7）直接获得元素： ：header、：animated、：focus  
  方法：first() 、 last（）

过滤器使用后还可以继续过滤，每次都用上一次过滤的结果。过滤选择器是在已有的结果中进行再次筛选，并且可以连续使用过滤选择器，每次使用过滤选择器，都会使用签一次过滤的结果作为数据源进行过滤。

<table> 
 <thead> 
  <tr> 
   <th>过滤器</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$("#ul li:first")</td> 
   <td>//第一个</td> 
  </tr> 
  <tr> 
   <td>$("#ul li:last")</td> 
   <td>最后一个</td> 
  </tr> 
  <tr> 
   <td>$("#ul li:eq(1)")</td> 
   <td>下标为1的，就是第二个</td> 
  </tr> 
  <tr> 
   <td>$("#ul li:odd")</td> 
   <td>奇数的</td> 
  </tr> 
  <tr> 
   <td>$("#ul li:even")</td> 
   <td>偶数的</td> 
  </tr> 
  <tr> 
   <td>$("#ul li:not(:even)")</td> 
   <td>不是偶数的</td> 
  </tr> 
  <tr> 
   <td>$("#ul li:even:eq(2)")</td> 
   <td>偶数中的第三个</td> 
  </tr> 
 </tbody> 
</table>

（8）属性过滤器：

<table> 
 <thead> 
  <tr> 
   <th>用法</th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>[属性名]</td> 
   <td>过滤出含有该属性的元素</td> 
  </tr> 
  <tr> 
   <td>[属性名=值]</td> 
   <td>过滤出含有该属性，并且具有指定值的元素</td> 
  </tr> 
  <tr> 
   <td>[属性名！=值]</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>[属性名^=值]</td> 
   <td>必须以该值开头</td> 
  </tr> 
  <tr> 
   <td>[属性名$=值]</td> 
   <td>必须以该值结尾</td> 
  </tr> 
  <tr> 
   <td>[属性名*=值]</td> 
   <td>表示包含该值的，字符串匹配，只要有就选择上</td> 
  </tr> 
  <tr> 
   <td>[属性名l=值]</td> 
   <td>表示属性必须以该值开头，同时后面紧跟连字符 “-”</td> 
  </tr> 
  <tr> 
   <td>[属性名~=值]</td> 
   <td>表示筛选包含该值的元素</td> 
  </tr> 
 </tbody> 
</table>

（9）表单对象选择器  
：radio，：checkbox，：text，submit，：button  
：enabled 可用  
：disabled 不可用  
直接获得元素  
$(“form :disabled”)

（10）dom结构的特点  
  每一个节点只有1个父节点。在js中，由于其动态特征，只要设置节点的父节点，就会从原来的节点上移除。

（11）内容过滤器  
  ：contains（内容） 过滤出包含给定文本的元素innerText  
  ：empty 过滤出没有子节点的元素  
  ：has（选择器） 过滤出子元素中使用了selector的这个元素  
  ：parent 过滤出可以做父元素的元素（即包含子节点的元素）

（12）子元素过滤器：  
  First-child 保留层次结构，每个层中的第一个  
  First 取得是线性结构的第一个  
  Only-child  
  Nth-child(条件） 可以使索引、even或odd和3n  
  .children（）

（13）JQuery的DOM操作

<table> 
 <thead> 
  <tr> 
   <th>JQuery</th> 
   <th>DOM</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>html（）</td> 
   <td>innerHTML</td> 
  </tr> 
  <tr> 
   <td>text（）</td> 
   <td>innerText</td> 
  </tr> 
  <tr> 
   <td>attr（）</td> 
   <td>getAttribute、setAttribute</td> 
  </tr> 
  <tr> 
   <td>removeAttr（）</td> 
   <td>attr（属性，“”）空置就相当于移除了</td> 
  </tr> 
 </tbody> 
</table>

#### 4、动态创建DOM节点 ####

我们创建的是jq对象，如果需要使用dom操作一定要使用get得到dom对象，jq对象也提供了dom方法，因此可以实现dom操作

（1）创建节点

语法：$('html的字符串')
    例子：$('<a href="http://baidu.com">百度</a>')

（2）追加与插入元素  
  父.append（子）  
  父.perpend（子）

子.appendTo（父）  
  子.prependTo（父）

A.insertBefore(B)  
  A.insertAfter(B)

（3）删除  
  元素.remove() 真正的移除了这个元素  
  元素.empty() 清空里面的内容了

（4）克隆  
  元素.clone() 克隆一个一模一样的节点

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbmtfYmVsbA_size_16_color_FFFFFF_t_70]: /images/20220401/12a08abc3bb64e57b07f0319fbad3ecb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbmtfYmVsbA_size_16_color_FFFFFF_t_70 1]: /images/20220401/0a4adbd8d1e44c8586b96208c35268a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbmtfYmVsbA_size_16_color_FFFFFF_t_70 2]: /images/20220401/f5cc7dbfc699496fb3dfcb86c7844ae4.png
[blog.csdn.net_personJiangKun]: http://blog.csdn.net/personJiangKun