e 1 gadu atpakaļ
vecāks
revīzija
c2cc9063d7

+ 42 - 0
day14/html/3.垂直导航.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+        h2 {
+            width: 300px;
+            height: 60px;
+            line-height: 60px;
+            background: #000;
+            color: #fff;
+        }
+        ul {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div id="container">
+        <h2>管理区</h2>
+        <ul>
+            <li>111</li>
+            <li>111</li>
+            <li>111</li>
+        </ul>
+        <h2>交流区</h2>
+        <ul>
+            <li>222</li>
+            <li>222</li>
+            <li>222</li>
+        </ul>
+    </div>
+    <script src="../js/3.垂直导航.js"></script>
+</body>
+</html>

+ 18 - 0
day14/html/4.添加节点.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <div id="box">
+        <p id="first">12345</p>
+        <p>67890</p>
+    </div>
+    <!-- <p id="other">
+        <span>12345</span>
+    </p> -->
+    <script src="../js/4.添加节点.js"></script>
+</body>
+</html>

+ 12 - 0
day14/js/3.垂直导航.js

@@ -0,0 +1,12 @@
+var h2 = document.getElementsByTagName("h2");
+for(var i=0;i<h2.length;i++) {
+    h2[i].onclick = function() {
+        var uls = this.nextElementSibling;
+        console.log(uls)
+        if(uls.style.display == 'block') {
+            uls.style.display = 'none';
+        } else {
+            uls.style.display = 'block'
+        }
+    }
+}

+ 44 - 0
day14/js/4.添加节点.js

@@ -0,0 +1,44 @@
+var box = document.getElementById("box");
+console.log(box.nodeName);
+console.log(box.nodeType);
+console.log(box.childNodes[1].innerHTML);
+// 文本内容
+// innerHTML 包含html标签
+// innerText 不包含html标签
+// childNodes[num] 子节点
+// 节点值
+// nodeValue
+// var other = document.getElementById("other");
+// alert(other.innerHTML)
+var first = document.getElementById("first");
+// 创建元素 createElement
+var a = document.createElement("span");
+console.log(a);
+a.innerHTML = '新的元素';
+console.log(a);
+// box.insertBefore(a,b);
+// 插入
+// insertBefore(参数1,参数2);
+// 参数1 要插入的当前元素
+// 参数2 项参数2中添加参数一的内容
+first.insertBefore(a,first[0])
+var ul = document.createElement("ul");
+var li = document.createElement("li");
+li.innerHTML = '列表1';
+console.log(ul,'ul');
+console.log(li,'li');
+// 添加 appendChild
+ul.appendChild(li);
+console.log(ul);
+box.appendChild(ul);
+var news = document.createElement('b');
+news.innerHTML = '字体';
+box.insertBefore(news,box[0]);
+//删除 removeChild
+// box.removeChild(ul);
+var h2 = document.createElement("h2");
+h2.innerHTML = '这是一个标题';
+// 替换节点 replaceChild(新节点,旧节点);
+// box.replaceChild(h2,first);
+// 删除整个节点 remove()
+// box.remove()