Etusivu Tutki Apua
Kirjaudu sisään
lovecoding
/
VIP30
9
0
Fork 0
Tiedostot Ongelmat 0 Pull-pyynnöt 0 Wiki
Selaa lähdekoodia

new

zsydgithub 1 vuosi sitten
vanhempi
4db3f1831f
commit
45a98e4d43
8 muutettua tiedostoa jossa 451 lisäystä ja 1 poistoa
Jaettu näkymä Näytä diff tilastot
  1. 73 0
      DOM/10_节点遍历.html
  2. 72 0
      DOM/11_垂直导航.html
  3. 45 0
      DOM/12_节点操作.html
  4. 92 0
      DOM/13_事件冒泡.html
  5. 22 0
      DOM/14_阻止事件默认行为.html
  6. 26 1
      DOM/4_轮播图/1_轮播图.html
  7. 1 0
      DOM/4_轮播图/2_轮播图.html
  8. 120 0
      DOM/9_放大镜‘/1_放大镜.html

+ 73 - 0
DOM/10_节点遍历.html
Näytä tiedosto 

@@ -0,0 +1,73 @@
 
+<!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>
 
+</head>
 
+<body>
 
+  <div id="div1">11111111111</div>
 
+  <p id="p1">222222222</p>
 
+  <ul id="ul1">
 
+    <li>1</li>
 
+    <li>2</li>
 
+    <li>3</li>
 
+  </ul>
 
+  <script>
 
+    var div1 = document.getElementById('div1')
 
+    var p1 = document.getElementById('p1')
 
+    var ul1 = document.getElementById('ul1')
 
+    console.log(div1)
 
+
 
+    console.log(div1.nodeType)
 
+    console.log(div1.nextSibling) //下一个节点
 
+    console.log(div1.previousSibling) //上一个节点
 
+
 
+    /* 
+      documentt 是没有nodevalue   是null
 
+      元素节点也没有nodevalue 
+      属性节点id的nodevalue是 
+      内容节点的nodevalue就是内容 
+    */
 
+
 
+    console.log(div1.nodeValue)
 
+
 
+    console.log(div1.nextElementSibling)//下一个元素节点
 
+    console.log(div1.previousElementSibling)//上一个元素节点
 
+
 
+    console.log(div1.nodeName)//div
 
+    console.log(p1.nodeName) //P
 
+
 
+    /* 
+      元素节点 nodeName 与标签名相同
 
+      属性节点 nodeName  与属性名相同
 
+      文本节点 nodeName  #text
 
+      文档节点 nodeName  #document
 
+    */
 
+
 
+    function next(elem){
 
+      do{
 
+        elem = elem.nextSibling
 
+      } while(elem.nodeType != 1)
 
+      return elem
 
+    }
 
+    console.log(next(p1))
 
+
 
+    console.log(div1.firstChild)
 
+    console.log(ul1.lastChild)
 
+    console.log(ul1.firstElementChild)
 
+    console.log(ul1.lastElementChild)
 
+
 
+
 
+    function first(elem){
 
+      elem = elem.firstChild
 
+      if(elem.nodeType != 1){
 
+        elem = next(elem)
 
+      }
 
+      return elem
 
+    }
 
+    console.log(first(ul1))
 
+  </script>
 
+</body>
 
+</html>

+ 72 - 0
DOM/11_垂直导航.html
Näytä tiedosto 

@@ -0,0 +1,72 @@
 
+<!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>
 
+  <style>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+
 
+    ul {
 
+      list-style: none;
 
+    }
 
+
 
+    h2 {
 
+      width: 300px;
 
+      height: 50px;
 
+      background: #000;
 
+      color: white;
 
+      
+    }
 
+    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>456</li>
 
+      <li>456</li>
 
+      <li>456</li>
 
+    </ul>
 
+  </div>
 
+  <script>
 
+    var h2 = document.getElementsByTagName('h2')
 
+
 
+
 
+    for (var i = 0; i < h2.length; i++) {
 
+      h2[i].onclick = function () {
 
+        var ul1 = next(this)
 
+        console.log(ul1)
 
+        if(ul1.style.display == 'block'){
 
+          ul1.style.display = 'none'
 
+        } else {
 
+          ul1.style.display = 'block'
 
+        }
 
+      }
 
+    }
 
+
 
+    function next(elem){
 
+      do{
 
+        elem = elem.nextSibling
 
+      } while(elem.nodeType != 1)
 
+      return elem
 
+    }
 
+  </script>
 
+</body>
 
+
 
+</html>

+ 45 - 0
DOM/12_节点操作.html
Näytä tiedosto 

@@ -0,0 +1,45 @@
 
+<!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>
 
+</head>
 
+<body>
 
+  <div id="div1">
 
+    <p id="p1">123</p>
 
+    <p>456</p>
 
+  </div>
 
+  <script>
 
+    var a = document.createElement('p')
 
+    console.log(a)
 
+    var b = document.createTextNode('789')
 
+    console.log(b)
 
+
 
+    a.appendChild(b)
 
