jQuery前端框架，你了解多少 ???

╰+攻爆jí腚メ 2023-03-13 13:03 25阅读 0赞

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

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。

jquery设计的宗旨是“write Less，Do More”（即倡导写更少的代码，做更多的事情），其核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

![在这里插入图片描述][20200513211444152.png_pic_center]

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

### 文章目录 ###

*   *  一、jQuery简介
     *   *   *  1、什么是jQuery(了解即可)
             *  2、jQuery的优势(了解即可)
             *  3、jQuery引入
             *  4、文档就绪事件函数
     *  二、jQuery选择器(重点掌握)
     *   *   *  1、基本选择器
             *  2、层级选择器
             *  3、基本过滤选择器
     *  三、综合案例
     *   *   *  1、创建表格元素
             *  3、仿QQ好友列表
             *  4、模拟员工信息管理系统
     *  四、jQuery总结
     *   *   *  1、html元素操作
             *  2、html元素内容和值的操作
             *  3、元素属性和css属性操作
             *  4、其他函数
     *  五、扩展内容
     *   *   *  1、为元素绑定点击事件
             *  2、js对象和jQuery对象的互相转换

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

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

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

## 一、jQuery简介 ##

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

#### 1、什么是jQuery(了解即可) ####

*  jQuery: JavaScript Query JS查询
 *  jQuery是一门轻量的、免费开源的JS函数库（就是JS的简单框架）
 *  jQuery可以极大的简化JS代码
 *  jQuery的核心思想：“写的更少，但做的更多”

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

*轻量的：是指一个技术对代码或程序的侵入程度是比较低的。*

*或者说代码对该技术依赖程度越低，这个技术越轻。对该技术的依赖程度越高，这个技术越重。*

*jQuery本质就是一个包含了很多函数的JS文件，如果要在某一个HTML中使用这个JS文件中的函数，就必须得将JS文件引入到HTML中*（想使用jQuery，就得引入jQuery的函数库文件，就是一个JS文件）

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

#### 2、jQuery的优势(了解即可) ####

(1) 可以极大的简化JS代码

(2) 可以像CSS选择器一样获取html元素

css中获取所有的div,给div添加样式:

div{ css属性... }

jQuery中获取所有div,给div添加边框样式:

$("div").css("border", "2px solid red");

JS获取id为div1的元素: document.getElementById("div1")
    jQuery获取id为div1的元素: $("#div1")

(3) 可以通过修改css属性控制页面的效果

(4) 可以兼容常用的浏览器

比如: JS中的innerText属性、removeNode()函数、replaceNode( )函数 这些函数在某些浏览器中是无法使用的。

jQuery中提供了相应的函数（ text函数、remove函数、replaceWith函数 ）

常用浏览器：谷歌浏览器、火狐浏览器、苹果浏览器、欧朋浏览器等

#### 3、jQuery引入 ####

jQuery的函数库文件就是一个普通的JS文件，引入jQuery和引入JS文件的方式一样。

<script src="js/jquery-1.8.3.js"></script>

在引入jQuery函数库文件时，如果文件引入路径错误，则会导致文件引入失败，如下图：

![在这里插入图片描述][20200514093450208.png_pic_center]

#### 4、文档就绪事件函数 ####

<head>
    <meta charset="UTF-8">
    
    <script src="js/jquery-1.8.3.js"></script>
    <script> //1.获取id为demo的h1元素 var h1 = document.getElementById( "demo" ); //2.获取h1元素中的内容( innerHTML ) alert( h1.innerHTML ); </script>
    </head>
    <body>
    	<h1 id="demo">jQuery的引入示例...</h1>
    </body>

问题描述：上面的代码在执行时，会报一个错误：

![在这里插入图片描述][20200514093616825.png_pic_center]

原因描述：在执行获取id为demo的元素时, h1元素还没有被浏览器加载到，所以获取不到h1元素。

*  **解决方式一：**

