使用IDEA学习JSP代码第019课

最新推荐文章于 2022-09-06 09:36:36 发布

虾米大王

最新推荐文章于 2022-09-06 09:36:36 发布

阅读量161

点赞数

分类专栏： Java

本文链接：https://blog.csdn.net/modern358/article/details/125192853

版权

JavaScript DOM操作事件处理复选框操作输入验证

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

Java 专栏收录该内容

1297 篇文章 5 订阅

订阅专栏

new370.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap + jsp 的使用</title>
    <link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
    <script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
    <script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>
    <script type="text/javascript">
       window.onload = function (ev) {
           alert("动态注册onload事件");
       }
    </script>
</head>
<body>

</body>
</html>

new371.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap + jsp 的使用</title>
    <link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
    <script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
    <script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        function onclickFunc() {
            var usernameObj = document.getElementById("username");
            var text = usernameObj.value;
            var patt = /^\w{5,12}$/;

            if (patt.test(text))
            {
                alert("用户名符合规则。");
            }
            else
            {
                alert("不符合规则。");
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username">
    <button onclick="onclickFunc()">校验</button>
</body>
</html>

new372.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap + jsp 的使用</title>
    <link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
    <script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
    <script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        function checkAll() {
            var skills = document.getElementsByName("skill");
            for (var i = 0; i < skills.length; i++) {
                skills[i].checked = true;
            }
        }

        function checknotAll() {
            var skills = document.getElementsByName("skill");
            for (var i = 0; i < skills.length; i++) {
                skills[i].checked = false;
            }
        }

        function checkreverse() {
            var skills = document.getElementsByName("skill");
            for (var i = 0; i < skills.length; i++) {
                if (skills[i].checked)
                {
                    skills[i].checked = false;
                }
                else
                {
                    skills[i].checked = true;
                }
            }
        }

    </script>
</head>
<body>
    专业技能：
    <input type="checkbox" name="skill" value="c">c语言
    <input type="checkbox" name="skill" value="php">php
    <input type="checkbox" name="skill" value="java">java
    <br>
    <button onclick="checkAll()">全选</button>
    <button onclick="checknotAll()">全不选</button>
    <button onclick="checkreverse()">反选</button>
</body>
</html>

new373.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap + jsp 的使用</title>
    <link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
    <script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
    <script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>
    <style type="text/css">
        #inner{
            border: 1px solid darkseagreen;
            padding: 20px;
            margin-bottom: 20px;
        }

        #inner ul{
            list-style: none;
            display: inline-block;
        }

        #inner ul li{
            float: left;
            border: 1px solid gray;
            width: 80px;
            height: 80px;
            background-color: #769a99;
            color: white;
            font-size: 20px;
            line-height: 80px;
            text-align: center;
            margin-right: 15px;
        }

        #btnlist div{
            margin-top: 5px;
            margin-bottom: 20px;
        }

        #btnlist div button{
            width: 350px;
        }

    </style>
    <script type="text/javascript">
        window.onload = function () {

            //
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function () {
                 alert( document.getElementById("bj").innerHTML );
            };

            //
            var btn02 = document.getElementById("btn02");
            btn02.onclick = function () {
               var liObj = document.getElementsByTagName("li");
               alert( liObj.length);
            };

            //
            var btn03 = document.getElementById("btn03");
            btn03.onclick = function () {
                var genders = document.getElementsByName("gender");
                alert( genders.length);
            };


            //
            var btn04 = document.getElementById("btn04");
            btn04.onclick = function () {
                var lis = document.getElementById("city").getElementsByTagName("li");
                alert(lis.length);
            };

            //
            var btn05 = document.getElementById("btn05");
            btn05.onclick = function () {
                var nodes = document.getElementById("city").childNodes;
                alert( nodes.length);  //空格也算一个节点
            };

            //
            var btn06 = document.getElementById("btn06");
            btn06.onclick = function () {
                var phone = document.getElementById("phone");
                alert( phone.firstChild.innerHTML );
            };

            //
            var btn07 = document.getElementById("btn07");
            btn07.onclick = function () {
                var bj = document.getElementById("bj");
                alert( bj.parentNode.innerHTML );
            };

            //
            var btn08 = document.getElementById("btn08");
            btn08.onclick = function () {
                var an = document.getElementById("an");
                alert( an.previousSibling.innerHTML );
            };

            //
            var btn09 = document.getElementById("btn09");
            btn09.onclick = function () {
                var name = document.getElementById("username");
                alert( name.value );
            };

            //
            var btn10 = document.getElementById("btn10");
            btn10.onclick = function () {
                document.getElementById("username").value = "虾米大王";
            };

            //
            var btn11 = document.getElementById("btn11");
            btn11.onclick = function () {
                var bj = document.getElementById("bj");
                alert( bj.parentNode.innerText );
            };



        }
    </script>
</head>
<body>
<div class="container-fluid">
    <div class="col-md-6">
        <div id="total">
            <div id="inner">
                <p>你喜欢哪个城市</p>
                <ul id="city">
                    <li id="bj">北京</li>
                    <li>上海</li>
                    <li>东京</li>
                    <li>首尔</li>
                </ul>
                <br>
                <br>

                <p>你喜欢哪款游戏？</p>
                <ul id="game">
                    <li id="rl">红警</li>
                    <li>实况</li>
                    <li>极品飞车</li>
                    <li>魔兽</li>
                </ul>

                <br>
                <br>

                <p>你手机的操作系统是</p>
                <ul id="phone"><li>IOS</li><li id="an">安卓</li><li>windows</li></ul>


            </div>
            <div id="inner">
                性别：
                <input type="radio" name="gender" value="男">男
                <input type="radio" name="gender" value="女">女

                <br>
                <br>
                姓名：
                <input type="text" name="name" id="username" value="abcde">
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div id="btnlist">
            <div><button id="btn01" class="btn btn-primary">查找#bj节点</button></div>
            <div><button id="btn02" class="btn btn-primary">查找所有li节点</button></div>
            <div><button id="btn03" class="btn btn-primary">查找name=gender的所有节点</button></div>
            <div><button id="btn04" class="btn btn-primary">查找#city下所有li节点</button></div>
            <div><button id="btn05" class="btn btn-primary">返回#city下所有子节点</button></div>
            <div><button id="btn06" class="btn btn-primary">返回#phone的第一个子节点</button></div>
            <div><button id="btn07" class="btn btn-primary">返回#bj的父节点</button></div>
            <div><button id="btn08" class="btn btn-primary">返回#an的前一个兄弟节点</button></div>
            <div><button id="btn09" class="btn btn-primary">返回#username的属性值</button></div>
            <div><button id="btn10" class="btn btn-primary">设置#username的属性值</button></div>
            <div><button id="btn11" class="btn btn-primary">返回#bj的父节点的文本值</button></div>
        </div>
    </div>
</div>

</body>
</html>