【网页制作】jQuery模拟提交表单生成卡片

🌈据说，看我文章时 关注、点赞、收藏 的 帅哥美女们 心情都会不自觉的好起来。

前言：
🧡作者简介：大家好我是 user_from_future ，意思是 “ 来自未来的用户 ” ，寓意着未来的自己一定很棒~
✨个人主页：点我直达，在这里肯定能找到你想要的~
👍专栏介绍：Html+Css+JS / jQuery小型网页综合实战 ，一个专注于分享网页制作实例的专栏~

专栏文章直链：
【网页制作】制作静态钟表
【网页制作】jQuery控制页面侧边栏的收缩与展开
【网页制作】制作百度网盘登录页
【网页制作】注册表单页
【网页制作】jQuery操作css实现设置箭头图片

制作要求

使用jQuery模拟提交表单生成卡片

制作效果图

参考源代码

目录结构

└──网页文件夹
	└──ask_add.html

ask_add.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery模拟提交表单生成卡片</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			li {
				list-style: none;
			}

			button {
				color: red;
				width: 200px;
				height: 36px;
				margin: 6px 0;
				cursor: pointer;
				border-radius: 6px;
				font-weight: bolder;
				border: 1px solid red;
				background-color: rgba(255, 0, 0, 0.2);
			}

			#main {
				width: 800px;
				height: auto;
				margin: 0 auto;
			}

			#ask {
				width: 100%;
				height: 48px;
			}

			#form {
				width: 600px;
				height: auto;
				display: none;
				margin: 10px auto;
				font-weight: bolder;
				border: 1px solid black;
			}

			#form>p {
				margin: 10px;
			}

			#form>p>input {
				width: 80%;
				height: 30px;
				border: 1px solid black;
			}

			#form>p>select {
				width: 40%;
				height: 30px;
				font-weight: bolder;
				border: 1px solid black;
			}

			#form>p>textarea {
				width: 80%;
				height: 160px;
				border: 1px solid black;
			}

			#form>p>input::-webkit-input-placeholder {
				color: black;
			}

			#show {
				width: 100%;
				height: 81px;
				display: none;
			}

			.item {
				width: 778px;
				height: 80px;
				margin: 10px;
				border-bottom: 1px dashed black;
			}

			#show p {
				height: 30px;
				line-height: 30px;
			}

			img {
				float: left;
				width: 60px;
				height: 60px;
				border-radius: 50%;
			}

			#content {
				float: left;
				font-size: 20px;
				padding: 0 10px;
				width: calc(100% - 80px);
			}
		</style>
	</head>
	<body>
		<div id="main">
			<div id="ask">
				<button onclick="question()">我要提问</button>
			</div>
			<hr />
			<div id="form">
				<p><input id="title" type="text" placeholder="请输入标题（1-50个字符）" /></p>
				<p>所属板块
					<select id="plate">
						<option value="请选择模块" selected="selected">请选择模块</option><!-- disabled="disabled" -->
						<option value="免费提问">免费提问</option>
						<option value="付费提问">付费提问</option>
					</select>
				</p>
				<p>
					<textarea id="detail"></textarea>
				</p>
				<p>
					<button onclick="release()">发布</button>
				</p>
			</div>
			<ul id="show">
				<li class="item">
					<img src="https://thirdqq.qlogo.cn/g?b=sdk&k=55hr3SavP7oAlVrc1AJqfQ&s=100" />
					<div id="content">
						<p>
							<span id="title_res">test</span>
						</p>
						<p>
							版块：<span id="plate_res"></span>&ensp;&ensp;&ensp;&ensp;发表时间：<span id="r_time"></span>
						</p>
					</div>
				</li>
			</ul>
		</div>
		<script src="jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
			function question() {
				$('#form').css('display', 'block');
				$('#show').css('display', 'none');
			}

			function release() {
				var myDate = new Date;
				var year = myDate.getFullYear();
				var mon = myDate.getMonth() + 1;
				var date = myDate.getDate();
				var hour = myDate.getHours();
				var minute = myDate.getMinutes();
				$('#form').css('display', 'none');
				$('#show').css('display', 'block');
				$('#title_res').text($('#title').val());
				$('#plate_res').text($('#plate').val());
				$('#r_time').text(year + '-' + mon + '-' + date + ' ' + hour + ':' + minute);
			}
		</script>
	</body>
</html>

附赠知识

关于jQuery中 .text() 、 .html() 、 .val() 的区别与联系：

方法名	无参作用	有参作用	传参内容
.text()	获取标签的文本内容（含子标签）	设置标签文本内容（会将所有子标签html视为一体被覆盖）	文本（html也会解析为文本）
.html()	获取标签的html代码（含子标签）	设置标签html代码（会将所有子标签html视为一体被覆盖）	html代码（支持残缺补全，无法识别则认为是文本）
.val()	获取标签的value属性值（没有为空）	设置value属性（一般是设计给 input 标签使用的）	value属性值（普通标签使用了没有任何变化）

实验验证：

使用如图所示的代码，分别打印这三个，记住右边网页显示的样子，接下来是修改环节：

这个标签里面的所有内容都变成了 <p>测试</p> 。

这个标签里面的所有html都变成了 <h1><span style="color: red;">测试</span></h1> ，他能自动对残缺标签进行补全并识别，然后浏览器渲染出了文字。
如果无法识别成功，他就会当成是字符串处理。

不过这个设置没有意义，因为它主要是为 input 标签设计的，普通标签设置了是没有任何变化的。

致谢

本篇实例素材来自于 X Y H 🧡 ~