将script标签移到body内部，也就是h1元素的后面

这样浏览器在加载时，会先加载h1元素，再执行获取h1元素的代码，由于在获取h1元素之前，h1元素已经被浏览器加载过了，所以后面再获取就能够获取到！

代码示例：

<body>
    	<h1 id="demo">jQuery的引入示例...</h1>
    	<script> //1.获取id为demo的h1元素 var h1 = document.getElementById( "demo" ); //2.获取h1元素中的内容( innerHTML ) alert( h1.innerHTML ); </script>
    </body>

*  **解决方式二：**

将获取元素的代码放在文档就绪事件函数中，文档就绪事件函数会在浏览器加载完所有的html元素后（也就是加载完最后一个html元素时）会立即执行。

由于整个html网页都被加载了，h1元素肯定也被加载了，此时再获取h1元素就一定能获取到。

<head>
    <meta charset="UTF-8">
    
    <script src="js/jquery-1.8.3.js"></script>
    <script> $(function(){ //1.获取id为demo的h1元素 var h1 = document.getElementById( "demo" ); //2.获取h1元素中的内容( innerHTML ) alert( h1.innerHTML ); }); </script>
    </head>
    <body>
    	<h1 id="demo">jQuery的引入示例...</h1>
    </body>

*  **解决方式三：**

将获取元素的代码放在一个自定义的函数中，并将该函数绑定在h1元素的点击事件上，当我们点击h1元素时会执行自定义的函数，函数执行时才获取h1元素，此时就能够获取到h1元素。

<head>
    <meta charset="UTF-8">
    
    <script src="js/jquery-1.8.3.js"></script>
    <script> function fn1(){ //1.获取id为demo的h1元素 var h1 = document.getElementById( "demo" ); //2.获取h1元素中的内容( innerHTML ) alert( h1.innerHTML ); } </script>
    </head>
    <body>
    	<h1 id="demo" onclick="fn1()">jQuery的引入示例...</h1>
    </body>

*  **总结：什么时候该使用文档就绪事件函数?**

如果在获取元素时，获取元素的代码执行的时机，比元素本身加载的时间还要早，如果元素还没有加载就获取，必然是获取不到的。

可以将获取元素的代码放在文档就绪事件函数中，等浏览器加载完整个网页后，文档就绪事件函数才会执行，此时所有的元素都被加载了，再获取任何元素都能获取到！

jQuery提供的文档就绪事件函数（简写形式）：

其完整写法为：

JS也为我们提供了文档就绪事件函数，其写法为：

![在这里插入图片描述][20200514111918162.jpg_pic_center]

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

## 二、jQuery选择器(重点掌握) ##

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

#### 1、基本选择器 ####

(1)元素名选择器
    $("div") -- 选中所有的div元素
    $("span") -- 选中所有的span元素
    
    (2)class/类选择器
    $(".s1") -- 选中所有class值为s1的元素(class值为s1的元素可能是任何元素)
    $("span.s1") -- 选中所有class值为s1的span元素
    
    (3)id选择器
    $("#one") -- 选中id为one的元素
    
    (4)多元素选择器
    $("div,span,.s1,#one") -- 选中所有的div元素,以及所有的span元素,以及所有class值为s1的元素,以及id为one的元素

#### 2、层级选择器 ####

$("div span") -- 选中所有div内部的所有span元素
    $("#one span") -- 选中id为one的元素内部的所有span元素
    
    $("#two+span") -- 选中id为two的元素后面紧邻的span兄弟元素
    $("#two").next("span") -- 选中id为two的元素后面紧邻的span兄弟元素
    $("#two").prev("span") -- 选中id为two的元素前面紧邻的span兄弟元素
    
    $("#two~span") -- 选中id为two的元素后面所有的span兄弟元素
    $("#two").nextAll("span") -- 选中id为two的元素后面所有的span兄弟元素
    $("#two").prevAll("span") -- 选中id为two的元素前面所有的span兄弟元素
    
    $("#two").siblings("span") -- 选中id为two的元素前、后所有的span兄弟元素

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

(1) 选中第一个div元素
    $("div:first")
    $("div:eq(0)")
    $("div").eq(0)
    
    (2) 选中最后一个div元素
    $("div:last")
    $("div:eq(-1)")
    $("div").eq(-1)
    
    (3) 选中第n+1个div元素(n从零开始)
    $("div:eq(n)")
    $("div").eq(n)

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

## 三、综合案例 ##

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

#### 1、创建表格元素 ####

*  **练习1：创建单行单列的表格**

function createTable1(){ 
    	//1.创建一个table元素
    	var $tab = $("<table></table>");
    	//2.创建一个tr元素
    	var $tr = $("<tr></tr>");
    	//3.创建一个td元素, 并为td添加内容
    	var $td = $("<td></td>");
    	$td.html("Hello TD~~");
    	//4.将td添加到tr元素内部
    	$tr.append( $td );
    	//5.将tr添加到table元素内部
    	$tab.append( $tr );
    	//6.将table添加到body元素内部
    	$("body").append( $tab ); 
    	
    	//$("body").append( "<table><tr><td>Hello~~TD...</td></tr></table>" );
    }

*  **练习2.1：创建单行6列的表格**

function createTable2(){ 
    	//1.创建一个table元素
    	var $tab = $("<table></table>");
    	//2.创建一个tr元素
    	var $tr = $("<tr></tr>");
    	for(var i=0;i<6;i++){  
    		//3.创建一个td元素, 并为td添加内容
    		var $td = $("<td></td>");
    		$td.html("Hello TD~~");
    		//4.将td添加到tr元素内部
    		$tr.append( $td );
    	}
    	//5.将tr添加到table元素内部
    	$tab.append( $tr );
    	//6.将table添加到body元素内部
    	$("body").append( $tab ); 
    }

*  **练习2.2：创建5行6列的表格**

*  **练习3：创建指定行和列的表格**

#### 3、仿QQ好友列表 ####

/** 通过jQuery实现仿QQ列表好友列表 */
    function openDiv(thisobj){  //thisobj是一个js对象 --转成--> jQuery对象
    	//先将其他三个分组关闭( 将其他三个分组内的div设置为隐藏 )
    	$("table span").not(thisobj).next("div").hide(); //css("display", "none")
    	//根据被点击的分组找到分组内的好友列表, 切换好友列表的展示状态
    	$(thisobj).next("div").toggle(); //如果元素显示则切换为隐藏, 如果隐藏则切换为显示
    }

#### 4、模拟员工信息管理系统 ####

*  练习1：添加员工信息

*  练习2：删除员工信息

function delEmp(){ 
    	//1.获取所选中员工所在的tr行 (获取所有被选中的复选框)
    	//$("input:checked").parents("tr").remove(); //会连接表头一起删除
    	$("input:checked").parent("td").parent("tr").remove();
    }

*  练习3：修改员工信息（自己完成）

*  练习4：实现全选或全不选

function checkAll(){ 
    	//1.获取全选复选框的选中状态( 选中(true)? 没选中(false)? )
    	var isCheck = $("#all").prop("checked"); //true|false
    	//2.获取所有普通复选框, 将全选框的选中状态设置给所有普通复选框
    	$("input[type='checkbox'][id!='all']").prop("checked",isCheck);
    }

*  案例总代码

<!DOCTYPE HTML>
    <html>
    <head>
    <title>模拟员工信息管理系统</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
    	body{ font-family: "微软雅黑"}
    	h2, h4{  text-align: center; }
    	div#box1, div#box2 { text-align:center;}
    	hr{ margin: 20px 0;}
    	table{ margin: 0 auto;width:70%;text-align: center;border-collapse:collapse;}
    	td, th{ padding: 7px; width:20%;}
    	th{ background-color: #DCDCDC;}
    	input[type='text']{ width:130px;}
    </style>
    
    <script src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
    	/* --- 添加一个新员工 --- */
    	function addEmp(){ 
    		//1.获取新员工的信息
    		var id = $("#box1").find("input[name='id']").val().trim();
    		var name = $("#box1").find("input[name='name']").val().trim();
    		var email = $("#box1").find("input[name='email']").val().trim();
    		var salary = $("#box1").find("input[name='salary']").val().trim();
    
    		//2.检查员工信息是否符合格式(信息不能为空)
    		if( id == "" || name == "" || email == "" || salary == ""){ 
    			alert("员工信息不能为空!!!");
    			return;
    		}
    		//3.检查ID是否已存在
    		/* 获取当前所有员工的id, 循环遍历, 比较id是否存在 */
    		var flag = true;
    		$("table tr").each(function(){ 
    			if(id == $(this).find("td:eq(1)").text()){ 
    				alert("id已存在!!!");
    				flag = false;
    			}
    		});
    		if(!flag){ 
    			return;
    		}
    		//4.将新员工信息添加到员工信息列表中(table)
    		var $td1 = $("<td><input type='checkbox'/></td>");
    		var $td2 = $("<td>"+id+"</td>");
    		var $td3 = $("<td>"+name+"</td>");
    		var $td4 = $("<td>"+email+"</td>");
    		var $td5 = $("<td>"+salary+"</td>");
    		var $tr = $("<tr></tr>");
    		$tr.append($td1).append($td2).append($td3).append($td4).append($td5);
    
    		//5.将tr挂载到table上
    		$("table").append($tr);
    	}
    	/* --- 删除选中的员工 --- */
    	function delEmp(){ 
    		//1.获取被选中的员工
    		$(":checked").parents("tr").each(function(){ 
    			//如果当前行是表头, 不要删除
    			if($(this).find("th").length == 0){ 
    				$(this).remove();
    			}
    		});
    	}
    	/* --- 修改指定id的员工 --- */
    	function updEmp(){ 
    		//1.获取要修改的员工信息
    		var id = $("#box2").find("input[name='id']").val().trim();
    		var name = $("#box2").find("input[name='name']").val().trim();
    		var email = $("#box2").find("input[name='email']").val().trim();
    		var salary = $("#box2").find("input[name='salary']").val().trim();
    		//2.检查员工信息是否符合格式(不能为空)
    		if(id == "" || name == "" || email == "" || salary == ""){ 
    			alert("修改员工信息不能为空!!!");
    		}
    		//3.检查ID是否存在(必须要存在)
    		var flag = true;
    		$("table tr").each(function(){ 
    			if(id == $(this).find("td:eq(1)").text()){ 
    				//4.进行修改
    				//>>修改姓名
    				$(this).find("td:eq(2)").text(name);
    				//>>修改邮箱
    				$(this).find("td:eq(3)").text(email);
    				//>>修改工资
    				$(this).find("td:eq(4)").text(salary);
    				flag = false;
    			}
    		});
    		if(flag){ 
    			alert("您修改的员工id不存在!!!");
    		}
    	}
    	/* 点击全选设置 员工所在的行全选或者全不选 */
    	function checkAll(){ 
    		//获取全选复选框的选中状态（true表示选中，false表示取消选中）
    		var isCheck = $("#all").prop("checked");
    		//将全选复选框的选中状态设置给所有员工所在行的复选框
    		$("input[type='checkbox']").prop("checked", isCheck);
    	}
    </script>
    </head>
    
    <h2>添加新员工</h2>
    <div id="box1">
    	ID：<input type="text" name="id"/>
    	姓名：<input type="text" name="name"/>
    	邮箱：<input type="text" name="email"/>
    	工资：<input type="text" name="salary"/>
    	<input type="button" onclick="addEmp()" id="add" value="添加新员工"/>
    </div>
    <hr/>
    <table border="1">
    	<tr>
    		<th>
    			
    			<input type="checkbox" onclick="checkAll()" id="all"/>
    		</th>
    		<th>ID</th>
    		<th>姓名</th>
    		<th>邮箱</th>
    		<th>工资</th>
    	</tr>
    	<tr>
    		<td>
    			<input type="checkbox"/>
    		</td>
    		<td>1</td>
    		<td>宋江</td>
    		<td>sj@163.com</td>
    		<td>12000</td>
    	</tr>
    	<tr>
    		<td>
    			<input type="checkbox"/>
    		</td>
    		<td>2</td>
    		<td>武松</td>
    		<td>ws@163.com</td>
    		<td>10500</td>
    	</tr>
    	<tr>
    		<td>
    			<input type="checkbox"/>
    		</td>
    		<td>3</td>
    		<td>孙二娘</td>
    		<td>sen@163.com</td>
    		<td>11000</td>
    	</tr>
    </table>
    <h4><a href="javascript:void(0)" onclick="delEmp()" id="del">删除选中员工</a></h2>
    <hr/>
    
    <div id="box2">
    	ID：<input type="text" name="id"/>
    	姓名：<input type="text" name="name"/>
    	邮箱：<input type="text" name="email"/>
    	工资：<input type="text" name="salary"/>
    	<input type="button" onclick="updEmp()" id="upd" value="根据ID修改员工信息"/>
    </div>
    </body>
    </html>

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

## 四、jQuery总结 ##

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

#### 1、html元素操作 ####

*  **1.1 创建元素**

$("<div></div>") -- 创建一个div元素，返回的是一个jQuery对象,表示创建的div元素
    $("<div>xxxx</div>") -- 创建一个包含内容的div元素，返回的是一个jQuery对象,表示创建的div元素

*  **1.2 添加子元素**

$parent.append( $child ) -- 父元素调用方法添加子元素
    $("body").append( "<div>我是新来的...</div>" ); -- 往body元素内部追加一个div子元素

*  **1.3 删除元素**

$("div").remove() -- 删除所有的div元素
    
    JS删除所有div元素：
    //获取所有的div元素(返回的是所有div组成的数组)
    var divArr = document.getElementsByTagName("div"); //div数组
    //遍历div数组,依次删除每一个div元素
    var len = divArr.length;
    for(var i=0;i<len;i++){ 
        //通过当前元素的父元素删除当前元素(始终删除第一个)
        divArr[0].parentNode.removeChild( divArr[0] );
    }

*  **1.4 替换元素**

$("div").replaceWith("<p>我是来替换的…</p>")

#### 2、html元素内容和值的操作 ####

<div>
      	这是一个div11元素
        <span>这是一个span元素</span>
        这是一个div1111元素
    </div>

*  **2.1 html()函数 (类似于js中的innerHTML属性)**

– 用于获取或设置元素的内容，比如为div、span、p、h1~h6、table、tr、td、form等元素设置内容

$("div").html() -- 获取所有div中的第一个div的内容
    $("div").html("xxxx") -- 为所有div设置内容

*  **2.2 text()函数 (类似于js中的innerText属性，innerText在部分浏览器中不兼容)**

– 用于获取或设置元素的文本内容

$("div").text() -- 获取所有div中的所有文本内容
    $("div").text("xxxx") -- 为所有div设置文本内容

*  **2.3 val()函数** (类似于js中的value属性)

– 获取或设置表单项元素的value值(input/select/option/textarea)

$("input").val() -- 获取所有input元素中的第一个input元素的value值
    $("input").val(值) -- 为所有的input元素设置value值

#### 3、元素属性和css属性操作 ####

*  **3.1 prop()函数** – 用于获取或设置元素的属性值

在jQuery1.6版本之后才有这个函数，1.6之前版本的jQuery可以使用attr()函数

$("input[type='checkbox']").prop("checked")
    -- 获取input复选框的选中状态, 返回true表示复选框为选中状态,返回false表示复选框为取消选中状态
    $("input[type='checkbox']").prop("checked", true)
    -- 设置所匹配的复选框元素为选中状态
    
    $("#inp").prop("name"); //获取id为inp元素的name属性值, 返回useranme
    $("#inp").prop("name","user"); //为id为inp的元素设置name属性值, name属性值就会变成user

*  **3.2 css()函数** – 用于获取或设置元素的css属性值

$("#div1").css("width") -- 获取id为div1元素的宽度
    $("#div1").css("width","200px") -- 设置id为div1元素的宽度为200px
    $("#div1").css({ 
    	"width" : "200px",
    	"height" : "150px",
    	"border" : "5px solid red",
    	"background" : "pink"
    }); // 为id为div1的元素设置宽度为200px、高度为150px、边框以及背景颜色等样式

#### 4、其他函数 ####

*  **4.1 each() 函数**

$(selector).each(function( index,element ){})
    -- each()函数可以遍历$(selector)选择器选中的所有元素(即每次都选择器选中的元素中获取一个元素,并执行function 函数)
    -- function中的index -- 表示遍历的元素的下标
    -- function中的element -- 表示当前正在遍历的元素(也可以通过this获取)

*  **4.2 show()/hide() 函数**
    
     *  `show()`– 设置元素由隐藏变为显示
     *  `hide()` – 设置元素由显示变为隐藏

$("div").show() -- 设置所有的div元素为显示

等价于:

$("div").css("display", "block");

$("div").hide() -- 设置所有的div元素为隐藏

等价于:

$("div").css("display", "none")

*  **4.3 toggle()/slideToggle()**
    
     *  `toggle()` – 切换元素的显示状态, 如果元素是显示的, 则切换为隐藏, 否则切换为显示
     *  `slidToggle()` \--切换元素的显示状态, 如果元素是显示的, 则切换为隐藏，否则切换为显示，切换为显示为下拉状态，隐藏为收缩状态。

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

## 五、扩展内容 ##

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

#### 1、为元素绑定点击事件 ####

以点击事件为例，为元素绑定点击事件的方式为:

*  **方式1(js版)：**

*  **方式2(js版)：**

*  **方式3(jQuery版)：**

#### 2、js对象和jQuery对象的互相转换 ####

*  通过JS的方式获取元素，返回的是JS对象，JS对象只能调用JS的属性或函数
 *  通过jQuery选择器获取元素，返回的是jQuery对象（结构像一个集合），jQuery对象只能调用jQuery的属性或函数。
 *  如果现有JS对象，但我们需要调用jQuery的属性或函数，可以将JS对象转成jQuery对象；
 *  如果现有jQuery对象，但我们需要调用JS的属性或函数，可以将jQuery对象转成JS对象；

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

> **总结：**
> 
> > 1、前端框架还有很多，在此就介绍jQuery，像一些Bootstrap、Angularjs框架、React框架、Vue框架是目前非常主流的框架，如果你致力于做前端开发，我想这些至少精通一种吧！！  
> > 2、前端到后端的基础，都系统的介绍了一遍了，接下来，就要了解一些服务器的知识了。  
> > 3、下篇文章的主题是Tomcat和HTTP的内容。相对于以前的基础来说，可以说后面的文章会经常用到tomcat，所以一定要掌握好。

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

[20200513211444152.png_pic_center]: /images/20230312/62512344f089434d9886095c56df52fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20230312/9b43b87aca29420c9c2679694755bf03.png
[20200514093450208.png_pic_center]: https://img-blog.csdnimg.cn/20200514093450208.png#pic_center
[20200514093616825.png_pic_center]: https://img-blog.csdnimg.cn/20200514093616825.png#pic_center
[20200514111918162.jpg_pic_center]: https://img-blog.csdnimg.cn/20200514111918162.jpg#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20200514110520101.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_1_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_8_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200514111728139.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_1,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ==,size_8,color_FFFFFF,t_70#pic_center