对于JavaScript的重新学习及期间遇到的问题

其他 2020-01-21 12:15:18 阅读次数: 0

由于本身对于JavaScript的学习间断性，学的很不扎实，加上JavaScript对于今后学习的重要性，并且再加上本次又遇到期末复习，所以打算比较系统的重新学习一下JavaScript。下面就是通过3个简单的案例对于这几天已学习到的JS部分知识的练习

1. 动态表单（Node的添加删除，属性的动态添加）

在这里插入图片描述
表格基本框架的和构建：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表单</title>

    <style>
        .div01 {
            /*border: 1px solid red;*/
            width: 600px;
            height: 200px;
            margin: auto;
            text-align: center;
        }

        tr {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="div01">
    <input type="text" placeholder="请输入编号" id="id">
    <input type="text" placeholder="请输入姓名" id="name">
    <input type="text" placeholder="请输入性别" id="sex">
    <input type="button" value="确定" id="button">
    <p>
    <table border="1" width="600px" id="table">
        <tr>
            <td>编号 </td>
            <td>姓名</td>
            <td>性别</td>
            <td>删除组件</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Caiden_Micheal</td>
            <td>男</td>
            <td><a href="javascript:void 0" onclick="del(this)">删除</a></td>
        </tr>
    </table>
    </p>
</div>
</body>
</html>

实现方法一

<script>
    var buttonp = document.getElementById("button");
    buttonp.onclick = function () {
        var ID = document.getElementById("id").value;
        // alert(ID);
        var name = document.getElementById("name").value;
        var sex = document.getElementById("sex").value;

        document.getElementById("table").innerHTML +=
            "<tr>" + "<td>" + ID + "</td>" +
            "<td>" + name + "</td>" +
            "<td>" + sex + "</td>" +
            "<td> <a href=\"javascript:void 0\" οnclick=\"del(this)\">删除</a> </td>" + "</tr>";
    }

    function del(o) {
        var noded = o.parentNode.parentNode;
        var table = o.parentNode.parentNode.parentNode;
        table.removeChild(noded);
    }
</script>

实现方法二：

<script>
    var buttonp = document.getElementById("button");
    buttonp.onclick = function () {
        var IDp = document.getElementById("id").value;
        var ID = document.createTextNode(IDp);

        // alert(ID);
        var namep = document.getElementById("name").value;
        var name = document.createTextNode(namep);
        var sexp = document.getElementById("sex").value;
        var sex = document.createTextNode(sexp);

        //获取table节点
        var table = document.getElementById("tr").parentNode;

        //创建节点并添加子节点内容
        var td01 = document.createElement("td");
        td01.appendChild(ID);
        var td02 = document.createElement("td");
        td02.appendChild(name);
        var td03 = document.createElement("td");
        td03.appendChild(sex);
        var tr = document.createElement("tr");

        tr.appendChild(td01);
        tr.appendChild(td02);
        tr.appendChild(td03);
        // <a href="javascript:void 0" οnclick="del(this)">删除</a>
        var td04 = document.createElement("td");
        var a = document.createElement("a");
        a.setAttribute("href", "javascript:void 0");
        // a.onclick = del(this);
        a.setAttribute("onclick","del(this)");
        var text = document.createTextNode("删除");
        a.appendChild(text);
        td04.appendChild(a);
        tr.appendChild(td04);
        table.appendChild(tr);
        // alert()

    }

    function del(o) {
        var noded = o.parentNode.parentNode;
        var table = o.parentNode.parentNode.parentNode;
        table.removeChild(noded);
    }

2.动态表单（全部选择 / 全部不选 / 反选）

在这里插入图片描述
表格的基本构建和上面案例相同：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表单</title>

    <style>
        .div01 {
            /*border: 1px solid red;*/
            width: 600px;
            height: 200px;
            margin: auto;
            text-align: center;
        }

        tr {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="div01">
    <input type="text" placeholder="请输入编号" id="id">
    <input type="text" placeholder="请输入姓名" id="name">
    <input type="text" placeholder="请输入性别" id="sex">
    <input type="button" value="确定" id="button">
    <p>
    <table border="1" width="600px" id="table">
        <tr>
            <th><input type="checkbox" id="checkbo"></th>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>删除组件</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="checkbox"></td>
            <td>1</td>
            <td>OB</td>
            <td>男</td>
            <td><a href="javascript:void 0" onclick="del(this)">删除</a></td>
        </tr>
    </table>
    </p>
    <p>
        <input type="button" value="All Select" id="all">
        <input type="button" value="All not Select" id="notall">
        <input type="button" value="Reverse Select" id="reverse">
    </p>
</div>

<script>
    var buttonp = document.getElementById("button");
    buttonp.onclick = function () {
        var ID = document.getElementById("id").value;
        // alert(ID);
        var name = document.getElementById("name").value;
        var sex = document.getElementById("sex").value;

        document.getElementById("table").innerHTML +=
            //<input type="checkbox" name="checkbox">
            "<tr>" + "<td><input type=\"checkbox\" name=\"checkbox\"></td>" +
            "<td>" + ID + "</td>" +
            "<td>" + name + "</td>" +
            "<td>" + sex + "</td>" +
            "<td> <a href=\"javascript:void 0\" οnclick=\"del(this)\">删除</a> </td>" + "</tr>";
    }

    function del(o) {
        var noded = o.parentNode.parentNode;
        var table = o.parentNode.parentNode.parentNode;
        table.removeChild(noded);
    }
</script>

下面就是关于全部选择，全部不选择，以及全部反选的实现：基本代码实现：

  window.onload = function () {
        var all = document.getElementById("all");
        var checkbokes = document.getElementsByName("checkbox");

        all.onclick = function () { //全部选择
            for (var i = 0; i <=checkbokes.length-1;i++){
                checkbokes[i].checked = true;
            }
        }

        var notall = document.getElementById("notall");
        notall.onclick = function () { //全部不选择
            for (var i = 0; i <=checkbokes.length-1;i++){
                checkbokes[i].checked = false;
            }
        }

        var reverse = document.getElementById("reverse");
        reverse.onclick = function () { //全部反选
            for (var i = 0; i <=checkbokes.length-1;i++){
                checkbokes[i].checked  = !checkbokes[i].checked;
            }
        }

        document.getElementById("checkbo").onclick = function () {
            // alert(777);
            for (var i = 0; i <=checkbokes.length-1;i++){ //点击最上面的单选框全选
                // alert(999);
                checkbokes[i].checked = this.checked;
            }
        }
    }

在这里，出现了一个让我想不明白的问题，就是在实现单击顶部单选框的时候实现其他单选框与最顶部单选框的 “checked” 属性保持一致的问题。
下面描述一下问题发现的具体过程：
当我在做 “实现通过单击顶部单选框使得其他单选框和其保持‘checked’属性保持一致”这个的时候，我发现，无论我通过什么办法，此单击事件只能维持原有表单中 tr 单元格的全部选中与全部非选中，然而 对于新动态添加的 tr 单元格中的 单选框 缺没有任何响应。
开始我以为是因为我在动态添加表格数据的时候没有给新添加的单元格赋值 name属性或者name属性赋值的名字与JavaScript中的名字不一样导致，但是，事实证明我的第一个想法错误。
然后，我把目光转向了与其功能基本相同的 “Select All” 按钮上，依照我的看法，这个按钮与顶部单选框触发的事件属于 “比照葫芦画葫芦” 的操作，然后进行验证，此次信心满满，可是，和我想象的完全不一样，几乎相同的验证代码，在“Select All” 按钮上可以实现全选，但对于 顶部的单选框却还是原有的那种情况。然后我开始想着，这两者的区别，一个是按钮，然而另外一个是单选框，然后再一次尝试，事实证明，错误。那就只剩下一种情况了，就是一个在表格外面，一个在表格里面的区别，可是，我该不能为了这样一个功能把所有的单选框另外拿到表格之外吧。所以，我又开始寻找其他原因。
此时，我开始验证点击事件是否发生这个情况上，事实证明，它发生了，并且只发生了一次，还是在未动态添加 tr 单元格的时候，就那么一次。我一头雾水，这踏马什么情况呢，然后尝试着做了非常多的验证，最终，仍未找出结果。
此次遇到的问题，可能与我知识的欠缺有关系，但对于现阶段的我，未有能力达到，我相信随着知识量的储备，在不久的一天，它会被我解开，就像是之前用 Python写web服务器出现的 源码暴露的情况一样，随着我知识量的增加，终会解决。

3.表单验证在这里插入图片描述

表单验证实现的功能有：

  1. 用户在表单中输入信息后，鼠标聚焦离开输入框之后进行信息的校验，正确则显示对号图片，错误则提示错误输入
  2. 只有全部信息正确才提交表单，否则不提交表单

1.表单框架的构建：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>

    <style>

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            background: url("../img/register_bg.png") no-repeat center;
        }

        #div00 {
            background: white;
            border: 8px solid #EEEEEE;
            width: 900px;
            height: 500px;
            margin: auto;
            margin-top: 30px;
        }

        #div01 {
            width: 150px;
            margin: 20px;
            float: left;
        }

        #div02 {
            width: 150px;
            margin: 20px;
            float: right;
        }

        #div03 {
            margin: 20px;
            float: left;
        }

        #s01 {
            color: #FFD026;
            font-size: 20px;
        }

        #s02 {
            color: #A6A6A6;
            font-size: 20px;
        }

        #s03 {
            font-size: 15px;
            text-align: center;
        }

        #div02 > a {
            color: pink;
        }

        #u_span,#s_span,#e_span,#n_span,#t_span,#c_span {
            color: red;
        }

        .td_left {
            width: 80px;
            text-align: right;
            height: 45px;
        }

        .td_right {
            padding-left: 10px;
        }

        #username, #password, #email, #name, #tel, #birthday, #checkcode {
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6;
            /*设置边框圆角*/
            border-radius: 5px;
            padding-left: 10px;
        }

        #checkcode {
            width: 110px;
        }

        #img_check {
            height: 32px;
            vertical-align: middle;
        }

        #td_sub {
            padding-left: 150px;
        }

        #btn_sub {
            width: 150px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026;
        }

    </style>
