DOM（二）：属性操作（自定义属性）、tab栏切换（重难点）

本文链接：https://blog.csdn.net/hdhhdhbsjxbdhvyg/article/details/136524012

一、几个重要案例

1.五个按钮，点击一个按钮亮，其余按钮全灭（排他思想）

点击一个按钮之后，用for循环实现其他的按钮全灭，再设置它自己亮

<style>
   .bianhua{
       /* border: 1px blue solid; */
       background-color: pink;
   }
    .bubian{
        border: '';
        background-color: '';
    }
</style>

<body>
   <button>按钮1</button>
   <button>按钮2</button>
   <button>按钮3</button>
   <button>按钮4</button>
   <button>按钮5</button>
    <script>
        var button=document.getElementsByTagName('button');//得到个伪数组，就可以for循环
        for(var i=0;i<button.length;i++)
        {
            button[i].onclick=function(){
                //正确方法是点了一个之后把所有的都重置，再给它自己加颜色
                for(var j=0;j<button.length;j++)
                {
                    
                        button[j].className='bubian';
                    
                    
                }
                this.className='bianhua';

            }
            //只有这个的话，点了它再点它其他的兄弟，俩人都变化，想要的效果是只有一个人
        }

    </script>

  
</body>

2.百度换肤

<style>
    body{
        background: url(1.jpg);
    }
    .box{
        width: 640px;
        height: 100px;
        margin: 100px auto;
        border: 1px solid;
    }
  .box div{
      width: 160px;
      height: 100px;
      float: left;
  }
  img{
      width: 160px;
      height: 100px;
  }

</style>

<body>
   <div class="box">
       <div><img src="1.jpg" alt=""></div>
       <div><img src="2.jpg" alt=""></div>
       <div><img src="3.jpg" alt=""></div>
       <div><img src="4.jpg" alt=""></div>
   </div>
    <script>
        var img=document.querySelector('.box').querySelectorAll('img');
        for(var i=0;i<img.length;i++)
        {
            img[i].onclick=function(){
                document.body.style.backgroundImage='url('+this.src+')';
            //console.log(this.src);
            }
        }
        
    </script>
  
</body>

注意点：最后body的image不能去等于url（this.img)因为url里面放的是链接，src才是呢

我写的时候把四个盒子的图片写到了css中的bcc，下面也获取的div元素，就出不来效果，而且在后面把小盒子的背景图给body的时候给不进去，主要是看点的最近的那个是什么，div属于img的父亲了，点的是img就得获取img

赋值得加引号（=的后面都是字符串）；

this.src需要进行拼接‘++’，引号‘’里面需要字符串，而这里是变量

this.src就是字符串，然后左右两边的东西就得用引号引起来也作为字符串

3.表格隔行变色

鼠标经过onmouseover，鼠标离开onmouseout

<style>
    *{
        padding: 0;
        margin: 0;
    }
    table{
        background-color: aqua;
        margin: 100px auto;
        border-spacing:0;
    }
    thead {
        /* background-color: pink; */
        border-bottom: 1px solid red;
    }
    tbody tr{
        background-color: rgb(248, 242, 233);
        border: none;
        padding: 0;
    }
    th{
        width: 100px;
    }
    

</style>

<body>
    <table>
            <thead>
                <tr>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>姓名</th>
                    <th>身高</th>
                </tr>
             </thead>
       
        <tbody>
            <tr>
                <th>女</th>
                <th>18</th>
                <th>a</th>
                <th>165</th>
            </tr>
            <tr>
                <th>男</th>
                <th>19</th>
                <th>b</th>
                <th>185</th>
            </tr>
            <tr>
                <th>女</th>
                <th>21</th>
                <th>c</th>
                <th>163</th>
            </tr>
            <tr>
                <th>女</th>
                <th>30</th>
                <th>d</th>
                <th>160</th>
            </tr>
    
        </tbody>
    </table>
  
    <script>
        var trs=document.querySelector('tbody').querySelectorAll('tr');
        for(var i=0;i<trs.length;i++)
        {
            trs[i].onmouseover=function(){
                this.style.backgroundColor='yellow';
             }
             trs[i].onmouseout=function(){
                this.style.backgroundColor='';
             }
        }
       
    </script>

4.表单全选框和复选框

<style>
    *{
        padding: 0;
        margin: 0;
    }
    table{
        background-color: aqua;
        margin: 100px auto;
        border-spacing:0;
    }
    thead {
        /* background-color: pink; */
        border-bottom: 1px solid red;
    }
    tbody tr{
        background-color: rgb(248, 242, 233);
        border: none;
        padding: 0;
    }
    th{
        width: 100px;
    }
    

</style>

<body>
    <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll">
                    </th>
                    <th>商品</th>
                    <th>价格</th>
                </tr>
             </thead>
       
        <tbody id="j_tb">
            <tr>
                <th>
                    <input type="checkbox">
                </th>
                <th>苹果15</th>
                <th>5999</th>
            </tr>
            <tr>
                <th>
                    <input type="checkbox">
                </th>
                <th>macbook</th>
                <th>10000</th>
            </tr>
            <tr>
                <th>
                    <input type="checkbox">
                </th>
                <th>ipad</th>
                <th>5200</th>
            </tr>
    
        </tbody>
    </table>

点一下全选后面全选上，取消之后后面全取消

var inps=document.getElementById('j_tb').querySelectorAll('input');
       var j_cbAll=document.getElementById('j_cbAll');
       var flag=0;
       j_cbAll.onclick=function(){
           for(var i=0;i<inps.length;i++)
           {
               inps[i].checked=this.checked;
           }
       }

点完所有小的之后，全选也会被勾选

我的思路：设置flag=1，如果有一个小的没被选上，flag=0，最后看看flag等于1就把全选框选上

