知识点其他技术成都大学

2017.12.17-学习笔记：DOM 知识点整理

2017-12-17  本文已影响1676人  bixin

前言：古人云，温故而知新，把自己学习 js dom 笔记整理一下，有错误之处还望指出，谢谢。

→点我去看js基础知识点整理

→点我去看js进阶知识点整理

→点我去看jQuery知识点整理

DOM:文档 对象 模型 Document Object Model

1.概念：
2.获取元素：
3.注册事件：
4.属性操作：
5.排他思想：
inputs[i].onclick = function() {
  //干掉所有人,遍历inputs，把所有的input的className
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].className = "";
  }
  //复活我自己
  this.className = "red";
}
6.获取当前元素的下标：
// 打印当前按钮对应的下标：
// 第一种： 使用let定义变量 es6 let特点： {}
// 也能形成作用域
var btns = document.querySelectorAll("button");
for (let i = 0; i < btns.length; i++) {
  btns[i].onclick = function() {
    console.log(i);
  }
}

// 第二种： 使用属性存储下标
var btns = document.querySelectorAll("button");
for (var i = 0; i < btns.length; i++) {
  btns[i].index = i;
  btns[i].onclick = function() {
    console.log(this.index);
  }
}

// 第三种： 使用forEach遍历
var btns = document.querySelectorAll("button");
btns.forEach(function(e, i) {
  //e:是每一个元素   i:每一个下标
  btns[i].onclick = function() {
    console.log(i);
  }
});

// 第四种： 闭包解决
var btns = document.querySelectorAll("button");
for (var i = 0; i < btns.length; i++) {
  (function(num) {
    btns[num].onclick = function() {
      console.log(num);
    }
  })(i); //调用btns.length-1次匿名函数，每次调用都产生相应的函数作用域，
  //在每个相应的函数作用域中给注册事件赋值一个函数
}

// 第五种：
var btns = document.querySelectorAll("button");
for (var i = 0; i < btns.length; i++) {
  btns[i].onclick = (function(num) {
    function fn() {
      console.log(num);
    }
    return fn;
  })(i); //给btn注册btns.length-1次事件赋值，每次注册调用匿名函数产生相应的函数作用域
}


// 使用setTimeout 每秒钟打印一个数字 0， 1， 2， 3， 4， 5， 6， 7， 8， 9
// 第一种：
// let
for (let i = 0; i < 10; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000)
}

// 第二种: 闭包
for (var i = 0; i < 10; i++) {
  (function(num) {
    setTimeout(function() {
      console.log(num);
    }, num * 1000)
  })(i);
}

// 第三种: 闭包
for (var i = 0; i < 10; i++) {
  var fn = (function(i) {
    return function() {
      console.log(i);
    }
  })(i);
  setTimeout(fn, i * 1000);
}
8.tab栏案例：
for (var i = 0; i < lis.length; i++) {
  lis[i].onclick = function() {
    //干掉所有人
    for (var i = 0; i < lis.length; i++) {
      lis[i].className = "";
      divs[i].className = "";
    }
    //复活我自己
    this.className = "now";
    //复活this对应的那个div
    var index = this.getAttribute("index");
    divs[index].className = "now";
  }
}
9.标签内容：
//参数：element 获取谁的innerText
function getInnerText(element) {
  if (typeof element.innerText === "string") {
    return element.innerText;
  } else {
    return element.textContent;
  }
}
10.样式操作：
10.节点操作：
11.In操作符：
12.a 标签阻止页面跳转：
13.Window：
14.定时器：
15.location对象(地址栏)：可以设置或返回
16.offset系列
17.三大家族：
// 获取
box.addEventListener("scroll", function(e) {
  console.log(e); // 事件对象
  console.log(e.target.scrollTop); // 盒子滚动过的距离
})

// 设置
box.scrollTop = 100
btn.addEventListener("click", function(e) {
  box.scrollTop = 200
})
18.事件对象：
19.注册事件的两种方式
20.事件流：
link.onclick = function (event) {
    event = event || window.event;//兼容
    event.stopPropagation();
}
21.事件总结：
22.轮播图详细版

