javascript-排他思想+节点操作

排他思想

1. 所有元素全部清除样式
2. 给当前元素设置样式
3. 注意顺序，先干掉其他人，再设置自己

 

案列：百度换肤

这个案例练习的是给一组元素注册事件 给4个图片利用循环注册点击事件 当我们点击这个图片，让我们页面背景改为当前的图片 核心算法：把当前这个图片的src路径取过来，给body做背景即可

表单中全选案例

1. 全选和取消全选做法：让下面所以复选框的checked属性跟随全选按钮即可
2. 下面复选框需要全部选中，上面的全选才能选中：给下面所以复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没有没选中的，如果有一个没选中的，上面全选就不选中。
3. 设置一个变量来控制全选或不全选

        

            

                

                    

                        
                    
                    
商品
                    
价钱
                
            
            

                

                    

                        
                    
                    
iPhone8
                    
8000
                
                

                    

                        
                    
                    
mac
                    
12000
                
                

                    

                        
                    
                    
watch
                    
2000
                
            
        
    
    

自定义属性操作

获取属性值/设置属性值/移除属性值

区别 第一种方法用于获取内置属性值（元素本身自带的属性） 第二种方法主要获得自定义属性  

淘宝切换栏

 

        

            

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

            
商品介绍模块内容
            
规格与包装模块内容
            
售后保障模块内容
            
商品评价模块内容
            
手机社区模块内容

        
    
    

H5自定义属性

目的：为了保存并使用数据 ，有些数据可以保存到页面中而不用保存到数据库中 自定义属性获取通过getAttribute（‘属性’）获取。 但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性

1.设置H5自定义属性

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

节点操作

        
no.1
        
no.2
        
no.3
        
no.4
    
    

创建节点增加节点

123
    

发布留言案例

123
    发布