JQuery获取form表单内容

最新推荐文章于 2022-08-19 18:00:18 发布

|▋长得撇丿

最新推荐文章于 2022-08-19 18:00:18 发布

阅读量505

点赞数

文章标签： html css jquery

本文链接：https://blog.csdn.net/qq_55784826/article/details/126352501

版权

学习目标：

掌握jquery选择器的熟练使用

例如：表单对象选择器 $(":radio")

一周掌握 jquery入门知识

学习内容：

jquery是什么
jquery能干嘛
jquery基本的选择器
jquery事件

学习产出：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制台打印form表单内容</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .top {
            width: 100%;
            height: 40px;
            background-color: rgb(139, 208, 208);
            padding-top: 10px;
        }
        .top span {
            margin-left:20px ;
        }
        #reg {
            width: 68px;
            margin-top: 20px;
            margin-left: 20px;
            border-bottom: 7px solid rgb(86, 233, 233);
        }
        #reg1 {
            padding-left: 20px;
        }
        #reg1 span {
            position: relative;
            top: -4px;
        }
        .tail {
            position: relative;
            margin: 30px 0 0 90px;
        }
        .tail input {
            margin-bottom: 15px;
            box-shadow: 3px;
        }
        .tail select {
            margin-bottom: 15px;
        }
        .tail span#demo {
            position: absolute;
            top: 190px;
        }
        .tail textarea {
            position: absolute;
            top: 180px;
            left: 50px;
        }
        .tail button {
            position: absolute;
            top: 280px;
            left: 50px;
            width: 70px;
            height: 25px;
            background-color: rgb(53, 246, 246);
            color: #fff;
            border: none;
        }

    </style>
    <script src="../js/jquery-3.6.0.js"></script>
    <script>
        $(function() {
            $("#btn").click(function() {//单击事件
                var userName = $("#userName").val();//id选择器：获取id为userName的元素
                console.log("账号：" + userName);//控制台打印输入账号内容

                var pwd = $("#pwd").val();
                console.log("密码：" + pwd);

                var radio = $(":radio:checked").val();//表单对象选择器  选择type是radio的元素
                console.log("性别：" + radio);//checked:表单对象属性过滤。表示被选的内容

                $(":checkbox:checked").each(function() {//each:遍历多选框内容，选取被选择的内容
                    var hoppy = $(this).val();//表示当前被选择的值
                    console.log("爱好：" + hoppy);
                })

                var star = $("#star option:checked").val();//后代选择器，表示元素id为star下的option元素被选择的内容
                console.log("星座：" + star);

                var demo = $("textarea").val();//textarea标签中的内容
                console.log(demo);
            })
        })
    </script>
</head>
<body>
    <!-- 导航栏 -->
    <div class="top">
        <span><b>位置：</b>&nbsp;&nbsp;&nbsp;&nbsp;首页&nbsp;--&gt;&nbsp;&nbsp;表单</span>
    </div>
    <!-- 注册信息 -->
    <div id="reg"><b>注册信息</b>
    </div>
    <div id="reg1"><span><hr></span></div>
    <!-- 注册页面 -->
    <div class="tail">
        <form action="#" id="form" name="form" method="dialog">
            <span>账号：</span>
            <input type="text" name="userName" id="userName" placeholder="请输入账号"><br>
            <span>密码：</span>
            <input type="password" name="" id="pwd" placeholder="请输入密码"> <br>
            <span>性别：</span>
            <input type="radio" name="sex" id="" value="male">男&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="radio" name="sex" id="" value="female">女<br>
            <span>爱好：</span>
            <input type="checkbox" name="hoppy" id="" value="sing">唱歌&nbsp;&nbsp;
            <input type="checkbox" name="hoppy" id="" value="dance">跳舞&nbsp;&nbsp;
            <input type="checkbox" name="hoppy" id="" value="football">足球<br>
            <span>星座：</span>
            <select name="star" id="star">
                <option value="1">白羊座</option>
                <option value="2">水瓶座</option>
                <option value="3">山羊座</option>
            </select><br>
            <span id="demo">备注：</span>
            <textarea name="remark" id="demo" cols="30" rows="5"></textarea><br>
            <button id="btn">注册</button>
        </form>
    </div>
</body>
</html>