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类命样式操作

（这是样式里的最强形式）

同样可以修改fontSize

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

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

        
        #
    

JavaScript部分：

2 采用驼峰命名方式

var ele=document.sq('.box');
ele.onclick = function() {
	this.style.backgroundColor = 'purple';
	 
}

3 精灵图遍历 

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

4 光标聚焦与去聚焦

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

5 提示密码输入正确与否

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

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

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

    

        
        
请输入6-16密码
    

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

1
    
    2
    3
    

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居中

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

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

      

        

            

                

            
            

                商品
            
            

                价钱
            

        
      
      

        

            

                
            
            

                iPhone8
            
            

                8000
            
        
        

            

                
            
            

                iPad Pro
            
            

                5000
            
        
        

            

                
            
            

                iPad Air
            
            

                2000
            
        
        

            

                
            
            

                Apple Watch
            
            

                2000
            
        
    
        

注意最后一句的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栏切换很重要

        

            

                
商品介绍
                
规格与包装
                
售后保障
                
商品评价（5000）
                
手机社区
            
        
        

            

                商品介绍模块内容
            
            

                规格与包装模块内容
            
            

                售后保障模块内容
            
            

                商品评价（50000）模块内容
            
            

                手机社区模块内容
            


        
    
    

自定义属性：

通过getattribute获取

Js里的Setattribute设置

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

eg:

注意这里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-开头的自定义属性