+    console.log(a)
 
+    //appendChild  就是向html里面添加新元素 必须先创建元素 然后追加
 
+
 
+    var div1 = document.getElementById('div1')
 
+    // div1.appendChild(a)
 
+
 
+
 
+    var p1 = document.getElementById('p1')
 
+    //insertBefore(参数1，参数2)  向参数2前面添加参数1
 
+    // div1.insertBefore(a,p1)
 
+
 
+
 
+    //xx.remove()在页面中移除xx节点
 
+    // p1.remove()
 
+
 
+    //xx.removeChild() 移除xx里面的子节点
 
+    // div1.removeChild(p1)
 
+
 
+
 
+    //xx.replaceChild(新节点，旧节点)
 
+    div1.replaceChild(a,p1)
 
+
 
+  </script>
 
+</body>
 
+</html>

+ 92 - 0
DOM/13_事件冒泡.html
Näytä tiedosto 

@@ -0,0 +1,92 @@
 
+<!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>
 
+  <style>
 
+    #div1 {
 
+      width: 300px;
 
+      height: 300px;
 
+      background: pink;
 
+    }
 
+
 
+    #div2 {
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+    }
 
+
 
+    #div3 {
 
+      width: 100px;
 
+      height: 100px;
 
+      background: green;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <div id="div1">
 
+    <div id="div2">
 
+      <div id="div3"></div>
 
+    </div>
 
+  </div>
 
+  <script>
 
+    var div1 = document.getElementById('div1')
 
+    var div2 = document.getElementById('div2')
 
+    var div3 = document.getElementById('div3')
 
+
 
+
 
+    // div1.onclick = function(){
 
+    //   console.log('div1')
 
+    // }
 
+    // div2.onclick = function(e){
 
+    //   console.log('div2')
 
+    //   //阻止事件默认行为
 
+    //   // e.preventDefault() //阻止不了
 
+    //   //阻止事件冒泡
 
+    //   e.stopPropagation()
 
+    // }
 
+    // div3.onclick = function(){
 
+    //   console.log('div3')
 
+    //   //阻止事件冒泡
 
+    //   event.cancelBubble = true
 
+    // }
 
+
 
+    //事件冒泡 从里到外执行
 
+
 
+    /* 
+      参数1  事件名称 字符串  必填
 
+      参数2  执行函数   必填
 
+      参数3  布尔值
 
+    */
 
+    div1.addEventListener('click',function(){
 
+      console.log('div1')
 
+    },false)
 
+    div2.addEventListener('click',function(){
 
+      console.log('div2')
 
+    },false)
 
+    div3.addEventListener('click',function(){
 
+      console.log('div3')
 
+    },false)
 
+    div1.addEventListener('click',function(){
 
+      console.log('div1')
 
+    },true)
 
+    div2.addEventListener('click',function(){
 
+      console.log('div2')
 
+    },true)
 
+    div3.addEventListener('click',function(){
 
+      console.log('div3')
 
+    },true)
 
+
 
+    /* 
+      从里到外 事件冒泡  false
 
+      从外到里 事件捕获  true
 
+      先捕获 后冒泡  先从外到里 然后从里到外
 
+    */
 
+  </script>
 
+</body>
 
+
 
+</html>

+ 22 - 0
DOM/14_阻止事件默认行为.html
Näytä tiedosto 

@@ -0,0 +1,22 @@
 
+<!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>
 
+</head>
 
+<body>
 
+  <a href="http://www.baidu.com" id="a1">跳转</a>
 
+  <script>
 
+    var a1 = document.getElementById('a1')
 
+    a1.onclick = function(e){
 
+      console.log(123)
 
+      //阻止事件默认行为  仅w3c
 
+      e.preventDefault()
 
+      // 适配于ie浏览器
 
+      e.returnValue = false
 
+    }
 
+  </script>
 
+</body>
 
+</html>

+ 26 - 1
DOM/4_轮播图/1_轮播图.html
Näytä tiedosto 

@@ -102,29 +102,47 @@
 
     </div>
 
   </div>
 
   <script>
 
-    var btns = document.getElementsByTagName('li')
 
+    var btns = document.getElementsByTagName('li') //类数组
 
     var imgs = document.getElementsByClassName('selected')
 
     var next = document.getElementById('next')
 
     var prev = document.getElementById('prev')
 
     var container = document.getElementById('container')
 
 
+    //定义全局索引变量
 
     iNow = 0
 
