Zephon Blog
0%

第七天

发表于 更新于 分类于
本文字数： 16k 阅读时长 ≈ 15 分钟

第七天

DOM

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>event-dom</title>
</head>

<body>
    <div id="box">
        <h2>JavaScript <span onclick="clickspan()">事件</span></h2>
    </div>
    <script>
        //DOM0 DOM2事件
        function clickspan() {
            alert("you have clicked span")
        }
        var h2 = document.getElementsByTagName("h2")[0];
        h2.onclick = function(e){
            e.stopPropagation();//停止冒泡，在dom0中无效
            alert("you have clicked h2!");
        }
        //需求1：点击span不响应父元素的事件，不冒泡
        //需求2：先响应父元素的事件，后响应子元素的事件，冒泡(默认的事件响应方式)->捕获(先响应你元素的事件)
    </script>
</body>

</html>

冒泡与捕获

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>event-dom</title>
</head>

<body>
    <div id="box">
        <h2>JavaScript <span>事件</span></h2>
    </div>
    <script>
        //定义DOM2事件
        //需求1：点击span不响应父元素的事件，不冒泡
        //需求2：先响应父元素的事件，后响应子元素的事件，冒泡(默认的事件响应方式)->捕获(先响应你元素的事件)
        var h2 = document.getElementsByTagName("h2")[0];
        var span = document.getElementsByTagName("span")[0];
        var box = document.getElementById("box");
        
        //不考虑ie 678(attachEvent)
        //true表示捕获，false就默认值，表示冒泡
        //DOM2事件中用click前面不用加on
        span.addEventListener('click',function(e){
            alert("span!");
            e.stopPropagation();//父元素的事件不会被响应，在Dom2事件中定义有效
        });
        h2.addEventListener('click',function(){
            alert("h2");
        },true);
        box.addEventListener('click',function(){
            alert("div");
        },true);

        // 常用事件
        // mouseover-鼠标悬浮
        // mouseout-鼠标移开
        // scroll-滚动
        // blur-失去焦点
        // focus-获取焦点
        // change-内容改变
        // load-网页加载完成
        // mousemove-鼠标移动
        // 手机事件：
        // touchstart-开始触屏
        // touchend-触屏结束
        // touchmove-触屏移动
    </script>
</body>

</html>

阻止默认行为

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>event-阻止默认+事件</title>
    <style>
        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .elist>li {
            width: 150px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #c00;
            margin: 10px;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <ul class="elist">
        <li><a href="http://baidu.com">百度</a></li>
        <li><a href="http://huanqiucom">环球</a></li>
        <li><a href="http://ltaaa.com">龙腾</a></li>
        <li><a href="http://sina.com.cn">新浪</a></li>
        <li><a href="http://baidu.com">百度</a></li>
        <li><a href="http://taobao.com">淘宝</a></li>
    </ul>

    <script>
        //需求1：阻止超链接，点击时不链接至网址，而是alert网址
        var elist = document.getElementsByClassName("elist")[0];
        var link = elist.getElementsByTagName("a");
        for(var i=0;i<link.length;i++){
            link[i].onclick = function(e){
                e.preventDefault();//阻止默认行为
                //alert(link[i].href);//无效，因为i是在定义过程中使用的，定义完成时并没有点击，点击时i已经加到了6，没有link[6]
                alert(this.href);
            }
        }
         //需求2：只定义一个事件，完成类似的功能，即点哪里，哪里响应
        //事件定义在父元素上，事件委托
        var elist = document.getElementsByClassName("elist")[0];
        elist.onclick = function (e) {
            //target是点击的子元素，nodeName是节点名称，LI必须大写
            if (e.target.nodeName == "LI") {
                if (e.target.className == "selected") {
                    //通过className可以一次更改多个css属性，并且使样式和行为相分离
                    e.target.className = "";
                } else {
                    e.target.className = "selected";
                }

            }
            // alert(e.taget.nodeName);
        }
    </script>
</body>
</html>

鼠标移动事件

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>event</title>
    <style>
        .box {
            width: 800px;
            height: 400px;
            margin: 20px;
            background-color: blue;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="all">
    <div class="box">

    </div>
    <div class="box">

    </div>
    <div class="box">

    </div>
    </div>
    <script>
        // 需求：鼠标在左边背景为蓝色，鼠标在右边，背景为绿色
        var box = document.getElementsByClassName("box");
        var w = box[0].offsetWidth; //获得宽，包括padding和border
        // box[0].onmousemove = function (e) {
        //     if (e.offsetX > w / 2) {
        //         box[0].style.backgroundColor = "green";
        //     } else {
        //         box[0].style.backgroundColor = "blue";
        //     }
        //     box[0].innerHTML = e.offsetX + "," + e.offsetY + " " + e.clientX + "," + e.clientY + " " + e.pageX +
        //         "," + e.pageY;
        // }

        //作业：需求：可以满足多个盒子支持上述行为
        var all = document.getElementsByClassName("all")[0];
        all.onmousemove = function(e){
            if(e.target.nodeName=="DIV"){
                if (e.offsetX > w / 2) {
                e.target.style.backgroundColor = "green";
            } else {
                e.target.style.backgroundColor = "blue";
            } 
            }
        }
    </script>
</body>
</html>

表单基本校验

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>form基本效验</title>
    <style>
        form,
        ul {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        #form li {
            overflow: auto;
        }

        #form li label {
            float: left;
            line-height: 30px;
            text-align: right;
            padding-right: 10px;
            width: 200px;
        }

        .input {
            width: 150px;
            height: 20px;
            margin-top: 4px;
            float: left;
        }

        .error {
            width: 200px;
            float: left;
            padding-left: 10px;
            font-size: 12px;
            font-weight: bold;
            color: #f00;
            line-height: 30px;
            display: none;
        }

        #form li:nth-child(4) {
            padding-left: 140px;
        }
    </style>
