黑马2023JavaScript笔记1_通过dom操作，完成如下效果实现，点亮灯泡，将所有的div标签的标签体内容后面加上：very goo

作者：木道寻08 | 2024-07-10 05:51:58

踩

通过dom操作，完成如下效果实现，点亮灯泡，将所有的div标签的标签体内容后面加上：very good 3.使所有的复选框呈现被选中状态

一、js知识点

<!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>Document</title>
    <script>
        //js自定义对象
        var user = {
            name:"Tom",
            sex:"male"
        };
        console.log(user.name);


        //json字符串
        var json = '{"name":"XiaoMing","sex":"female"}';
        // 将json字符串转换为json对象
        var jsonobj = JSON.parse(json);
        console.log(jsonobj.name);//XiaoMing
        //将json对象转换为字符串
        alert(JSON.stringify(jsonobj));


        // js数组
        var arr = [1,2,3,4];
        //普通js函数
        arr.forEach(function(e){
            console.log(e);})
        console.log("------------------------");
        //es6中函数
        arr.forEach((e) => {console.log(e)});
        // 两个种函数表达方式效果都是一样的
        

        //在BOM对象中，我们只需要了解window和location两个对象就够了！！！
        // BOM中的两个对象：window和location
        // 一、window对象的方法：
        // 1、confirm
        var result = confirm("你确定吗？");
        alert(result);//点了确定返回true，取消返回false
        // 2、setInterval()。输出执行了多少次。
        let i = 0;
        window.setInterval(function(){
            i++;
            console.log(i+"次");
        },1000);
        // 3、setTimeout()，隔多长时间，执行一次函数（只执行一次）
        var myfun1 = function(){alert("(*´▽｀)ノノ");};
        window.setTimeout(myfun1,5000);

        // 二、location对象
        // 只需要知道location对象的href属性！！！！
        alert(location.href);/* 返回整个url地址 */
        location.href = "https://www.itcast.cn";//自动跳转到改地址

    </script>
</head>
<body>
    <label><input type="radio" name="x">小明</label>
    <label><input type="radio" name="x">huahua</label>
</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

二、js综合案例

<!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>综合案例</title>
    <style>
        #center{
            max-width: 1000px;
            width: 60%;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
    <script>
        window.onload = function(){
            var lamps = document.getElementById("lamp");
            var opens = document.getElementById("open");
            var closes = document.getElementById("close");
            var text = document.getElementById("textcontent");
            var chooseall = document.getElementById("chooseAll");
            var chooseno = document.getElementById("chooseNo");

            opens.onclick = function(){
                lamps.src = 'on.gif';
            }
            closes.onclick = function(){
                lamps.src = 'off.gif';
            }
            // 将字符串转换为小写
            text.onfocus = function(){
                //text.value可读可写，可返回值
                let str = text.value;
                text.value = str.toLowerCase();
            }
            // 将字符串转换为大写
            text.onblur = function(){
                let str = text.value;
                text.value = str.toUpperCase();
            }
            // 全选
            chooseall.onclick = function () {
                var myhobby = document.getElementsByName("hobby");
                for (let i = 0; i < myhobby.length; i++) {
                    myhobby[i].checked = true;
                }
            }
            // 全不选
            chooseno.onclick = function () {
                var myhobby = document.getElementsByName("hobby");
                for (let i = 0; i < myhobby.length; i++) {
                    myhobby[i].checked = false;
                }
            }
        }
    </script>
</head>
<body>
    <!-- 
        通过事件监听及DOM操作，完成如下效果实现。
        1、点击“点亮”按钮点亮灯泡，点击“熄灭”按钮 熄灭灯泡。
        2、输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写
        3、点击“全选”按钮，使所有的复选框呈现被选中的状态，点击“反选”按钮使按钮所有的复选框呈现取消勾选的状态。
    -->
    <div id="center">
        <img src="off.gif" id="lamp"><br/>
        <input type="button" value="点亮灯泡" id="open">
        <input type="button" value="熄灭灯泡" id="close">
        <br/>
        <input type="text" id="textcontent" value="Hello">
        <br/>
        <input type="checkbox" name="hobby">C
        <input type="checkbox" name="hobby">C++
        <input type="checkbox" name="hobby">JAVA
        <br/>
        <input type="button" value="全选" id="chooseAll">
        <input type="button" value="全不选" id="chooseNo">
    </div>
    
</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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/木道寻08/article/detail/805018