Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
lovecoding
/
VIP32
10
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

DOM

e 1 жил өмнө
parent
373f1a4cd6
commit
331f125b3c
3 өөрчлөгдсөн 189 нэмэгдсэн , 0 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 98 0
      JS初级/DOM/14.放大镜.html
  2. 40 0
      JS初级/DOM/15.节点.html
  3. 51 0
      JS初级/DOM/16.节点遍历.html

+ 98 - 0
JS初级/DOM/14.放大镜.html
Файл харах 

@@ -0,0 +1,98 @@
 
+<!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;
 
+        }
 
+        #container {
 
+            position: relative;
 
+        }
 
+        #small {
 
+            width: 400px;
 
+            height: 400px;
 
+            position: relative;
 
+        }
 
+        #drag {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: rgba(0, 0, 0, .3);
 
+            display: none;
 
+            position: absolute;
 
+            left: 0;
 
+            top: 0;
 
+        }
 
+        #big {
 
+            position: absolute;
 
+            top:0;
 
+            left: 400px;
 
+            width: 400px;
 
+            height: 400px;
 
+            overflow: hidden;/*溢出隐藏*/
 
+            display: none;
 
+        }
 
+        #bigImg {
 
+            position: absolute;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="container">
 
+        <div id="small">
 
+            <img src="./images/6.jpg" alt="">
 
+            <div id="drag"></div>
 
+        </div>
 
+        <div id="big">
 
+            <img src="./images/7.jpg" id="bigImg" alt="">
 
+        </div>
 
+    </div>
 
+    <script>
 
+        var small = document.getElementById("small");
 
+        var drag = document.getElementById("drag");
 
+        var big = document.getElementById("big");
 
+        var bigImg = document.getElementById("bigImg");
 
+        small.onmouseover = function() {
 
+            drag.style.display = 'block';
 
+            big.style.display = 'block';
 
+        }
 
+        small.onmouseout = function() {
 
+            drag.style.display = 'none';
 
+            big.style.display = 'none';
 
+        }
 
+        small.onmousemove = function(e) {
 
+            var smallLeft = e.clientX - drag.offsetWidth / 2;
 
+            var smallTop = e.clientY - drag.offsetHeight / 2;
 
+            drag.style.left = smallLeft + 'px';
 
+            drag.style.top = smallTop + 'px';
 
+            if(drag.offsetLeft <=0){
 
+                drag.style.left = 0;
 
+            }
 
+            if(drag.offsetTop <= 0) {
 
+                drag.style.top = 0;
 
+            }
 
+            //遮罩层允许移动的做大范围
 
+            var left1 = small.offsetWidth - drag.offsetWidth;
 
+            var top1 = small.offsetHeight - drag.offsetHeight;
 
+            if(drag.offsetLeft > left1) {
 
+                drag.style.left = left1 + 'px';
 
+            }
 
+            if(drag.offsetTop > top1) {
 
+                drag.style.top = top1 + 'px';
 
+            }
 
+            // 大图可移动的距离
 
+            var bigLeft = bigImg.offsetWidth - big.offsetWidth;
 
+            var bigTop = bigImg.offsetHeight -big.offsetHeight;
 
+            // 移动距离比例
 
+            var x = drag.offsetLeft / left1;
 
+            var y = drag.offsetTop / top1;
 
+            // 展示大图
 
+            bigImg.style.left = -bigLeft * x + 'px';
 
+            bigImg.style.top = -bigTop * y + 'px';
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 40 - 0
JS初级/DOM/15.节点.html
Файл харах 

@@ -0,0 +1,40 @@
 
+<!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"></div>
 
+    <p id="main">11111</p>
 
+    <div id="list">
 
+        <p>hello world</p>
 
+        <!-- <input type="text" name="" id=""> -->
 
+    </div>
 
+    <script>
 
+        var box = document.getElementById("box");
 
+        var main = document.querySelector("#main");
 
+        var list = document.querySelector("#list");
 
+        console.log(box.nodeName); // 节点名字
 
+        console.log(main.nodeName);
 
+        console.log(main.nodeValue); // null 节点值
 
+        console.log(main.nodeType); // 节点类型 1
 
+        // 往元素中添加内容
 
+        // innerHTML 从开始内容到结束内容 全部展示 包括HTML标签
 
+        // innerText 从开始内容到结束内容 全部展示 不包含HTML标签
 
+        box.innerHTML = '这是一个盒子';
 
+        main.innerText = '这是主要的内容';
 
+        alert(list.innerHTML);
 
+        alert(list.innerText);
 
+        /*
 
+            document是没有nodeValue的：null
 
+            元素节点是没有nodeValue的：null
 
+            属性节点id的nodeValue：d1
 
+            内容节点的nodeValue：hello HTML DOM
 
+        */
 
+        // 单行注释
 
+        /* 多行注释 */
 
+    </script>
 
+</body>
 
+</html>

+ 51 - 0
JS初级/DOM/16.节点遍历.html
Файл харах 

@@ -0,0 +1,51 @@
 
+<!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>
 
+    <p class="main">这是一个p标签</p>
 
+    <div class="box">这是第一个盒子</div>
 
+    <h2>
 
+      你的我的
 
+      <br />
 
+      他的他的
 
+    </h2>
 
+    <ul id="list">
 
+      <li>1</li>
 
+      <li>2</li>
 
+      <li>3</li>
 
+      <li>4</li>
 
+    </ul>
 
+    <!-- 
+      // firstChild 第一个子节点
 
+      // lastChild 最后一个子节点
 
+      // previousSibling 上一个兄弟节点名称
 
+      // nextSibling 下一个兄弟节点名称
 
+      // nextElementSibling 下一个元素节点
 
+      // previousElementSibling 上一个元素节点 如果该节点为第一个节点 则获取值为null
 
+      // lastElementChild 最后一个子元素
 
+      // firstElementChild 第一个子元素
 
+     -->
 
+    <script>
 
+      var main = document.querySelector(".main");
 
+      var box = document.querySelector(".box")
 
+      var h2 = document.querySelector("h2");
 
+      var list = document.querySelector("#list");
 
+      // console.log(main.previousSibling);
 
+      // console.log(list.firstElementChild)
 
+      // console.log(list.lastChild.previousElementSibling.innerHTML)
 
+      console.log(list.firstChild.nextSibling);
 
+      console.log(list.firstElementChild)
 
+      /*
 
+        list.firstChild #text
 
+        list.firstChild.nextElementSibling li => 1
 
+        list.firstChild.nextElementSibling.nextSibling #text
 
+        list.firstChild.nextElementSibling.nextSibling.nextSibling li=>2
 
+      */
 
+      // console.log(list.firstChild.nextElementSibling.nextSibling.nextElementSibling);
 
+    </script>
 
+  </body>
 
+</html>