JavaScript初探二

//----------总结01.查找dom元素 document.getElementById();//通过id获取一个dom元素
document.getElementsByClassName();//通过class获取dom数组
document.getElementsByTagName();//通过标签名获取dom数组

//02.修改dom元素 dom.type = "text"//type属性
dom.innerHTML//双标签的文本值 这里注意innerText
dom.value//修改单标签的文本值,比如input
document.getElementById().style.height//注意样式需要通过style点出来,高度,宽度需要添加单位

 

1.删除dom元素

dom元素.parentNode.removeChild(dom元素)//dom元素不能自己删除自己,必须通过父元素删除自己
//删除的dom元素还在内存中,只是将他从dom树里面删除了

//04.创建dom元素 document.createElement("input");//在js中所有dom元素的创建都是通过这种方式,传入不同的标签名,返回不同的元素
dom元素.appendChild(newNode)//创建好的dom元素必须将他添加到dom树里面去才能看的到


//05.克隆dom元素
dom元素.cloneNode(true);//所有的dom元素都有这个方法,传入false 只克隆元素本身,传入 true 子元素一起克隆


//06.a标签引入js代码
<a href="javascript:这里写js代码">测试用</a>//在javascript:之后写js代码


//07.select标签的特殊
//01.通过设置select.value 可以修改被选中的option.但是设置的value值,必须有相应的option标签存在,否则没效果
//02.修改了选中的option标签会触发select标签的 onchange事件


//08.第二种绑定0级dom事件的方式
<input type='button' onclick='这里写的是js代码'>//注意这样绑定的方法体内部的this


//09.快速获取父节点

dom元素.parentNode


//10.注意
写js的时候可能没有提示,大胆的写上去把!!!!!

 

?
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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">
        //01.变量定义
        //var fox = 123;
        //alert(fox);
        //fox = "小狐狸";
 
        //02.对象的写法
        //对象的直面两标识发里面 属性名 可以加"" 也可以不加
        //加了双引号:叫做 json格式
        //不加双引号:js的字面量表示法
        //var fox = new Object();
        //fox = {
        //    "name":"小二黑",age:18
        //}
 
        ////03.数组,长度可变,object
        //var foxArr = new Array();
        //foxArr = [1, 2, 3, 4, { "name": "fox", "age": 19 }];
        //foxArr[foxArr.length]//数组新增一位
 
        ////04.判断语句
        ////string 对象 数组 数字(除0) true
        ////false 0 NaN null undefined
        //function sayhi() { }
        //if (sayhi) {
 
        //}
        ////05选择 break 可以不写 会向下执行
        //switch (switch_on) {
        //    default:
 
        //}
        //06循环语句
        //while (true) {
 
        //}
        //do {
 
        //} while (true);
        //for (var i in o) {
        //    o[i]
        //}
        //for (var i = 0; i < length; i++) {
 
        //}
        //07方法
        //new Function 里面的方法体如果只有一行 不需要分号,如果多行 必须用分号隔开
        //function sayHi(name, age) {
        //    return new Function("alert(123)");
        //}
        //var returnFunc = sayHi();
        //returnFunc();
 
        ////08. dom(文档对象模型) dom对象和dom树
        ////每一个标签都是一个dom对象,浏览器解析完毕所有html标签以后 生成dom树
        //document.getElementById(); //通过id 获取单个
        //document.getElementsByClassName();//通过class 获取多个
        //document.getElementsByTagName();//通过标签名 获取多个
 
        ////09bom 浏览器对象模型 可以理解为是一个类
        ////window对象可以理解为 是bom类new出来的对象
        ////在页面中定义的所有全局变量,都是window的属性
        //// window
        //var haha = "123";
 
        ////方法体里面的this 看调用这个方法的时候 这个方法由谁点出来
        //function sayHi() {
        //    alert(this);
        //}
        //---------------分割线问题解答
        //01function(直接创建的时候使用) Function(new 方法对象的时候使用)
        //除了写法不同,其他都一样,都是创建了一个方法对象
 
        //function sayHello() { }
        //new Function();
 
        //02
        //var people = sayHello();//执行sayHello方法 将方法的返回值赋给people
        //var smallPeople = sayHello;//直接将方法的引用地址给smallPeople
 
 
 
    </script>
</head>
 
<body>
    <input type="button" id="btnTest" />