代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .carousel {
      width: 790px;
      height: 340px;
      margin: 100px auto;
      overflow: hidden;
      position: relative;
    }

    .carousel ul {
      width: 900%;
      position: absolute;
    }

    .carousel ul li {
      float: left;
    }

    .carousel ol {
      width: 182px;
      height: 20px;
      background-color: rgba(255, 255, 255, .5);
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 10px;
    }

    .carousel ol li {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #fff;
      float: left;
      margin-top: 4px;
      margin-left: 10px;
      cursor: pointer;
    }

    .carousel ol li.now {
      background-color: red;
    }

    .left,
    .right {
      width: 30px;
      height: 60px;
      background-color: rgba(0, 0, 0, 0.3);
      position: absolute;
      top: 50%;
      margin-top: -30px;
      line-height: 60px;
      text-align: center;
      text-decoration: none;
      color: #fff;
      font-family: "宋体";
      font-size: 24px;
    }

    .left {
      left: 0;
    }

    .right {
      right: 0;
    }

    .left:hover,
    .right:hover {
      background-color: rgba(0, 0, 0, .8);
    }

    .arrow {
      display: none;
    }

    .carousel:hover .arrow {
      display: block;
    }
  </style>
</head>

<body>

  <div class="carousel">
    <ul>
      <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
      <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
      <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
      <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
      <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
      <li><a href="#"><img src="images/6.jpg" alt=""></a></li>
      <li><a href="#"><img src="images/7.jpg" alt=""></a></li>
      <li><a href="#"><img src="images/8.jpg" alt=""></a></li>
      <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
    </ul>
    <ol>
      <li class="now"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
    <div class="arrow">
      <a href="javascript:void(0);" class="left">&lt;</a>
      <a href="javascript:void(0);" class="right">&gt;</a>
    </div>
  </div>

  <script src=animate.js></script>
  <script>
    //找对象
    //轮播框
    var carousel = document.querySelector(".carousel");
    //长图ul
    var ul = document.querySelector(".carousel ul");
    //图片
    var imgs = document.querySelectorAll(".carousel ul li");
    //圆点
    var points = document.querySelectorAll(".carousel ol li");
    //箭头
    var leftArrow = document.querySelector(".arrow .left");
    var rightArrow = document.querySelector(".arrow .right");
    //图片宽度
    var imgWidth = carousel.offsetWidth;

    //遍历圆点
    for (var i = 0; i < points.length; i++) {
      //给圆点对象添加index并赋值i；用于存储下标
      points[i].index = i;
      //圆点注册点击事件
      points[i].onclick = function() {
        //排他
        for (var i = 0; i < points.length; i++) {
          points[i].className = '';
        }
        this.className = 'now';
        //判断过去的张数如果等于除了假图的张数，表示框内的是假图，那就把ul位置重设，也就是把第一张放进框内
        if (count == imgs.length - 1) {
          ul.style.left = 0;
          count = 0;
        }
        //移动ul
        animate2(ul, -this.index * imgWidth); //中间不加单位
        count = this.index;
      }
    }
    //右箭头
    var count = 0; //表示过去图片的张数
    rightArrow.onclick = function() {
      //判断计数器是否超过最后一张，当等于最后一张时自动移到第一张
      if (count == imgs.length - 1) {
        ul.style.left = 0;
        count = 0;
      }
      //每次点击，计数器加一
      count++;
      //调用动画函数
      animate2(ul, -count * imgWidth);
      //绑定小圆点，排他
      for (var i = 0; i < points.length; i++) {
        points[i].className = '';
      }
      //判断是否到最后一张，最后一张前就改圆点类名，最后一张就直接改第一圆点
      if (count < imgs.length - 1) {
        points[count].className = 'now';
      } else {
        points[0].className = 'now';
      }
    }
    leftArrow.onclick = function() {
      if (count == 0) {
        ul.style.left = -(imgs.length - 1) * imgWidth + 'px';
        count = imgs.length - 1;
      }
      //每次点击，计数器减一
      count--;
      //调用动画函数
      animate2(ul, -count * imgWidth);
      //绑定小圆点，排他
      for (var i = 0; i < points.length; i++) {
        points[i].className = '';
      }
      if (count < imgs.length - 1) {
        points[count].className = 'now';
      } else {
        points[0].className = 'now';
      }
    }
  </script>
</body>

</html>


Knowledge changes the mind

上一篇 下一篇

猜你喜欢

热点阅读