Почетна Преглед Помоћ
Пријавите се
lovecoding
/
VIP26
9
0
Креирај огранак 0
Датотеке Дискусије 0 Захтеви за спајање 0 Вики
Преглед изворни кода

fix:day12

e пре 1 година
родитељ
2825bb1142
комит
5a76854d87
8 измењених фајлова са 206 додато и 0 уклоњено
Подељен поглед Покажи статистику Diff
  1. 29 0
      day12/html/1.获取元素节点.html
  2. 32 0
      day12/html/2.小例子.html
  3. 12 0
      day12/html/3.onload.html
  4. 72 0
      day12/html/4.选项卡.html
  5. 17 0
      day12/js/1.获取元素节点.js
  6. 20 0
      day12/js/2.小例子.js
  7. 4 0
      day12/js/3.onload.js
  8. 20 0
      day12/js/4.选项卡.js

+ 29 - 0
day12/html/1.获取元素节点.html
Прегледај датотеку 

@@ -0,0 +1,29 @@
 
+<!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>
 
+    <!-- 
+        DOM 文档对象模型 Document Object Model
 
+     -->
 
+     <div id="partOne">第一部分</div>
 
+     <button class="btn">按钮</button>
 
+     <input type="text" placeholder="请输入内容">
 
+     <div id="box">这是一个盒子</div>
 
+     <ul class="list">
 
+        <li>3</li>
 
+        <li>3</li>
 
+        <li>3</li>
 
+        <li>3</li>
 
+     </ul>
 
+     <ol id="vase">
 
+        <li>32</li>
 
+        <li>32</li>
 
+        <li>32</li>
 
+     </ol>
 
+     <script src="../js/1.获取元素节点.js"></script>
 
+</body>
 
+</html>

+ 32 - 0
day12/html/2.小例子.html
Прегледај датотеку 

@@ -0,0 +1,32 @@
 
+<!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>
 
+        .box {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #00f;
 
+            position: absolute;
 
+        }
 
+        #btn {
 
+            margin-top: 240px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+    <button id="btn">改变颜色</button>
 
+    <ul class="list">
 
+        <li id="a">12</li>
 
+        <li id="b">34</li>
 
+        <li id="c">56</li>
 
+        <li id="d">78</li>
 
+    </ul>
 
+    <button class="changeBtn">改变列表颜色</button>
 
+    
+    <script src="../js/2.小例子.js"></script>
 
+</body>
 
+</html>

+ 12 - 0
day12/html/3.onload.html
Прегледај датотеку 

@@ -0,0 +1,12 @@
 
+<!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>
 
+    <script src="../js/3.onload.js"></script>
 
+    <span id="main">这是一段文字</span>
 
+</body>
 
+</html>

+ 72 - 0
day12/html/4.选项卡.html
Прегледај датотеку 

@@ -0,0 +1,72 @@
 
+<!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;
 
+            text-decoration: none;
 
+            box-sizing: border-box;
 
+        }
 
+        #list{
 
+            overflow: auto;
 
+        }
 
+        #list li {
 
+            float: left;
 
+            width: 120px;
 
+            height: 80px;
 
+            text-align: center;
 
+            line-height: 80px;
 
+            border: 1px solid #ccc;
 
+        }
 
+        .selected {
 
+            background-color: #f00;
 
+            color: #ff0;
 
+        }
 
+        .main {
 
+            /* width: 480px;
 
+            height: 200px;
 
+            background: #00f; */
 
+            /* 超出部分隐藏 占位 点击事件无效果 */
 
+            /* overflow: hidden; */
 
+        }
 
+        .active{
 
+            width: 480px;
 
+            height: 280px;
 
+            text-align: center;
 
+            line-height: 280px;
 
+            font-size: 40px;
 
+            border: 1px solid #ccc;
 
+            /* display:none;
 
+               隐藏 不占位 会对页面产生更改
 
+            */
 
+            display: none;
 
+        }
 
+        .choose {
 
+            /* 显示内容 */
 
+            display: block;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="container">
 
+        <ul id="list">
 
+            <li class="selected">用户管理</li>
 
+            <li>配置管理</li>
 
+            <li>角色管理</li>
 
+            <li>定时任务补偿</li>
 
+        </ul>
 
+        <div class="main">
 
+            <div class="choose active">用户管理</div>
 
+            <div class="active">配置管理</div>
 
+            <div class="active">角色管理</div>
 
+            <div class="active">定时任务补偿</div>
 
+        </div>
 
+    </div>
 
+    <script src="../js/4.选项卡.js"></script>
 
+</body>
 
+</html>

+ 17 - 0
day12/js/1.获取元素节点.js
Прегледај датотеку 

@@ -0,0 +1,17 @@
 
+// 获取id命名的元素
 
+var partOne = document.getElementById("partOne");
 
+console.log(partOne);
 
+// 获取class命名的元素
 
+var btn = document.getElementsByClassName("btn");//获取数组
 
+console.log(btn);
 
+// 通过标签名称获取元素
 
+var inputs = document.getElementsByTagName("input");//获取数组
 
+console.log(inputs);
 
+// 通过css选择器获取（一个）元素
 
+var box = document.querySelector("#box");
 
+console.log(box);
 
+// 通过css选择器获取（多个）元素
 
+var lis = document.querySelectorAll(".list li");
 
+console.log(lis);
 
+var vase = document.querySelectorAll("#vase li");
 
+console.log(vase);

+ 20 - 0
day12/js/2.小例子.js
Прегледај датотеку 

@@ -0,0 +1,20 @@
 
+var btn = document.getElementById("btn");
 
+var box = document.querySelector(".box");
 
+console.log(box);
 
+btn.onclick = function() {
 
+    box.style.background = 'red';
 
+    box.style.left = 200 + 'px';
 
+}
 
+// var a = document.getElementById("a");
 
+var b = document.getElementById("b");
 
+var c = document.getElementById("c");
 
+var d = document.getElementById("d");
 
+
 
+var a = document.querySelector(".list #a");
 
+var changeBtn = document.querySelector(".changeBtn");
 
+changeBtn.onclick = function() {
 
+    a.style.background = 'red';
 
+    b.style.background = 'yellow';
 
+    c.style.background = 'blue';
 
+    d.style.background = 'green';
 
+}

+ 4 - 0
day12/js/3.onload.js
Прегледај датотеку 

@@ -0,0 +1,4 @@
 
+window.onload = function(){
 
+    document.getElementById("main").style.color = "green";
 
+}
 
+// 等所有的东西全部加载完毕，再去执行里面的内容

+ 20 - 0
day12/js/4.选项卡.js
Прегледај датотеку 

@@ -0,0 +1,20 @@
 
+var btn = document.querySelectorAll("#list li");
 
+var content = document.getElementsByClassName("active");
 
+// this => window
 
+for(var i=0; i<btn.length; i++) {
 
+    // btn.length = 4
 
+    // btn下的每一个下标都为对应的i
 
+    console.log(btn[i].index)
 
+    btn[i].index = i;
 
+    console.log(btn[i].index)
 
+    btn[i].onclick = function() {
 
+        for(var j=0; j < content.length;j++){
 
+            // className 改 class （类名）
 
+            btn[j].className = '';
 
+            content[j].className = 'active';
 
+        }
 
+        // this => btn[i]
 
+        this.className = 'selected';
 
+        content[this.index].className = "choose active";
 
+    }
 
+}