</body>
</html>
<script type="text/javascript">
    //03匿名函数
    //匿名函数 就是定义的时候不需要写名字的函数,但是他也会在内存中创建一个方法对象
    //document.getElementById("btnTest").onclick = function () { alert("123"); }
    //function sayHi() {
    //    alert("123");
    //}
 
    //document.getElementById("btnTest").onclick = sayHi;
 
    //变量必须定义在方法的下面------
    var haha = function () {
        alert("捏哈哈");
    }
    document.getElementById("btnTest").onclick = haha;
    //对于方法,浏览器做了优化,只有在调用这个方法的时候,才会去页面里面找
    //document.getElementById("btnTest").onclick = sayHello;
    //function sayHello() {
    //    alert("123");
    //}
</script>

　　

 

?
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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
     <input type="button" value="docment绑定" id="btnDoc"/>
    <input type="button" value="标签内绑定" id="btnSurprise" onclick="sayThis(this);"/>
</body>
</html>
<script type="text/javascript">
  
    //0级dom事件绑定方法1 直接通过onclick=xxx绑定的
    document.getElementById("btnDoc").onclick = function () {
        alert(this);
    }
    alert(document.getElementById("btnDoc").onclick);
    //02.直接写在标签里面的 事件属性 用=号赋值 =号后面写的是 js代码
    //直接写在标签内部的onclick属性 浏览器在解析的时候 会自动生成一个方法 将这段js代码包起来
    alert(document.getElementById("btnSurprise").onclick);
    //全局函数
    function sayThis(SomeObj) {
        alert(this+"||"+SomeObj)
    }
</script>

　　

 

?
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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        ol {
            list-style: none;
        }
 
        li {
            text-align: center;
            border: 1px solid #0094ff;
            width: 300px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <ol>
        <li>
            <label>NumA:</label><input type="text" id="numA"  /></li>
        <li>
            <label>NumB:</label><input type="text" id="numB" /></li>
        <li>
            <input type="button" value="+" onclick="doCom('+')" />
               <input type="button" value="-" onclick="doCom('-')" />
               <input type="button" value="*" onclick="doCom('*')" />
               <input type="button" value="/" onclick="doCom('/')" /></li>
        <li>
            <label>Result:</label><input type="text" id="Result" /></li>
    </ol>
</body>
</html>
<script type="text/javascript">
 
    function doCom(method) {
        var numA = document.getElementById("numA").value.trim();
        var numB = document.getElementById("numB").value.trim()
        switch (method) {
            case "+":
                if (checkNum(numA, numB)) {
                    //修改结果文本框里面的value字
                    document.getElementById("Result").value = Number(numA) + Number(numB);
                } else {
                    alert("请正确输入");
                }
                break;
            case "-":
                if (checkNum(numA, numB)) {
                    //修改结果文本框里面的value字
                    document.getElementById("Result").value = Number(numA) - Number(numB);
                } else {
                    alert("请正确输入");
                }
                break;
 
            case "*":
                if (checkNum(numA, numB)) {
                    //修改结果文本框里面的value字
                    document.getElementById("Result").value = Number(numA) * Number(numB);
                } else {
                    alert("请正确输入");
                }
                break;
 
            case "/":
                if (checkNum(numA, numB)) {
                    //修改结果文本框里面的value字
                    document.getElementById("Result").value = Number(numA) / Number(numB);
                } else {
                    alert("请正确输入");
                }
                break;
            default:
 
        }
    }
    //检查两个文本框里面的是否是数字
    function checkNum(numA, numB) {
 
        //判断是否不是一个数字
        if (window.isNaN(numA) == false && numB != "" && numA != "" && window.isNaN(numB) == false) {
            return true;
        } else {
            return false;
        }
    }
 
</script>

　　

 

?
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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        table {
            border: 1px solid #0094ff;
            border-collapse: collapse;
            width: 300px;
        }
 
        td {
            border: 1px solid #0094ff;
        }
 
        div {
            border: 1px solid #0094ff;
            width: 298px;
        }
    </style>
</head>
<body>
    <table id="tbList">
        <tbody id="tbListBody">
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>技能</td>
                <td>操作</td>
            </tr>
        </tbody>
    </table>
    <div>
        <input type="checkbox" id="chkAll" /><label for="chkAll" style="cursor: pointer">全选</label>
        <a href="javascript:void(0)" onclick="DoDelChecked()">删除选中</a>
    </div>
</body>
</html>
<script type="text/javascript">
    //01.table 浏览器在解析的时候,会自动生成一个tbody 然后把tr放到tbody里面去
    //如果在table已经生成完毕在 table.appendChild(tr)添加tr 那么就是加到 table下面
    var dataArr = [
        { "name": "柯震东", "skill": "吸毒" },
        { "name": "李代沫", "skill": "唱歌" },
        { "name": "张默", "skill": "像房祖名" },
        { "name": "房祖名", "skill": "像张默" },
        { "name": "郭美美", "skill": "吃毒大米" },
    ]
    //02.使用代码为table添加tr
    for (var i = 0; i < dataArr.length; i++) {
        //02.1创建一个tr
        var trCreate = document.createElement("tr");
        //02.2生成td分为两种
        //单元格00
        var td00 = document.createElement("td");
        td00.innerHTML = i + 1 + "<input type='checkbox'class='chkOne'>";
        trCreate.appendChild(td00);
        //单元格01
        var td01 = document.createElement("td");
        td01.innerHTML = dataArr[i].name;
        trCreate.appendChild(td01);
        //单元格02
        var td02 = document.createElement("td");
        td02.innerHTML = dataArr[i].skill;
        trCreate.appendChild(td02);
        //单元格03
        var td03 = document.createElement("td");
        td03.innerHTML = "<a href='javascript:void(0)' onclick='doDelTr(this)'>删除该行</a>";
        trCreate.appendChild(td03);
        //将tr添加到tbody里面
        //  document.getElementById("tbListBody").appendChild(trCreate);tbList
        document.getElementById("tbList").appendChild(trCreate);
    }
    //02.5checked这个属性有点特殊,直接写在标签里面,不给值 就是被选中; 给任何值也是被选中
    //如果使用js去修改checked属性 给true 就是选中 给false 就是不选中
    //document.getElementById("chkAll").checked = false;
 
    //03.为全选框设置点击事件
    document.getElementById("chkAll").onclick = function () {
        //alert(this.checked);
        //for循环 将所有的单选框的选中状态设置跟全选框一样就好
        var chkOneObjs = document.getElementsByClassName("chkOne");
        for (var i = 0; i < chkOneObjs.length; i++) {
            chkOneObjs[i].checked = this.checked;
        }
    }
 
    //-----------------分割线 方法
    //a标签的this  就是他的href属性
    function doDelTr(aObj) {
        if (confirm("你想好了?")) {
            //   alert(aObj);
            //根据a标签 获取他所在的tr
            //            a标签  td      tr
            var delTr = aObj.parentNode.parentNode;
           
            //通过tr的父节点 删除tr
            //tr    tr的父节点
            delTr.parentNode.removeChild(delTr);
        } else {
            alert("不要手贱啊");
        }
    }
 
    //删除选中的方法
    function DoDelChecked() {
        //获取所有的单选框
        var chkOneObjs = document.getElementsByClassName("chkOne");
        //循环 判断 单选框是否被选中
        for (var i = chkOneObjs.length-1; i >=0; i--) {
            if (chkOneObjs[i].checked==true) {
                //通过单选框 获取所在tr
                //                单选框    td         tr     
                var delTr = chkOneObjs[i].parentNode.parentNode;
                //通过tr获取父节点 调用父节点的删除方法
                delTr.parentNode.removeChild(delTr);
            }
        }
        //如果被选中 就删除
        //否则 不干事情
    }
 
 
 
</script>

　　图片文字切换

?
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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        div {
        border:1px solid #0094ff;
        margin:0 auto;
        }
        #divImg {
        width:300px;
        height:192px;
        }
        #divInfo {
        width:300px;
        height:30px;
        }
        li {
        float:left;
        border:1px solid #0094ff;
        height:15px;
        width:25px;
        text-align:center;
        line-height:15px;
      
        }
        ol {
        list-style:none;
           position:absolute;
           top:168px;
           left:595px;
            
        }
    </style>
