【html+jquery（大概）】表单的获取和交互

最新推荐文章于 2024-09-10 14:15:01 发布

无渊林

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量402

点赞数

分类专栏：前端学习文章标签： jquery html

本文链接：https://blog.csdn.net/LinkBoundaryless/article/details/122223806

版权

这篇博客探讨了如何使用jQuery与DOM结合进行表单交互。虽然标题提及仅使用jQuery，但实际示例中结合了DOM操作。文章通过代码展示信息获取和输出的过程，特别是年龄计算方法，涉及日期转换和简单的数学计算。尽管作者尝试全用jQuery实现，但遇到了问题，最终决定待技术提升后再进行更新。

摘要由CSDN通过智能技术生成

jQuery表单交互

（虽然标题是这么写……但最后还是用dom实现的，不过jquery的知识也有用到）

先上效果图

在这里插入图片描述

以下代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
		<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
    </head>
	<style>
	.div1{
     
		width: 320px;
		margin: 40px auto;
		padding: 20px;/* 内边距 */
		border: 1px solid chocolate;
		text-align: center;
	}
	.div2{
     
		position: relative;
		margin-top: 20px;
		border: 1px solid chocolate;
	}
	</style>
	
	<script>	
	function Sub(){
     

		var name = $('#name').val();//通过id获取姓名的值
		var sex = $('input:radio[name="sex"]:checked').val();//通过 name 获取值
		
		var birthday = new Date($('#date').val());//获取出生日期并转换为日期格式
		var age = parseInt(((Date.now() - birthday)/