学习日志

今天做了几个小案例，巩固自己JavaScript基础

案例:排他思想

        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>
        <button>按钮6</button>

/*
            1、获取所有的元素
            2、首先先排除掉其他人，然后才能设置自己的样式，种就是排他思想
            */
var btns=document.getElementsByTagName('button')
            for(var i=0;i<btns.length;i++){
                btns[i].onclick=function(){
                    for(var i=0;i<btns.length;i++){
                        btns[i].style.backgroundColor='';
                    }
                    this.style.backgroundColor='red';
                    console.log(1)
                }
            }

案例：表单全选取消全选

<div id="wrap">
            <table>
                <thead >
                    <tr>
                        <th>
                            <input class="k" type="checkbox" id="cbAll"/>
                        </th>
                        <th>商品</th>
                        <th>价格</th>
                    </tr>
                </thead>
                <tbody id="tds">
                    <tr>
                        <td>
                            <input class="k" type="checkbox"/>
                        </td>
                        <td>iphone</td>
                        <td>8000</td>
                    </tr>
                    <tr>
                        <td>
                            <input class="k" type="checkbox"/>
                        </td>
                        <td>ipad Pro</td>
                        <td>5000</td>
                    </tr>
                    <tr>
                        <td>
                            <input class="k" type="checkbox"/>
                        </td>
                        <td>ipad Air</td>
                        <td>2000</td>
                    </tr>
                    <tr>
                        <td>
                            <input class="k" type="checkbox"/>
                        </td>
                        <td>Apple Watch</td>
                        <td>2000</td>
                    </tr>
                </tbody>
            </table>
        </div>

var cbAll=document.getElementById('cbAll')//获取标题栏的复选框
            var tds=document.getElementById('tds').querySelectorAll('input')//获取下面四个复选框
            cbAll.onclick=function(){
                console.log(this.checked)//通过check属性来判断它的状态
                for(var i=0;i<tds.length;i++){
                    tds[i].checked=this.checked;
                }
            }
            for(var i=0;i<tds.length;i++){
                tds[i].onclick=function(){
                    var flag=true;
                    console.log(this.checked)//通过checked检查状态
                    for(var i=0;i<tds.length;i++){
                        if(!tds[i].checked){
                            flag=false;
                        }
                    }
                    cbAll.checked=flag;
                }
            }

案例：换肤效果

 <ul class="baidu">
          <li><img src="../img/1.jpg" ></li>
          <li><img src="../img/2.jpg" ></li>
          <li><img src="../img/3.jpg" ></li>
          <li><img src="../img/4.jpg" ></li>
 </ul>

 var imgs=document.querySelector('.baidu').querySelectorAll('img')
          for(var i=0;i<imgs.length;i++){
              imgs[i].onclick=function(){
                  console.log(this.src)//点击后获取图片的路径
                  document.body.style.backgroundImage='url('+this.src+')';
              }
          }

今日感受

感觉js基础很薄弱，需要多多的练习，多多思考。