</head>
<body>
<div id="div00">
    <div id="div01">
        <span id="s01">新用户注册</span><br>
        <span id="s02">USER REGISTER</span>
    </div>

    <div id="div02">
        <span id="s03">已有帐号?</span>
        <a href="javascript:void 0">立即登录</a>
    </div>

    <div id="div03">
        <form method="get" id="form">
            <table>
                <tr>
                    <td class="td_left"><label for="username">用户名</label></td>
                    <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名(6-12位)">
                    </td>
                    <td>
                        <span id="u_span"></span>
                    </td>
                </tr>
                <tr>
                    <td class="td_left"><label for="password">密码</label></td>
                    <td class="td_right"><input type="password" name="password" id="password"
                                                placeholder="请输入密码(6-12位)"></td>
                    <td>
                        <span id="s_span"></span>
                    </td>
                </tr>
                <tr>
                    <td class="td_left"><label for="email">Email</label></td>
                    <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱地址(?@?.com)">
                    </td>
                    <td>
                        <span id="e_span"></span>
                    </td>
                </tr>
                <tr>
                    <td class="td_left"><label for="name">姓名</label></td>
                    <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入您真实的名字"></td>
                    <td>
                        <span id="n_span"></span>
                    </td>
                </tr>
                <tr>
                    <td class="td_left"><label for="tel">手机号</label></td>
                    <td class="td_right"><input type="tel" name="tel" id="tel" placeholder="请输入手机号(11-14位)"></td>
                    <td>
                        <span id="t_span"></span>
                    </td>
                </tr>
                <tr>
                    <td class="td_left">性别</td>
                    <td class="td_right">
                        <input type="radio" name="radio" value="male">男
                        <input type="radio" name="radio" value="female">女
                    </td>
                    <td>
                        <span id="_span"></span>
                    </td>
                </tr>
                <tr>
                    <td class="td_left"><label for="birthday">出生日期</label></td>
                    <td class="td_right"><input type="date" name="birthday" id="birthday"></td>
                    <td>
                        <span id="b_span"></span>
                    </td>
                </tr>
                <tr>
                    <td class="td_left"><label for="checkcode">验证码</label></td>
                    <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码"> <img
                            id="img_check"
                            src="../img/verify_code.jpg">
                    </td>
                    <td>
                        <span id="c_span"></span>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册"></td>
                </tr>
            </table>
        </form>
    </div>