</head>
<body>
    <div id="divImg">
        <ol>
            <li key="button1">1</li>
            <li key="button2">2</li>
            <li key="button3">3</li>
            <li key="button4">4</li>
        </ol>
    </div>
    <div id="divInfo"></div>
</body>
</html>
<script type="text/javascript">
    //图片信息数据存储
    var imgInfoArr = [
        { "key": "button1", "imgPath": "/img/1.jpg", "imgInfo": "两个小loli" },
        { "key": "button2", "imgPath": "/img/2.jpg", "imgInfo": "嫦娥本月" },
        { "key": "button3", "imgPath": "/img/3.jpg", "imgInfo": "美女与野兽" },
        { "key": "button4", "imgPath": "/img/4.jpg", "imgInfo": "学生装cosplay" }
    ];
    //为数据对象绑定方法--面向对象
    //循环判断传入的key 符合哪一个,返回符合的对象
    imgInfoArr.GetObjByKey = function (key) {
        for (var i = 0; i < this.length; i++) {
            if (this[i].key == key) {
                return this[i];
            }
        }
    }
    //---------------上面是准备数据下面是绑定方法
    //获取所有的li标签
    var liObjs = document.getElementsByTagName("li");
    //为li标签绑定点击事件--通过dom元素.getAttribute("属性名")可以获取自定义属性
    for (var i = 0; i < liObjs.length; i++) {
        liObjs[i].onclick = function () {
            //获取自定义属性 key
            var myKey = this.getAttribute("key");
            //通过key去获取对象
            var imgInfoObj = imgInfoArr.GetObjByKey(myKey);
            //将对象的属性设置给 图片div 还有文字div
            //修改背景图片
            document.getElementById("divImg").style.backgroundImage = "url(" + imgInfoObj.imgPath + ")";
            //修改文字
            document.getElementById("divInfo").innerHTML = imgInfoObj.imgInfo;
 
        }
    }
 
 
    ////根据key获取 对象的方法
    //function GetImgObj(key) {
    //    for (var i = 0; i < imgInfoArr.length; i++) {
    //        if (imgInfoArr[i].key == key)
    //        {
    //            return imgInfoArr[i];
    //        }
    //    }
    //}
    //var someObj=GetImgObj("button3");
    //alert(someObj.key+"|"+someObj.imgPath+"|"+someObj.imgInfo);
 
