1、目标HTML页面

在这里插入图片描述

2、jQuery的引入：

1.下载JQuery的js文件，在本地进行引用(推荐)
官网地址：jQuery官网

<script src="js/jquery­3.6.0.js"></script>

3、代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">/*设置样式*/
			body {
				margin: 0px;
				font-size: 14px;
			}

			/*设置顶部样式  主要使用id选择器匹和标签选择器配元素*/
			#top {
				height: 30px;
				background-color: azure;
			}

			#top span {
				margin-left: 7px;
				line-height: 30px;
				float: left; //向左浮动
				font-weight: bolder;
				margin-right: 7px;
			}

			#top>ul {
				list-style: none;
				margin-top: 0px;
				margin-bottom: 0px;
				float: left;
				line-height: 30px;
				padding: 0px;
			}

			#top ul li {
				float: left;
				margin-left: 7px;
				margin-right: 3px;
			}

			/*设置主体部分*/
			#main {
				width: 98%;
				margin: 20px auto;
			}

			#main_top {
				border-bottom: 1px solid darkgray;
				height: 30px;
				position: relative;
			}

			#main_top span {
				font-weight: bolder;
				border-bottom: 3px solid #00FFFF;
				line-height: 30px;
				position: absolute;
				bottom: -1px;
			}

			#main_body form ul {
				list-style: none; //去掉实心圆点
			}

			#main_body form ul li {
				margin-top: 15px;
			}

			/*设置form表单元素的样式*/
			label {
				display: inline-block;
				line-height: 30px;
				width: 80px;
				text-align: center;
				float: left;
			}

			input[name='userName'],
			input[name='pwd'] {
				width: 300px;
				height: 26px;
				border-radius: 5px;
				border: 1px solid dimgray;
			}

			select {
				width: 200px;
				height: 26px;
				border-radius: 5px;
				border: 1px solid dimgray;
			}

			textarea {
				width: 400px;
				height: 100px;
				border-radius: 5px;
				border: 1px solid dimgray;
			}

			button {
				width: 100px;
				height: 30px;
				background-color: #00FFFF;
				color: white;
				font-weight: bolder;
				border: 0px;
				border-radius: 5px;
			}

			input[type='radio'],
			input[type='checkbox'] {
				margin-top: 10px;
			}
		</style>
		
		<!--导入jQuery-->
		<script src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			$(function() {
				$("#btn").click(function() {/*点击button事件*/
					/*获取表单数据*/
					var userName = $("#userName").val();
					var password = $("#pwd").val();
					var sex = $("input[name='sex']:checked").val();
					var hobby = "";
					$("input[name='hobby']:checked").each(function(){
						hobby += $(this).val()+" "; //this表示当前获取的元素
					})
					var star = $("#star option:selected").val();
					var remark = $("#remark").val();
					
					/*将结果放入result中，然后输出result*/
					var result = {};
					result.userName=userName;
					result.password=password;
					result.sex=sex;
					result.hobby=hobby;
					result.star=star;
					result.remark=remark;
					console.log(JSON.stringify(result));
					
				})
			})
		</script>
	</head>
	<body>
		<!-- 顶部 -->
		<div id="top">
			<span>位置:</span>
			<ul>
				<li>首页</li>
				<li>--></li>
				<li>表单</li>
			</ul>
		</div>
		<!-- 主体 -->
		<div id="main">
			<div id="main_top">
				<span>注册信息</span>
			</div>
			<div id="main_body">
				<form>
					<ul>
						<li>
							<label for="userName">账号</label>
							<input type="text" id="userName" name="userName" placeholder="请输入账号" />
						</li>
						<li>
							<label for="pwd">密码</label>
							<input type="password" id="pwd" name="pwd" placeholder="请输入密码" />
						</li>
						<li>
							<label>性别</label>
							<input type="radio" name="sex" value="male" checked />男
							<input type="radio" name="sex" value="female" />女
						</li>
						<li>
							<label>爱好</label>
							<input type="checkbox" name="hobby" value="basketball"  />篮球
							<input type="checkbox" name="hobby" value="football" />足球
							<input type="checkbox" name="hobby" value="pingpang" />兵乓球
						</li>
						<li>
							<label>星座</label>
							<select name="star" id="star">
								<option value="白羊座">白羊座</option>
								<option value="水瓶座">水瓶座</option>
								<option value="射手座">射手座</option>
							</select>
						</li>
						<li>
							<label>备注</label>
							<textarea name="remark" id="remark"></textarea>
						</li>
						<li>
							<label>&nbsp;</label>
							<button id="btn" type="button">注&nbsp;&nbsp;&nbsp;册</button>
						</li>
					</ul>
				</form>
			</div>
		</div>
	</body>
</html>

4、最终效果：

在这里插入图片描述

# jquery # css # 前端 # javascript # html
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