tab切换栏，淘宝图关闭，精灵图遍历，onfocus/onblur, setAttribute, getattribute

目录

1 淘宝图关闭

2 采用驼峰命名方式

3 精灵图遍历 

4 光标聚焦与去聚焦

5 提示密码输入正确与否

6  选择按钮变颜色（排他思想）

7 换皮肤效果

8 复选框一个选中全部选中

9 tab栏切换很重要

1 淘宝图关闭

通过id获取元素：document.querySelector('#myid');

通过类名获取一组元素：document.querySelectorAll('.myClass');

通过标签名获取元素：document.querySelectorAll('div')

1 样式修改少：element.style行内样式操作

2 样式多：element.className类命样式操作

<div style="width:100px;">（这是样式里的最强形式）

同样可以修改fontSize

如果js修改style样式操作，产生行内样式，css权重高

思路：css 和html部分：html里摆放一个大盒子，大盒子里包括一张图像和一个#

<div class="box">
        <img src="images1/wx_cz.jpg" alt="">
        <i>#</i>
    </div>

<style>
        /* 一个图片，定位一个标签 */
        i {
            font-style: normal;
        }

        .box {
            position: relative;
            width: 100px;
            margin: 100px auto;
        }

        .box i {
            position: absolute;
            top: -5px;
            left: -5px;

        }
    </style>

JavaScript部分：

<script>
        var ele2 = document.querySelector('.box');
        //按按钮，整个box容器一起消失
        var ele1 = document.querySelector('i');
        ele1.onclick = function () {
            ele2.style.display = 'none';
        }
    </script>

2 采用驼峰命名方式

var ele=document.sq('.box');
ele.onclick = function() {
	this.style.backgroundColor = 'purple';
	 <!-- 注意这里的this指的就是onclick前面指的元素，这里就是ele -->
}

3 精灵图遍历 

注意是position里的以及index需要加上px

<script>
     var lis = document.querySelectorAll('li');
     for(var i=0;i<lis.length;i++){
        var index=i*44;
        lis[i].style.backgroundPosition = '0 -'+index+'px';
     }
   </script>

4 光标聚焦与去聚焦

光标不在的时候如果没输入则显示灰色的搜索两个字，光标在的时候搜索两个字消失字变成黑色

<style>
        input {
            height: 30px;
            width: 100px;
            outline: none;
        }
    </style>

<input type="text" name="" id="" value="搜索">

<script>
        var ele1 = document.querySelector('input');
        ele1.onfocus = function () {
            if (this.value === '搜索')
                this.value = '';
            this.style.color = 'black';
        }
        ele1.onblur = function () {
            if (this.value === '')
                this.value = '搜索';
            this.style.color = '#999';
        }
    </script>

5 提示密码输入正确与否

输入密码小于6位，cursor onblur时候提示错误；

输入密码大于6位，cursor onblur时候提示正确

注意p标签本来是块级元素

<style>
        .message {
            color: black;
        }

        .wrong {
            color: red;
        }

        .right {
            color: green;
        }

        p {
            display: inline-block;
        }
    </style>

<!-- 一个大框里一部分是输入的input，还有一部分是p里存放文字 -->
    <div class="register">
        <input type="password" name="" id="">
        <p class="message">请输入6-16密码</p>
    </div>

<script>
        var ele1 = document.querySelector('input');
        var ele2 = document.querySelector('p');
        //写p或者.message都可以
        ele1.onblur = function () {
            if (ele1.value.length < 6) {
                alert('wrong');
                ele2.className = 'message wrong';
                ele2.innerHTML = 'input is wrong';
            }
            else {
                alert('right');
                ele2.className = 'message right';
                ele2.innerHTML = 'input is right';
                //这里是主要错因，innerhtml直接赋值
            }
        }

    </script>

6  选择按钮变颜色（排他思想）

<style>
        button {
            width: 50px;
            height: 50px;
        }
    </style>

<button>1</button>
    <!-- 行内元素 -->
    <button>2</button>
    <button>3</button>
    <script>
        var bts = document.querySelectorAll('button');
        for (var i = 0; i < bts.length; i++) {

            bts[i].onclick = function () {
                for (var j = 0; j < bts.length; j++) {
                    // for放在这里是每次点击后将所有颜色清空，
                    // 如果for放在onclick之前就不会每次点击都会清空颜色了
                    // 上一次的会累积到下一次
                    bts[j].style.backgroundColor = '';
                }
                this.style.backgroundColor = 'purple';
            }
        }
    </script>

1 ）操作元素内容 innerhtml（标准，记住后面直接引号加内容）/innerText

2） 常见元素属性：style.color；（src href，title，alt）

3 ）表单元素属性 value.length （type，value，disabled）

4 ）元素样式属性 onfocus/onblur （样式少element.style/className样式多）

7 换皮肤效果

中间四个略缩图（ul和li结构），点击其中一个背景颜色就变成这个

ul（无序列表）和li（列表项）通常被视为块级元素

注意图像，想在给定容器里等比例缩小存放，应该

路径到img {

width:100px;
}

三张图像在外容器里，

外容器ul {

overflow:hidden;（也是浮动清除一种）

width:400px;

}

真的有了width才能margin居中

<style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            background: url(images/1.jpg) no-repeat center;
        }

        ul {
            overflow: hidden;
            /* height: 50px; */
            width: 424px;


            /* 400+6*3+6=424 */
            /* height: auto; */
            margin: 100px auto;


        }

        ul li {
            float: left;
            /* width: 80px; */
            /* height: auto; */
            list-style: none;
            margin: 0 3px;
            background-color: transparent;
            padding-top: 5px;
        }

        ul li img {
            width: 100px;
            /* 真的多亏了这一句图片终于略缩图了 */
        }
        
    </style>