+    //想要给类数组绑定点击事件   我们需要利用循环
 
     for (var i = 0; i < btns.length; i++) {
 
+      //创建一个属性 去把索引的值提取出来 
+      //局部变量
 
       btns[i].index = i
 
+      //btns[0].index = 0
 
+      //btns[1].index = 1
 
+      //给数组里面每一项都绑定点击事件
 
       btns[i].onclick = function () {
 
+        // 一上来清除所有的样式  恢复到没有设置的时候
 
         for (var k = 0; k < btns.length; k++) {
 
+          //按钮恢复
 
           btns[k].className = ''
 
           imgs[k].className = 'selected'
 
         }
 
+        //谁的点击事件就是谁  
+        // btns[0,1,2,3,4,5].className = 'select'
 
+        //this = btns[点击的那个索引]
 
         this.className = 'select'
 
+        //从上面换算一下   this.index = btns[点击的那个索引].index 
+        //例子： 点击索引为2的按钮   this.index = btns[2].index  ---> btns[2].index = 2 
         imgs[this.index].className = 'selected choice'
 
+        //赋值为当前的索引
 
         iNow = this.index
 
       }
 
     }
 
     //下一个点击事件
 
     next.onclick = function () {
 
       console.log(iNow)
 
+      //当前的索引+1 ----->下一个
 
       iNow++;
 
+      //当我们图片  索引+= 5  发现数组里面没有这么多个  变为空白 提醒报错
 
+      //需要判断  如果 超出了  索引的最大值  变为索引为0 的图片
 
       if (iNow > btns.length - 1) {
 
         iNow = 0
 
       }
 
@@ -134,6 +152,8 @@
 
       // }
 
       // btns[iNow].className = 'select'
 
       // imgs[iNow].className = 'selected choice'
 
+
 
+      //把方法提取出去  避免代码重复
 
       myFun(iNow)
 
     }
 
     //上一个点击事件
 
@@ -154,12 +174,16 @@
 
     container.onmouseout = function () {
 
       next.style.display = 'none'
 
       prev.style.display = 'none'
 
+      //划出的时候 需要重新设定定时器  
+      //不要var  var就相当于在这个函数里面 又创建了一个  定时器 同名  会同时触发
 
+      //重新唤醒之前的定时器就可以
 
       timer = setInterval(function () {
 
         next.onclick()
 
       }, 1000)
 
     }
 
 
     //定时器
 
+    //如果在这个页面里面 想要实现 定时下一个  就相当于 触发了 下一个的事件
 
     var timer = setInterval(function () {
 
       next.onclick()
 
     }, 1000)
 
@@ -170,6 +194,7 @@
 
         btns[k].className = ''
 
         imgs[k].className = 'selected'
 
       }
 
+      //变得只是传进来的索引
 
       btns[xx].className = 'select'
 
       imgs[xx].className = 'selected choice'
 
     }

+ 1 - 0
DOM/4_轮播图/2_轮播图.html
Näytä tiedosto 

@@ -120,6 +120,7 @@
 
           btns[k].className = ''
 
         }
 
         this.className = 'select'
 
+        //是反方向的
 
         imgBox.style.left = -590 * this.index + 'px'
 
       }
 
     }

+ 120 - 0
DOM/9_放大镜‘/1_放大镜.html
Näytä tiedosto 

@@ -0,0 +1,120 @@
 
+<!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>
 
+  <style>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+
 
+    #container {
 
+      position: relative;
 
+    }
 
+
 
+    #smallBox {
 
+      width: 400px;
 
+      height: 400px;
 
+    }
 
+
 
+    #bigBox {
 
+      width: 400px;
 
+      height: 400px;
 
+      position: absolute;
 
+      left: 400px;
 
+      top: 0;
 
+      display: none;
 
+      overflow: hidden;
 
+    }
 
+
 
+    #drag {
 
+      width: 200px;
 
+      height: 200px;
 
+      background: rgba(0, 0, 0, 0.5);
 
+      position: absolute;
 
+      top: 0;
 
+      left: 0;
 
+      display: none;
 
+    }
 
+    #bigImg{
 
+      position: absolute;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <div id="container">
 
+    <div id="smallBox">
 
+      <img src="./images/1.jpg" alt="">
 
+      <div id="drag"></div>
 
+    </div>
 
+    <div id="bigBox">
 
+      <img src="./images/2.jpg" alt="" id="bigImg">
 
+    </div>
 
+  </div>
 
+
 
+  <script>
 
+    var drag = document.getElementById('drag')
 
+    var small = document.getElementById('smallBox')
 
+
 
+    var big = document.getElementById('bigBox')
 
+    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
 
+
 
+      // console.log(smallLeft)
 
+
 
+      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 xLeft = small.offsetWidth - drag.offsetWidth
 
+      var xTop = small.offsetHeight - drag.offsetHeight
 
+
 
+      if (drag.offsetLeft > xLeft) {
 
+        drag.style.left = xLeft + 'px'
 
+      }
 
+      if (drag.offsetTop > xTop) {
 
+        drag.style.top = xTop + 'px'
 
+      }
 
+
 
+      //比例
 
+      var m = drag.offsetLeft / xLeft
 
+      var n = drag.offsetTop / xTop
 
+
 
+      //右侧可移动的最大距离
 
+      var bigLeft = bigImg.offsetWidth - big.offsetWidth
 
+      var bigTop = bigImg.offsetHeight - big.offsetHeight
 
+
 
+      bigImg.style.left = -m * bigLeft + 'px'
 
+      bigImg.style.top = -n * bigTop + 'px'
 
+    }
 
+  </script>
 
+</body>
 
+
 
+</html>