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

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

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

表格基本框架的和构建：

动态表单

编号	姓名	性别	删除组件
1	Caiden_Micheal	男	删除

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 实现方法一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
实现方法二：

	编号	姓名	性别	删除组件
	1	OB	男	删除

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
下面就是关于全部选择，全部不选择，以及全部反选的实现：基本代码实现：

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;
        }
    }
}

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

3.表单验证
表单验证实现的功能有：

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

表单验证

新用户注册
USER REGISTER

    已有帐号?
    立即登录



    

        

            

                
用户名
                

                
                

                    
                
            
            

                
密码
                

                

                    
                
            
            

                
Email
                

                
                

                    
                
            
            

                
姓名
                

                

                    
                
            
            

                
手机号
                

                

                    
                
            
            

                
性别
                

                    男
                    女
                
                

                    
                
            
            

                
出生日期
                

                

                    
                
            
            

                
验证码
                
 
                
                

                    
                
            
            

                

            
        
    

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 JavaScript实现表单的验证：