7-1实现输入input框的数据以li的形式加到页面中

indexOf 获取数组的下标

  1. <script>
  2.         var arr=["html","css"];
  3.         //indexOf  获取数组的下标
  4.         console.log(arr.indexOf("html"));
  5.     </script>

实现

  1.  <input type="text" name="" id="input">
  2.     <ul id="app"></ul>
  3.     <script>
  4.         var arr = [];
  5.         var input = document.getElementById("input");
  6.         var app = document.getElementById("app");
  7.         input.onkeydown = function (event) {
  8.             if (event.keyCode == 13) {
  9.                 if (arr.indexOf(this.value) == -1 && this.value!="") {
  10.                     arr.push(this.value);
  11.                     var li = document.createElement("li");
  12.                     li.innerHTML = this.value;
  13.                     app.append(li);
  14.                 }
  15.                 console.log(arr)
  16.             }
  17.         }
  18.     </script>

7-2实现从一个数组中获取想要的任意元素

  1.  <script>
  2.         var obj=[
  3.             {name:"ming",age:18,skill:"js"},
  4.             {name:"chen",age:18,skill:"vue"},
  5.             {name:"zheng",age:18,skill:"jquery"},
  6.         ]
  7.         var arr=[];
  8.         for(var i=0;i<obj.length;i++){
  10.             // var name=obj[i].name;
  11.             // var skill=obj[i].skill;
  12.             var{name,skill}=obj[i];//解构
  14.             //键和值(key:value)相同的时候可以只写一个
  15.             arr.push({
  16.                 name,//name:name,
  17.                 skill//skill:skill
  18.             })
  19.         }
  20.         console.log(arr)
  21.     </script>

7-3实现界面切换

  1.  <style>
  2.         .parent {
  3.             position: relative;
  4.         }
  5.         .parent>div{
  6.             width: 200px;
  7.             height: 200px;
  8.             position:absolute;
  9.         }
  10.         .html{
  11.             background-color: red;
  12.             z-index: 100;
  13.         }
  14.         .css{
  15.             background-color: yellow;
  16.         }
  17.         .current{
  18.             color:blue;
  19.         }
  20.     </style>
  21. </head>
  23. <body>
  24.     <ul>
  25.         <li class="current">html</li>
  26.         <li>css</li>
  27.     </ul>
  28.     <div class="parent">
  29.         <div class="html">
  30.             html
  31.         </div>
  32.         <div class="css">
  33.             css
  34.         </div>
  35.     </div>
  36.     <script>
  37.         var lis = document.getElementsByTagName("li");
  38.         var divs=document.querySelectorAll(".parent div")
  39.         for (let i = 0; i < lis.length; i++) {
  40.             lis[i].index = i;//获取元素下标
  41.             lis[i].onclick = function () {
  42.                 //1.遍历让所有的li移除class="current"
  43.                 for (let i = 0; i < lis.length; i++) {
  44.                     lis[i].classList.remove("current");
  45.                 }
  46.                 //2.让当前的元素添加class="current"
  47.                 this.classList.add("current");
  48.                 console.log(this.index)
  50.                 //3让所有的div隐藏
  51.                 for(let i=0;i<divs.length;i++){
  52.                     divs[i].style.display="none"
  53.                 }
  54.                 //4.让对应的下标的div显示
  55.                divs[this.index].style.display="block";
  56.             }
  57.         }
  58.     </script>