</head>

<body>
    <form action="" id="form" name="form" method="POST" onsubmit="return checkForm()">
        <ul>
            <li>
                <label for="user">用户名：</label><!-- 当被点击时，for的标签获得焦点 -->
                <input type="text" name="user" id="user" class="input">
                <span class="error">用户名输入错误!</span>
            </li>
            <li>

                <label for="pwd">密码：</label>
                <input type="password" name="pwd" id="pwd" class="input">
                <span class="error">密码输入错误！</span>
            </li>
            <li>

                <label for="pwdAgain">重复密码：</label>
                <input type="password" name="pwdAgain" id="pwdAgain" class="input">
                <span class="error">重复密码输入错误！</span>
            </li>
            <li>
                <input type="submit" value="提交">
            </li>
        </ul>
    </form>
    <script>
        // 需求：
        // 1）点击提交按钮能够校验出所有错误
        // 2）边输入边校验
        // 3）美观的错误提示方式，不使用alert提示错误
        // 4）美观的表单
        var user = document.getElementsByName("user")[0];
        var pwd = document.form.pwd;

        var pwdAgain = document.form.pwdAgain;
        var span = document.getElementById("form").getElementsByClassName("error");

        user.onchange = checkUser; //onchange:控件失去焦点并且内容有改变时触发，onblur失去焦点就触发
        pwd.onchange = checkPwd; //写函数名称，而不是写函数的执行如checkPwd()

        pwdAgain.onchange = checkPwdAgain;

        function checkUser() {
            if (user.value.length < 6 || user.value.length > 12) {
                span[0].style.display = "block";
                return 0;
            } else {
                span[0].style.display = "none";
                return 1;
            }
        }

        function checkPwd() {
            if (pwd.value.length < 6 || pwd.value.length > 12) {
                span[1].style.display = "block";
                return 0;
            } else {
                span[1].style.display = "none";
                return 1;
            }
        }

        function checkPwdAgain() {
            if (pwd.value == pwdAgain.value) {
                span[2].style.display = "none";
                return 1;
            } else {
                span[2].style.display = "block";
                return 0;
            }
        }
        //扩展：增加一行，重复密码，规则：密码和重复密码必须相同
        function checkForm() {
            var rs = checkPwd() * checkUser() * checkPwdAgain();
            if (rs) {
                return true;
            } else {
                return false;
            }
        }
    </script>
</body>

</html>

DOM操作

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM</title>
    <style>
        #dom li{
            list-style: none;
            width: 160px;
            height: 160px;
            border: 1px solid #039;
            float: left;
            margin: 10px;
            text-align: center;
            line-height: 160px;
        }
        #dom h2{
            height: 40px;
            line-height: 40px;
            color: #fff;
            background-color: #039;
        }
    </style>
</head>

<body>
    <div id="dom">
        <button>修改h2的HTML和CSS</button>
        <button>在h2中显示h2的nodeName和nodeType</button>
        <button>增加一个新的li</button>
        <button>删除最后一个li</button>
        <button>修改第三个li的下一个兄弟元素</button>
        <button>克隆ul</button>
        <button>使所有li双击可删除</button>
        <button></button>
        <h2></h2>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </div>
    <script>
        //querySelector：找到第一个指定的选择器,支持css3中的选择语法，如：#dom>h2
        var dom = document.querySelector("#dom");
        var btn = dom.querySelectorAll("button");//返回类数组
        var h2 = dom.querySelector("h2");
        var ul = dom.querySelector("ul");
        var li = dom.querySelectorAll("li");
        
        btn[0].onclick = function(){
            h2.innerText = "您点击了第一个按钮";//能用innerText的尽量用innerText
            h2.style.backgroundColor = "#c00";
            // h2.className = "" //一次修改多个css,推荐使用
            // h2.style.cssText="backgroundColor:#c00";
        }
        btn[1].onclick = function(){
            //nodeType:1->元素节点 2->文本节点 3->属性节点
            h2.innerText = h2.nodeName+" "+h2.nodeType+" "+h2.nodeValue;
        }
        btn[2].onclick = function(){
            var l = document.createElement("li");
            l.innerText=ul.querySelectorAll("li").length+1;
            ul.appendChild(l);
            //ul.insertBefore(l,li[0]);//在li[0]前面添加l
        }
        btn[3].onclick = function(){
            var del = ul.querySelector("li:last-child");
            ul.removeChild(del);//一定要通过父元素删除
            // del.parentNode.removeChild(del);
        }
        btn[4].onclick = function(){
            var newli = ul.querySelectorAll("li");
            // var newli = ul.childNodes;//包括文本节点
            // var newli = ul.children;//子元素不包括文本节点
            console.log(newli);
            //尽量使用ElementSibling，这种写法不考虑文本节点，nextSibling的写法在非ie浏览器下是考虑文本节点的
            // newli[3].nextSibling.innerText = "兄弟元素";//nextSibling是li与li之间的回车换行
            newli[3].nextElementSibling.innerText = "下一个兄弟元素";
            // newli[3].previousElementSibling.innerText = "上一个兄弟";
        }
        btn[5].onclick = function(){
            dom.appendChild(ul.cloneNode(true));//true->连事件一起克隆
        }

        btn[6].onclick =function(){
            var arr = dom.querySelectorAll("li")
            for(var i=0;i<arr.length;i++){
                arr[i].ondblclick = function(){
                    this.parentNode.removeChild(this);//循环定义事件的函数内部不能使用i
                }
            }
        }
        //扩展：新增加的li双击也可以删除，不需要两点btn[6]
        //在其它后面加btn[6].click();
    </script>
