DOM小练习

1. tab页面的切换
2. 点击li标签，控制台打印标签文字内容
3. 全选功能
4. 实现图片按键上下左右移动（愤怒的小鸟）
5. 学生管理表单

1.tab页面的切换

效果预览：

<div class="tab">
    <div class="tab-nav">
      <h3>NBA球队</h3>
      <ul>
        <li><a data-myid="one"  class="active" href="javascript:;">勇士</a></li>
        <li><a data-myid="two"  href="javascript:;">骑士</a></li>
        <li><a data-myid="three"  href="javascript:;">凯尔特人</a></li>
        <li><a data-myid="four"  href="javascript:;">灰熊</a></li>
        <li><a data-myid="five"  href="javascript:;">太阳</a></li>
      </ul>
    </div>
    <div class="tab-content">
      <div id="five" class="item"><img src="./images/5.jpg" alt="" /></div>
      <div id="one" class="item active"><img src="./images/1.jpg" alt="" /></div>
      <div id="four" class="item"><img src="./images/4.jpg" alt="" /></div>
      <div id="two" class="item"><img src="./images/2.jpg" alt="" /></div>
      <div id="three" class="item"><img src="./images/3.jpg" alt="" /></div>
    </div>
  </div>

方法一：使用tab标签的下标，找到盒子相同下标的对应的盒子

注意：div盒子的先后顺序会影响页面渲染是否正确

 var aLinks  = document.querySelectorAll('.tab-nav a');
 var items = document.querySelectorAll('.item');
 // 遍历
 for(var i = 0; i < aLinks.length; i++) {
     aLinks[i].myindex = i;
     aLinks[i].onclick = function() {
        document.querySelector('.active').classList.remove('active');
        this.classList.add('active');

        // 功能2:
        // 排他先隐藏所有的元素
        for(var j = 0; j < items.length; j++) {
         items[j].style.display = 'none';
        }
        // 获取到当前点击标题的索引
        var index = this.myindex;
        // 根据索引从内容伪数组中找对应的盒子
        items[index].style.display = 'block';
     }
 };

方法二：页面切换完美解决办法

思路：使用tab标签自定义属性，找到相同id的盒子

var aLinks  = document.querySelectorAll('.tab-nav a');
 var items = document.querySelectorAll('.item');
 // 遍历
 for(var i = 0; i < aLinks.length; i++) {
     aLinks[i].onclick = function() {
         //顶部标题tab栏切换功能
        document.querySelector('.active').classList.remove('active');
        this.classList.add('active');

        // 点击顶部标题的时候,显示对应的内容
        for(var j = 0; j < items.length; j++) {
           items[j].style.display = 'none';
        }
       // 1. 先获取当前点击标题的自定义属性值
       var boxId =  this.dataset.myid;

       // 2. 根据id获取盒子
       document.getElementById(boxId).style.display = 'block';

     }
 };

2.点击li标签，控制台打印标签的文字内容

功能：给每一个li注册点击事件， 方法一：使用forEach

var lis = document.querySelectorAll('li');
lis.forEach(function(item){
   item.onclick = function() {
     console.log(item.innerHTML);
   }
});

优点：写法简单，易懂

方法二：使用for循环

做法一：
var lis = document.querySelectorAll('li');
for(var i = 0; i < lis.length; i++) {
   lis[i].onclick = function() {
    console.log(this.innerHTML);//使用this关键字
   }
};
做法二：
var lis = document.querySelectorAll('li');
for(var i = 0; i < lis.length; i++) {
   lis[i].myindex = i;添加自定义属性
   lis[i].onclick = function() {
    console.log(lis[this.myindex].innerHTML);使用自定义属性
   }
};
做法三：
var lis = document.querySelectorAll('li');
for(let i = 0; i < lis.length; i++) { 把var用let替代
   lis[i].onclick = function() {
    console.log(lis[i].innerHTML);
   }
};

报错的原因:

• 因为使用了var关键字. 没有块级作用域形成的问题
• for循环执行的时机: 瞬间执行完了, i 已经变成了4

解决方案:

• 推荐使用let 替代var关键字
• 在点击事件中使用this关键字, 谁调用就指向谁
• 动态给每一个DOM对象添加一个属性,通过this访问该属性

注意:事件中能使用this关键字,this关键字指向的是事件源

3.全选功能

效果预览

代码实现

功能：

• 全选功能：点击全选，其他复选框全部勾选，再次点击，其他复选框全部取消勾选
• 其他复选框选择功能：其他复选框全部勾选，全选勾选，否则取消勾选
• 反选功能：选中的取消勾选，未勾选的勾选