for(var j=0;j<inps.length;j++)
       {
        inps[j].onclick=function(){
            console.log(this.checked)
            if(inps[j].checked!=checked)
           {
             flag=0;
           }
         }
       }
       if(flag==1)
       {
           j_cbAll.checked=true;
           console.log(j_cbAll.checked)
       }

小的选中之后能够打印出来true，三个都点完之后大的就没动静，我把大的打印一下看看选了没也不打印。

我的错误是第一个for循环下面设置的点击事件，我点了一个之后，首先我点的可能不是第一个小的，而且点完之后它可能还得再循环去看看它下面的如何。

正确的应该是，我点完一个小的之后，我就应该去看看其他的那几个小的有没有都被点上，如果都点上了，全选的就被选上，所以需要两个for循环，第一个控制我点第几个，第二个for循环看看其他的小的有没有都被选。

我的flag思路是对的，老师的写法是将flag写成true和false

for(var j=0;j<inps.length;j++)
       {
        inps[j].onclick=function(){
            for(i=0;i<inps.length;i++)
            {
                flag=true;
                //这个flag加在这里了，要不然上一局flase了到这儿还没变呢
                if(!inps[i].checked)
                {
                    flag=false;
                    break;
                    //就是说点完这个小的发现没都被点，就别留这儿了走吧
                }
            }
           j_cbAll.checked=flag;
           //我点完一个小的，点完了就得给我反馈，我点了这个到底能不能把全选的那个选上
          }
       }

二、自定义属性

1.获取属性值的方法：

区别：

	<div id="hh" index='1' class='hh'></div>
	var div = document.querySelector('div');
	console.log(div.id); //hh
	console.log(div.getAttribute('id'));  //hh
	console.log(div.getAttribute('index'));  //1，我自己设置的性质
	console.log(div.index);  //undefined

2.修改属性值的方法：

第二种还是只针对于自定义属性

在修改classname的时候（div .class），用第一种方法

<div id="hh"></div>
      <script>
          var div=document.querySelector('div');
          div.className='demo';
      </script>

注意：在用第二种方法的时候，属性那里必须是class，不要Name


     <div id="hh"></div>
      <script>
          var div=document.querySelector('div');
          div.className='demo';
          div.setAttribute('class','qqq');
      </script>

把前面那个覆盖了

3.移除属性

div.removeAttribute('index');

三、tab栏切换！！！

html,css

<style>
* {
    margin: 0;
    padding: 0;
    /* css3新增，padding不会撑大盒子 */
    box-sizing: border-box;
    /*所有元素的内外边距清除*/
}


li {
    list-style: none
        /*去掉列表的圆形点装饰*/
}
.tab{
    width: 1002px;
    height: 300px;
    background-color: pink;
    margin: 0 auto;
}
.tab_list{
    background-color: aliceblue;
    width: 1002px;
    height: 100px;
    border: 1px solid gray;
}
.tab_list ul li{
    float: left;
    width: 200px;
    line-height: 100px;
    text-align: center;
}
.normal{
    background-color: aliceblue;
    color: black;
}
.current{
    background-color: rgb(184, 9, 9);
    color: aliceblue;
}
.item{
    display: none;
}
.item:first-child{
    display: block;
}
</style>
   
  <body>
      <div class="tab">
          <div class="tab_list">
              <ul>
                  <li class="current">商品介绍</li>
                  <li>规格与包装</li>
                  <li>售后保障</li>
                  <li>商品评价（50000）</li>
                  <li>手机社区</li>
              </ul>
          </div>
          <div class="tab_con">
            <div class="item">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>
          </div>
      </div>

<script>
          var lists=document.querySelectorAll('li');
          var items=document.querySelectorAll('.item');
          for(var i=0;i<lists.length;i++){
            lists[i].setAttribute('index', i);
              lists[i].onclick=function()
              {
                  for(var j=0;j<lists.length;j++)
                  {
                      items[j].style.display='none';
                      lists[j].className='normal'
                  }
                  this.className='current';
                  var index = this.getAttribute('index');
                  items[index].style.display='block';
              }
          }
      </script>

我写的部分没有加index，最后那里就是item[i].style.display='block';

这样的话是可以实现点击list之后的变化，下面盒子里的文字出不来,如果我把this.className的this换成lists[i]的话也是出不来，然后我就在function函数之后加了个打印出来i，发现不管点击哪个打印出来的都是5，在for循环之后打印i的话，打开页面就自动显示0 1 2 3 4 5

然后我们就知道这是怎么进行的了，for循环在我们进入页面的时候就走完了，然后这五个list[0],

list[1],list[2],list[3],list[4],就在那儿等着呢，看谁被点了谁的函数就启动，但是那个时候的i已经成5了，所以要是想获取i就得在function之前，function之后的要不就拿个index当，要不就写this

四、H5自定义属性

1.自定义属性的目的

为了保存和使用数据，有些数据可以保存到页面中不用存数据库中。

有点类似于冒泡排序中的t，你需要的时候直接拿来用用它当替身，页面刷新就没了

2.H5规定，自定义属性以data-开头作为属性名并赋值

<li data-index="1">规格与包装</li>
li.setAttribute('data-time', '20');


//结果
<li data-index="1" data-time="20">规格与包装</li>

3.H5新增使用dataset对象获取自定义属性

除了li.getAttribute(‘data-index’);获取自定义属性外，H5还新增了li.dataset.index或者li.dataset[‘index’]这个要注意点后面是index而不是data-index，就是只写data-index后面的部分，只有ie11及以上才兼容，使用getAttribute比较多

dataset是一个集合的意思

如果li.dataset，就是把所有的自定义属性都以对象的形式显示出来

驼峰命名法：data-list-name改成li.dataset.listName