</script>

　　

 

?
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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        /*//渲染树*/
        #divBox {
            height: 100px;
            width: 100px;
            border: 1px solid #0094ff;
        }
    </style>
</head>
<body>
    <div id="divBox" ></div>
</body>
</html>
<script type="text/javascript">
    //绑定点击事件
    document.getElementById("divBox").onclick = function () {
        //01.获取dom元素标签内部的样式
        ////获取原有样式
        //var oldHeight = parseInt(this.style.height);
        ////累加
        //oldHeight += 10;
        ////设置回去
        //this.style.height = oldHeight + "px";
 
        //02.获取dom元素的样式--无论在内部 还是在 style标签中
        //通过这种方式拿到的样式 是只读的
        alert(window.getComputedStyle(this).height);
        this.style.height;
    }
 
</script>

　　

 

?
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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        ol {
        list-style:none;
        }
        li {
        border:1px solid #0023ff;
        height:20px;
        width:100px;
        }
    </style>
</head>
<body>
    <select id="selList">
        <option>鱼香肉丝</option>
        <option>水煮肉片</option>
        <option>鱼香茄子</option>
    </select>
   <ol>
       <li id="liEdit">水煮肉片</li>
   </ol>
    <input type="button" id="edit"  value="编辑"/>
      <input type="button" id="saveEdit"  value="保存修改"/>
</body>
</html>
<script type="text/javascript">
    //为按钮添加点击事件
    document.getElementById("edit").onclick = function () {
        //为li标签 追加一个 子节点 select标签
        //dom元素有一个clone方法  传的布尔值 表示 克隆的深浅,
        var selClone = document.getElementById("selList").cloneNode(true);
        //设置克隆的select标签的 option的选中状态
        //如果 option标签 没有添加value值,那么 option标签的 innerHTML就是他的value  可读可写
        //设置select标签的value值 为option标签有的 ,那么就相当于 选中了那个option标签
        selClone.value = document.getElementById("liEdit").innerHTML;
        //清空问本质
        document.getElementById("liEdit").innerHTML = "";
        //将克隆的select标签 追加到li标签里面
        document.getElementById("liEdit").appendChild(selClone);
        //修改克隆出来的select标签的id
        selClone.id = "editSel";
    }
 
    //为保存修改按钮添加点击事件
    //id虽然唯一,但是重复也不会报错
    //取值的时候 从上到下查找.找到了符合要求的一个 就不继续找了
    document.getElementById("saveEdit").onclick = function () {
        //  alert(document.getElementById("editSel").value);
        document.getElementById("liEdit").innerHTML = document.getElementById("editSel").value;
    }
</script>

　　

 

?
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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        div {
        border:1px solid #0094ff;
        height:100px;
        width:100px;
        }
 
    </style>
</head>
<body>
    <!--使用a标签引入js代码 javascript:这里写js代码-->
    <a  href="javascript:alert('大家下午好,不要打瞌睡了');">点击打招呼</a>
    <div id="divBox">
        div的id为divBox
        <input type="button" id="btnTest" value="id=btnTest" />
    </div>
</body>
</html>
<script type="text/javascript">
    //为按钮添加点击事件
    document.getElementById("btnTest").onclick = function () {
        alert(this.id);
        //删除自己-通过parentNode获取父节点,然后调用父节点的删除方法
        //this.parentNode.removeChild(this);
        //parentElement有浏览器兼容问题
        this.parentElement.removeChild(this);
    }
 
 
</script>

　　

 

posted @   枫伶忆  阅读(476)  评论(0)  编辑  收藏  举报
编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
点击右上角即可分享
微信分享提示
SQL AI 助手