使用jquery获取表单数据，在控制台打印结果

最新推荐文章于 2022-11-29 15:17:03 发布

YiZhiUnicorn

最新推荐文章于 2022-11-29 15:17:03 发布

阅读量289

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_53795808/article/details/126352194

版权

jQuery是一个js库，免费开源易用，提供了我们开发中常用到的操作DOM的API，解决了我们使用js操作 DOM常遇到的一些问题，强大的选择器，简化我们的操作

JQuery特点：

1. 轻量级

2. 富应用

3. DOM操作

4. 事件处理

5. 运动动画

6. AJAX

7. 跨浏览器（不再考虑浏览器兼容）

8. 链式调用

9. 隐式迭代

10. 丰富的插件库 ........

JQuery引入

下载JQuery的js文件，在本地进行引用(推荐)

官网地址：https://jquery.com/

<script src="js/jquery3.6.0.js"></script>

JQuery选择器

JQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的CSS选择器，除此之外，它还有一些自定义的选择器。 jQuery 中所有选择器都以美元符号开头：$()。

JQuery事件

使用click鼠标事件和属性过滤选择器将表单数据打印到控制台，userName使用的是表单选择器

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js"></script>
		<style type="text/css">
			body {
				margin: 0px;
				font-size: 14px;
			}

			#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;
			}

			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>
		<script type="text/javascript">
		$(document).ready(function(){
			$("#btn").click(function(){
				var userName=$(":text").val();
				var pwd =$("input[name='pwd']").val();
				var sex=$("input[type='radio']:checked").val();
				var hobbys=[];
				var hobbyArrs=$("input[name='hobby']:checked");
				for (var i=0;i<hobbyArrs.length;i++){
					hobbys[i]=$(hobbyArrs[i]).val();
				}
				var star=$("#star option:selected").val();
				var remark=$("#remark").val();
				var res={};
				res.userName=userName;
				res.pwd=pwd;
				res.sex=sex;
				res.hobby=hobbys;
				res.star=star;
				res.remark=remark;
				console.log(res);
				$("#result").html(JSON.stringify(res));
				return false;
			});
		});
		</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 method="get">
					<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="1">白羊座</option>
								<option value="2">水瓶座</option>
								<option value="3">射手座</option>
							</select>
						</li>
						<li>
							<label>备注</label>
							<textarea id="remark" name="remark"></textarea>
						</li>
						<li>
							<label>&nbsp;</label>
							<button id="btn">注&nbsp;&nbsp;&nbsp;册</button>
						</li>
					</ul>
				</form>
				
			</div>
			<p id="result"></p>
		</div>
	</body>
</html>