</div>
</body>
</html>

JavaScript实现表单的验证：

<script>
    var flag;
    window.onload = function () {
        document.getElementById("form").onsubmit = function () {
            //验证用户名的函数
            //验证密码的函数
            //验证邮箱的函数
            //验证姓名的函数
            //验证手机号的函数
            //验证 验证码的函数
            return brl_username() && brl_password() && brl_email() && brl_name() && brl_tel() && brl_check();
        }
        brl_username();
        brl_password();
        brl_email();
        brl_name();
        brl_tel();
        brl_check();
    }

    function brl_username() {
        var username = document.getElementById("username");
        username.onblur = function () {
            var u_span = document.getElementById("u_span");
            flag = /^\w{6,12}$/.test(username.value);
            if (flag) {
                u_span.innerHTML = "<img src='../img/gou.png' width='35' height='25'>";
            } else {
                u_span.innerHTML = "输入格式错误";
            }
        }
        return flag;
    }

    function brl_password() {
        var password = document.getElementById("password");
        password.onblur = function () {
            var s_span = document.getElementById("s_span");
            flag = /^\w{6,12}$/.test(password.value);
            if (flag) {
                s_span.innerHTML = "<img src='../img/gou.png' width='35' height='25'>";
            } else {
                s_span.innerHTML = "输入格式错误";
            }
        }
        return flag;
    }

    function brl_email() {
        var email = document.getElementById("email");
        email.onblur = function () {
            var e_span = document.getElementById("e_span");
            flag = /^\w*@\w*\.com$/.test(email.value);
            if (flag) {
                e_span.innerHTML = "<img src='../img/gou.png' width='35' height='25'>";
            } else {
                e_span.innerHTML = "输入格式错误";
            }
        }
        return flag;
    }

    function brl_name() {
        var name = document.getElementById("name");
        name.onblur = function () {
            var n_span = document.getElementById("n_span");
            flag = /^\W*$/.test(name.value);
            if (flag) {
                n_span.innerHTML = "<img src='../img/gou.png' width='35' height='25'>";
            } else {
                n_span.innerHTML = "输入格式错误";
            }
        }
        return flag;
    }

    function brl_tel() {
        var tel = document.getElementById("tel");
        tel.onblur = function () {
            var t_span = document.getElementById("t_span");
            flag = /^\d{11,14}$/.test(tel.value);
            if (flag) {
                t_span.innerHTML = "<img src='../img/gou.png' width='35' height='25'>";
            } else {
                t_span.innerHTML = "输入格式错误";
            }
        }
        return flag;
    }

    function brl_check() {
        var checkcode = document.getElementById("checkcode");
        checkcode.onblur = function () {
            var c_span = document.getElementById("c_span");
            flag = /^jgmj$/.test(checkcode.value);
            if (flag) {
                c_span.innerHTML = "<img src='../img/gou.png' width='35' height='25'>";
            } else {
                c_span.innerHTML = "验证码输入错误";
            }
        }
        return flag;
    }
</script>
Caiden_Michael
发布了36 篇原创文章 · 获赞 75 · 访问量 5437
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_44449518/article/details/103746475
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022