定制小程序开发通过Jquery获取表单的数据

思路：

  1. 定制小程序开发首先先想好页面布局，定制小程序开发然后写出页面的样式。定制小程序开发本次项目我分为以下三定制小程序开发个部分来写。
  2. 对应代码实现需要的知识点有个模糊概念：（1）JQuery（2）form表单（3）盒子模型
  3. 代码实现：本次项目代码实现分为两个部分，一个部分是表单展示的实现，另一个部分则是JQuery获取信息，通过控制台输出。

 实现过程及代码：

  1. 首先是表单结构 ，这里我用盒子模型划分成三个部分 
    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>注册</title>
    6. 		<style type="text/css">
    7. 			#box1 {            //导航栏的盒子
    8. 				width: 100%;
    9. 				height: 50px;
    10. 				background-color: #C0D9D9;
    11. 				float: left;
    12. 			}
    13.  
    14. 			.a {                //导航栏盒子样式
    15. 				width: 100%;
    16. 				height: 50px;
    17. 				text-align: -moz-left;
    18. 			}
    19.  
    20. 			#box1_01 {
    21. 				width: 100%;
    22. 				height: 50px;
    23. 				margin-top: 12px;
    24. 				margin-left: 3px;
    25. 			}
    26.  
    27.  
    28. 			#box2 {            //提示栏的盒子
    29. 				width: 100%;
    30. 				height: 40px;
    31. 				float: left;
    32. 				margin-left: 10px;
    33. 				margin-top: 20px;
    34. 				margin-right: 10px;
    35. 			}
    36.  
    37. 			.b {
    38. 				width: 100%;
    39. 				height: 39px;
    40. 				text-align: left;
    41. 			}
    42.  
    43.  
    44. 			#box3 {            //表单的盒子
    45. 				width: 100%;
    46. 				height: 100%;
    47. 				float: left;
    48. 			}
    49.  
    50. 			.c {
    51. 				width: 100%;
    52. 				height: 600px;
    53. 			}
    54. 			.c ul{
    55. 				list-style: none;
    56. 			}
    57. 			.c ul li{
    58. 				margin-bottom: 20px;
    59. 				position: relative;
    60. 			}
    61.  
    62. 			form {
    63. 				margin-top: 20px;
    64. 				margin-left: 40px;
    65. 			}
    66.  
    67. 			span {
    68. 				font-weight: 700;//设置字体加粗的样式
    69. 			}
    70. 			label{                //对表单里的行距进行设置
    71. 				width:80px;
    72. 				border: 0px;
    73. 				display: inline-block;
    74. 				float: left;
    75. 				text-align: -moz-center;
    76. 			}
    77.  
    78. 			.s {                    //设置灰色下划线
    79. 				border-bottom: 2px solid darkgrey;
    80. 				margin-bottom: 10px;
    81. 				position: relative;
    82. 				height: 35px;
    83. 				margin-right: 20px;
    84. 			}
    85.  
    86. 			.s span {                //设置蓝色下划线并通过下移去覆盖灰色的下划线
    87. 				border-bottom: 5px solid #00FFFF;
    88. 				position: absolute;
    89. 				bottom: -2.5px;
    90. 			}
    91.  
    92. 			.k_input {                //设置输入框的样式
    93. 				width: 300px;
    94. 				height: 30px;
    95. 				border: 1px solid #C0C0C0;
    96. 			}
    97.  
    98. 			#submit {                //设置按钮样式
    99. 				margin-left: 100px;
    100. 				background-color: #00FFFF;
    101. 				font-size: 15px;
    102. 				color: black;
    103. 				font-weight: bold;
    104. 				width: 100px;
    105. 				height: 30px;
    106. 			}
    107. 		</style>
    108. 	</head>
    109. 	<body>
    110.  
    111. 		<div id="box1" class="a">
    112. 			<div id="box1_01">
    113. 				<span>位置:&nbsp&nbsp&nbsp&nbsp</span><a href="#">首页</a>&nbsp&nbsp&nbsp&nbsp-->&nbsp&nbsp&nbsp&nbsp<a href="#">表单</a>
    114. 			</div>
    115. 		</div>
    116.  
    117. 		<div id="box2" class="b">
    118. 			<div class="s">
    119. 				<div class="s1">
    120. 					<span>注册信息</span>
    121. 				</div>
    122. 			</div>
    123. 		</div>
    124.  
    125. 		
    126. 		<form>
    127. 			<div id="box3" class="c">
    128. 				<ul>
    129. 				<li>
    130. 					<label>账号：</label>
    131. 					<input type="text" id="username" name="username" class="k_input" placeholder="请输入账号:" />
    132. 				</li>
    133. 				<li>
    134. 					<label>密码：</label>
    135. 					<input type="text" id="password" name="password" class="k_input" placeholder="请输入密码:" />
    136. 				</li>
    137. 				<li>
    138. 					<label>性别：</label>
    139. 					<input type="radio" name="sex" value="yes" checked />男&nbsp&nbsp&nbsp&nbsp
    140. 					<input type="radio" name="sex" value="no" checked />女
    141. 				</li>
    142. 				<li>
    143. 					<label>爱好：</label>
    144. 					<input type="checkbox" id="hobby" name="hobby" value="唱" />唱歌
    145. 					<input type="checkbox" id="hobby" name="hobby" value="跳" />跳舞
    146. 					<input type="checkbox" id="hobby" name="hobby" value="Rapper" />打篮球
    147. 				</li>
    148. 				<li>
    149. 					<label>星座：</label>
    150. 					<select id="stars" name="stars">
    151. 						<option value="1">白羊座</option>
    152. 						<option value="1">金牛座</option>
    153. 						<option value="1">处女座</option>
    154. 					</select>
    155. 				</li>
    156. 				<li>
    157. 					<label>备注</label>
    158. 					<textarea id="remark" name="remark"></textarea>
    159. 				</li>
    160. 				<li>
    161. 					<input type="button" name="submit" id="submit" value="注册"/>
    162. 				</li>
    163. 				</ul>
    164. 			</div>
    165. 		</form>
    166. 		
    167. 	</body>
    168. </html>

    一共是三个盒子box1、2、3；对应的三个类去实现相应的样式。

  2. JQuery获取表单的代码：首先需要导入JQuery文件。

     然后才是开始写入script代码

  3. 完整的代码如下

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>注册</title>
    6. 		<script src="js/jquery-3.6.0.js"></script>
    7. 		<style type="text/css">
    8. 			#box1 {
    9. 				width: 100%;
    10. 				height: 50px;
    11. 				background-color: #C0D9D9;
    12. 				float: left;
    13. 			}
    14.  
    15. 			.a {
    16. 				width: 100%;
    17. 				height: 50px;
    18. 				text-align: -moz-left;
    19. 			}
    20.  
    21. 			#box1_01 {
    22. 				width: 100%;
    23. 				height: 50px;
    24. 				margin-top: 12px;
    25. 				margin-left: 3px;
    26. 			}
    27.  
    28.  
    29. 			#box2 {
    30. 				width: 100%;
    31. 				height: 40px;
    32. 				float: left;
    33. 				margin-left: 10px;
    34. 				margin-top: 20px;
    35. 				margin-right: 10px;
    36. 			}
    37.  
    38. 			.b {
    39. 				width: 100%;
    40. 				height: 39px;
    41. 				text-align: left;
    42. 			}
    43.  
    44.  
    45. 			#box3 {
    46. 				width: 100%;
    47. 				height: 100%;
    48. 				float: left;
    49. 			}
    50.  
    51. 			.c {
    52. 				width: 100%;
    53. 				height: 600px;
    54. 			}
    55. 			.c ul{
    56. 				list-style: none;
    57. 			}
    58. 			.c ul li{
    59. 				margin-bottom: 20px;
    60. 				position: relative;
    61. 			}
    62.  
    63. 			form {
    64. 				margin-top: 20px;
    65. 				margin-left: 40px;
    66. 			}
    67.  
    68. 			span {
    69. 				font-weight: 700;
    70. 			}
    71. 			label{
    72. 				width:80px;
    73. 				border: 0px;
    74. 				display: inline-block;
    75. 				float: left;
    76. 				text-align: -moz-center;
    77. 			}
    78.  
    79. 			.s {
    80. 				border-bottom: 2px solid darkgrey;
    81. 				margin-bottom: 10px;
    82. 				position: relative;
    83. 				height: 35px;
    84. 				margin-right: 20px;
    85. 			}
    86.  
    87. 			.s span {
    88. 				border-bottom: 5px solid #00FFFF;
    89. 				position: absolute;
    90. 				bottom: -2.5px;
    91. 			}
    92.  
    93. 			.k_input {
    94. 				width: 300px;
    95. 				height: 30px;
    96. 				border: 1px solid #C0C0C0;
    97. 			}
    98.  
    99. 			#submit {
    100. 				margin-left: 100px;
    101. 				background-color: #00FFFF;
    102. 				font-size: 15px;
    103. 				color: black;
    104. 				font-weight: bold;
    105. 				width: 100px;
    106. 				height: 30px;
    107. 			}
    108. 		</style>
    109. 		<script type="text/javascript">
    110. 			$(document).ready(function(){
    111. 				$("#submit").click(function(){
    112. 					var username = $("input[name='username']").val();
    113. 					var password = $("input[name='password']").val();
    114. 					var sex = $("input[name='sex']:checked").val();
    115. 					var hobbys = [];
    116. 					var hobbyArrs = $("input[name='hobby']:checked");
    117. 					for (var i = 0; i < hobbyArrs.length; i++) {
    118. 						hobbys[i] = $(hobbyArrs[i]).val();
    119. 					}
    120. 					var stars = $("#stars option:selected").val();
    121. 					var remark = $("#remark").val();
    122. 					
    123. 					var res = {};
    124. 					res.username = username;
    125. 					res.password = password;
    126. 					res.sex = sex;
    127. 					res.hobby = hobbys;
    128. 					res.stars = stars;
    129. 					res.remark = remark;
    130. 					
    131. 					console.log(res);
    132. 					
    133. 					$("#result").html(JSON.stringify(res));
    134. 				});
    135. 			});
    136. 		</script>
    137. 	</head>
    138. 	<body>
    139.  
    140. 		<div id="box1" class="a">
    141. 			<div id="box1_01">
    142. 				<span>位置:&nbsp&nbsp&nbsp&nbsp</span><a href="#">首页</a>&nbsp&nbsp&nbsp&nbsp-->&nbsp&nbsp&nbsp&nbsp<a href="#">表单</a>
    143. 			</div>
    144. 		</div>
    145.  
    146. 		<div id="box2" class="b">
    147. 			<div class="s">
    148. 				<div class="s1">
    149. 					<span>注册信息</span>
    150. 				</div>
    151. 			</div>
    152. 		</div>
    153.  
    154. 		
    155. 		<form>
    156. 			<div id="box3" class="c">
    157. 				<ul>
    158. 				<li>
    159. 					<label>账号：</label>
    160. 					<input type="text" id="username" name="username" class="k_input" placeholder="请输入账号:" />
    161. 				</li>
    162. 				<li>
    163. 					<label>密码：</label>
    164. 					<input type="text" id="password" name="password" class="k_input" placeholder="请输入密码:" />
    165. 				</li>
    166. 				<li>
    167. 					<label>性别：</label>
    168. 					<input type="radio" name="sex" value="yes" checked />男&nbsp&nbsp&nbsp&nbsp
    169. 					<input type="radio" name="sex" value="no" checked />女
    170. 				</li>
    171. 				<li>
    172. 					<label>爱好：</label>
    173. 					<input type="checkbox" id="hobby" name="hobby" value="唱" />唱歌
    174. 					<input type="checkbox" id="hobby" name="hobby" value="跳" />跳舞
    175. 					<input type="checkbox" id="hobby" name="hobby" value="打篮球" />打篮球
    176. 				</li>
    177. 				<li>
    178. 					<label>星座：</label>
    179. 					<select id="stars" name="stars">
    180. 						<option value="白羊座">白羊座</option>
    181. 						<option value="金牛座">金牛座</option>
    182. 						<option value="处女座">处女座</option>
    183. 					</select>
    184. 				</li>
    185. 				<li>
    186. 					<label>备注</label>
    187. 					<textarea id="remark" name="remark"></textarea>
    188. 				</li>
    189. 				<li>
    190. 					<input type="button" name="submit" id="submit" value="注册"/>
    191. 				</li>
    192. 				</ul>
    193. 			</div>
    194. 		</form>
    195. 		<p id="result"></p>
    196. 	</body>
    197. </html>

检测及结果：

开始检测时，星座输出不了，经检查发现是一个单词option写错为opition。

 

因为是在代码中加了一个，方便直接看到结果，所以有最后一行的输出。

最后去页面看控制台

 

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发