</body>

</html>

Tab选项卡

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tab</title>
    <style>
        .tab{
            width: 700px;
        }
        .ttitle{
            height: 33px;
            border-bottom: 1px solid #c00;
        }
        .ttitle span{
            text-align: center;
            line-height: 33px;
            font-size: 14px;
            float: left;
            margin-right: 10px;
            width: 150px;
        }
        .ttitle .cur{
            border-left: 1px solid #c00;
            border-right: 1px solid #c00;
            border-top: 1px solid #c00;
            background-color: #fff;
            color: #c00;

            margin-bottom: -1px;
            height: 34px;
        }
        .tcontent{
            font-size: 30px;
            padding: 20px;
            display: none;
        }
        .ttitle+div{
            display: block;
        }
    </style>
</head>
<body>
    <div class="tab">
        <div class="ttitle">
            <span class="cur">图片</span>
            <span>专栏</span>
            <span>热点</span>
        </div>
        <div class="tcontent">1</div>
        <div class="tcontent">2</div>
        <div class="tcontent">3</div>
    </div>

    <script>
        var tab = document.querySelector(".tab");
        var span = tab.querySelectorAll(".ttitle>span");
        var tc = tab.querySelectorAll(".tcontent");
        for(var i=0;i<span.length;i++){
            span[i].index = i;
            span[i].onmouseover = function(){
                for(var j=0;j<span.length;j++){
                    span[j].className="";
                    tc[j].style.display="none";
                }
                this.className = "cur";
                tc[this.index].style.display="block";
            }
        }
    </script>
</body>
</html>

手风琴

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>accordion手风琴</title>
    <style>
        dl,
        dd,
        dt {
            margin: 0;
            padding: 0;
        }

        .acd {
            width: 200px;
            border: 1px solid #039;
            margin: 20px;
        }

        .acd dt {
            height: 32px;
            line-height: 32px;
            text-align: center;
            background-color: #039;
            color: #fff;
            font-size: 14px;
            margin-bottom: 2px;
        }

        .acd .cur {
            background: linear-gradient(#000, #039);
            font-weight: bold;
            font-size: 16px;
        }

        .acd dd {
            height: 100px;
            display: none;
        }

        .acd dd:nth-of-type(1) {
            display: block;
        }
    </style>
</head>

<body>
    <!-- 扩展：使一个网页中有多个tab选项卡或多个手风琴 -->
    <dl class="acd">
        <dt class="cur">标题</dt>
        <dd></dd>
        <dt>标题</dt>
        <dd></dd>
        <dt>标题</dt>
        <dd></dd>
        <dt>标题</dt>
        <dd></dd>
        <dt>标题</dt>
        <dd></dd>
    </dl>

    <dl class="acd">
        <dt class="cur">标题</dt>
        <dd></dd>
        <dt>标题</dt>
        <dd></dd>
        <dt>标题</dt>
        <dd></dd>
        <dt>标题</dt>
        <dd></dd>
        <dt>标题</dt>
        <dd></dd>
    </dl>
    <script>
        var a = document.querySelectorAll(".acd");

        for(var i=0;i<a.length;i++){
            accordion(a[i]);
        }
        //用封装解决
        function accordion(acd) {
            var dt = acd.querySelectorAll("dt");

            for (var i = 0; i < dt.length; i++) {
                dt[i].onmouseover = function () {
                    for (var j = 0; j < dt.length; j++) {
                        dt[j].className = "";
                        dt[j].nextElementSibling.style.display = "none";
                    }
                    this.className = "cur";
                    this.nextElementSibling.style.display = "block";
                }
            }
        }
    </script>
</body>
</html>