<table>
      <tr>
        <th><input class="inputAll" type="checkbox" />全选</th>
        <th>商品</th>
        <th>价格</th>
        <th>数量</th>
      </tr>
      <tr>
        <td><input class="inputs" type="checkbox" /></td>
        <td>手镯</td>
        <td>100</td>
        <td>1</td>
      </tr>
      <tr>
        <td><input class="inputs" type="checkbox" /></td>
        <td>耳环</td>
        <td>108</td>
        <td>2</td>
      </tr>
      <tr>
        <td><input class="inputs" type="checkbox" /></td>
        <td>项链</td>
        <td>599</td>
        <td>1</td>
      </tr>
    </table>
    <button>反选</button>

//隔行变色
      var trs = document.querySelectorAll("tr:nth-child(n+2)");
      for (var i = 0; i < trs.length; i++) {
        if (i % 2 == 0) {
          trs[i].style.backgroundColor = "green";
        } else {
          trs[i].style.backgroundColor = "orange";
        }
      }
      //全选功能
      var inputs = document.querySelectorAll(".inputs");
      var inputAll = document.querySelector(".inputAll");
      inputAll.onclick = function () {
        inputs.forEach(function (item) {
          item.checked = inputAll.checked;
        });
      };
      // 其他复选框功能
      inputs.forEach(function (item) {
        item.onclick = function () {
          if (
            document.querySelectorAll(".inputs:checked").length == inputs.length
          ) {
            inputAll.checked = true;
          } else {
            inputAll.checked = false;
          }
        };
      });
      //反选
      var btn = document.querySelector("button");
      btn.onclick = function () {
        inputs.forEach(function (item) {
          item.checked = !item.checked;
        });
        if (
          document.querySelectorAll(".inputs:checked").length == inputs.length
        ) {
          inputAll.checked = true;
        } else {
          inputAll.checked = false;
        }
      };

4.实现图片按键上下左右移动（愤怒的小鸟）

效果预览：

功能：键盘按下上下左右移动位置，小鸟跟随移动(按键为左右图片绕Y轴旋转) 思路：使用鼠标按下事件，获取鼠标的keyCode值，进行图片翻转并移动

 var img = document.querySelector("img");
      var step = 10;
      var startX = 0;
      var startY = 0;
      onkeydown = function (e) {
        switch (e.keyCode) {
          case 37://左
            img.style.transform = "rotateY(0deg)";
            startX -= step;
            img.style.left = startX + "px";
            break;
          case 38://上
            startY -= step;
            img.style.top = startY + "px";
            break;
          case 39://右
            img.style.transform = "rotateY(180deg)";
            startX += step;
            img.style.left = startX + "px";
            break;
          case 40://下
            startY += step;
            img.style.top = startY + "px";
            break;
        }
      };

5.学生管理表单

效果预览

功能：

• 点击提交按钮，用户信息展示到表格区域
• 点击开除，删除一条数据

 var arr = [];
  revel(arr);//初始化表格展示区
  var btn = document.querySelector(".btn");
  function Student(stuname, stuage, stuaddress, gender, stuScore) {
    this.stuname = stuname;
    this.stuage = stuage;
    this.stuaddress = stuaddress;
    this.gender = gender;
    this.stuScore = stuScore;
  }
  //点击提交按钮，对数据进行存储
  btn.onclick = function () {
    var stuname = document.querySelector("input[name='stuname']").value;
    var stuage = document.querySelector("input[name='stuage']").value;
    var stuaddress = document.querySelector(
      "input[name='stuaddress']"
    ).value;
    var gender = document.querySelector(
      "input[name='gender']:checked"
    ).value;
    var stuScore = document.querySelector("input[name='stuScore']").value;
    var p = new Student(stuname, stuage, stuaddress, gender, stuScore);
    arr.push(p);
    revel(arr);
  };

  // 把数组的数据展示给用户
  function revel(arr) {
    var tbody = document.querySelector("tbody");
    tbody.innerHTML = "";
    arr.forEach(function (item, index) {
      var gender = item.gender == "1" ? "男" : "女";
      var tr = document.createElement("tr");
      tr.innerHTML = `<tr>
          <td>${index+1}</td>
          <td>${item.stuname}</td>
          <td>${item.stuage}</td>
          <td>${item.stuaddress}</td>
          <td>${gender}</td>
          <td>${item.stuScore}</td>
          <td><a data-myindex = ${index} href="javascript:; ">开除</a></td>
        </tr>`;
      tbody.appendChild(tr);
    });
  }

// 移除功能
var tbody = document.querySelector("tbody");
tbody.addEventListener("click",function (e) {
  if(e.target.nodeName == 'A'){
    arr.splice(e.target.dataset.myindex,1);
    revel(arr);
}
})