【无标题】jquery案例:获取表单数据，在控制台上打印.

最新推荐文章于 2024-09-11 20:31:47 发布

䁓

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量174

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_52687353/article/details/126352230

版权

jQuery JavaScript框架表单数据事件处理 Ajax交互

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.jquery:

jquery概念：

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

2006 年 1 月由 John Resig 发布。 jQuery 设计的宗旨是 “write Less ， Do More” ，即倡导写更少的代码，做更多的事

情。它封装 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动

画设计和 Ajax 交互。

2.JQuery引入:

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

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

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

2.使用公网url进行引用（当网络条件不好的时候会引用失败）

<script src="https://code.jquery.com/jquery3.6.0.js"></script>

3.jquery语法：这里不多强调

4.案列：获取表单数据，在控制台上打印：

<!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;
						}
			
						#btn {
							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 password = $(":password").val();
					var racio = $(":radio:checked").val();
					var hobbys = [];
					var i = 0;
					$(":checkbox:checked").each(function() {
						hobbys[i] = $(this).val();
						i++;
					});
					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));
				});
			});
		</script>
	</head>
	<!-- 头 -->
			<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="post">
						<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">
									<option value="1">白羊座</option>
									<option value="2">水瓶座</option>
									<option value="3">射手座</option>
								</select>
							</li>
							<li>
								<label>备注</label>
								<textarea name="remark"></textarea>
							</li>
							<li>
								<label>&nbsp;</label>
								<button id="btn">注&nbsp;&nbsp;&nbsp;册</button>
							</li>
						</ul>
					</form>
				</div>
			</div>
		</body>
</html>