<ul>
        <li><img src="images/1.jpg" alt=""></li>
        <li><img src="images/2.jpg" alt=""></li>
        <li><img src="images/3.jpg" alt=""></li>
        <li><img src="images/4.jpg" alt=""></li>
    </ul>
    <script>
        var lis = document.querySelector('ul').querySelectorAll('img');
        // 错误在：document.querySelectorAll('li').querySelector('img'),必须要选中所有图片
        for (var i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                // body.style.background = 'url(' + this.src + ')';
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>

8 复选框一个选中全部选中

所有框都选中复选框才自动选上,鼠标经过tr行，当前行变背景颜色，鼠标离开去掉背景颜色

 <style>
        table {
        height: 200px;
        width: 300px;
        margin:100px auto;
        border-collapse:collapse;
        text-align:center;
        border: 1px solid #ccc;
    
        }
        td, th {
            padding:2px;
            border:1px solid #ccc;
        }
        /* 注意这里写tr没有用 */
    </style>

<table>
      <thead>
        <tr>
            <th>
                <input type="checkbox" name="" id="unq">

            </th>
            <th>
                商品
            </th>
            <th>
                价钱
            </th>

        </tr>
      </thead>
      <tbody id="shenme">
        <tr>
            <td>
                <input type="checkbox" name="" id="">
            </td>
            <td>
                iPhone8
            </td>
            <td>
                8000
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="" id="">
            </td>
            <td>
                iPad Pro
            </td>
            <td>
                5000
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="" id="">
            </td>
            <td>
                iPad Air
            </td>
            <td>
                2000
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="" id="">
            </td>
            <td>
                Apple Watch
            </td>
            <td>
                2000
            </td>
        </tr>
    </table>
        <script>
            var ele=document.querySelector('tbody').querySelectorAll('tr');
            for(var i=0;i<ele.length;i++)
            {
                ele[i].onmouseover=function() {
                    
                    this.style.backgroundColor='pink';
                }
                ele[i].onmouseout = function() {
                    this.style.backgroundColor='';
                }
            }
           var ele1 = document.querySelector('#unq');
           var ele2 = document.querySelector('tbody').querySelectorAll('input');
          ele1.onclick= function() {
            for(var t=0;t<ele2.length;t++)
            ele2[t].checked=this.checked;
          }
          //实现th的一个按钮点击后所有框框都被选中


           for(var z=0;z<ele2.length;z++){
            ele2[z].onclick= function() {
               
                var flag=true;
                for(var k=0;k<ele2.length;k++)
                {
                    if(! ele2[k].checked)
                    {
                        flag=false;
                        break;
                    }
                }
                ele1.checked=flag;
//通过flag实现只要所有框选中了th的框也被选中
            }
           }


        </script>

注意最后一句的ele1.checked=flag

运用一个flag变量，这里两个循环意思是，但凡在tbody里的checkbox被人点击了都要检查一遍是否所有复选框都被选中，如果是，则thead里的复选框也被选中

发生错误：循环里变量最好还是换成不同的

设置变量控制全选是否选中

属性值：

1. 设置元素属性值

element.属性=‘值‘

• div.getattribute('')（自定义属性值）
• div.setattribute('index', 2)

element.setAtrribute('属性'，‘值’)；针对自定义属性

div.setattribute('class', 'footer');

class写的就是class

element.removeAttribute(‘属性’)

div.removeattribute('index');

9 tab栏切换很重要

<style>
        * {
            margin:0;
            padding:0;
        }
       li {
	list-style:none;
}
.tab_list {
	height:39px;
	border: 1px solid #ccc;
	background-color:#f1f1f1;
}
.tab_list li {
    float:left;
    padding:0 20px;
    height:39px;
    line-height:39px;
    text-align:center;
}
.tab_con {
    padding-top:20px;
}
.item {
display:none;
}
.change {
    background-color: pink;
    cursor:pointer;
}

    </style>

<div class="tab">
        <div class="tab_list">
            <ul>
                <li class="change">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（5000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display:block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>


        </div>
    </div>
    <script>
        var ele1 = document.querySelector('.tab_list').querySelectorAll('li');
        var ele2 = document.querySelector('.tab_con').querySelectorAll('.item');
        for(var i=0;i<ele1.length;i++)
        {
            ele1[i].onclick=function() {
                for(var j=0;j<ele1.length;j++)
                {
                    ele1[j].setAttribute('index',j);
                    ele1[j].className='';
                }
                this.className='change';
                var index=this.getAttribute('index');
                for(var z=0;z<ele2.length;z++)
                {
                    ele2[z].style.display='none';
                }
                ele2[index].style.display='display';
            }
        }
    </script>

自定义属性：

通过getattribute获取

Js里的Setattribute设置

H5开始要求自定义数据使用data-开头的名字

eg: <div data-index='2' data-list-name="andy"></div>

注意这里listName用驼峰命名法

或者通过js设置：element.setAttribute('data-index', 2)

div.setAttribute('data-time', 20);

dataset指把自定义的集合全拿过来，存着所有以data开头的自定义属性

注意.后面就不用跟data了，因为前面dataset已经包括data了

element.dataset.index

div.dataset.index或者element.dataset['index']

（这里element取的div）

console.log(div.dataset.listName)

或者div.dataset['listName']

区分：对于getattribute来说写什么样的自定义属性都能被获取，但是dataset只能获取data-开头的自定义属性