06_JS输入事件、数组、Tab栏切换

判断用户输入事件

• 正常浏览器 : oninput
• IE6、7、8支持的 ：onpropertychange

例：仿淘宝输入框

    
    
    
    


    

        
        
        买顶帽子防晒
    

数组 array

数组是做什么用的？var num = 10; 变量可以用来存储东西 。一个变量里面只能一个值。我们130人，想把我们每个人的人名存储，要用变量需要 130变量。这个时候可以考虑 数组
　　数组： 就是一个大变量， 它里面可以存储很多的值。

声明数组

var arr = [1,3,5,7,9];
var arr = new Array(1,3,5);

使用数组

• 使用的方法: 数组名[索引值];
• 索引号是从0开始的。

数组的长度

数组名.length;

遍历数组

        var arr = [1,2,3,4,5];
        for(var i = 0;i

优化写法

        var arr = [1,2,3,4,5];
        var len;
        for(var i = 0,len = arr.length;i

getElementsByTagName() 得到一个伪数组

例：隔行变色

    
    
    
    



    

        

            上证指数364110-50.16%
        
        

            上证指数364110-50.16%
        
        

            上证指数364110-50.16%
        
        

            上证指数364110-50.16%
        
        

            上证指数364110-50.16%
        
        

            上证指数364110-50.16%
        
        

            上证指数364110-50.16%
        
        

            上证指数364110-50.16%
        
        

            上证指数364110-50.16%
        
        

            上证指数364110-50.16%
        
    

例：全选和反选

    
    
    
    


    

        
        
        
    
    

        

            
选项: 
            
选项: 
            
选项: 
            
选项: 
            
选项: 
            
选项: 
            
选项: 
            
选项: 
            
选项: 
            
选项: 
            
选项: 
            
选项: 
            
选项: 
            
选项: 
            
选项: 
            
选项: 
        
    

js通过封装函数来优化

排他思想

排他思想：首先干掉所有人， 剩下自己额外设置

例：

通过自定义属性获取当前索引(基于上面的案例)

        window.onload = function(){
            var btns = document.getElementsByTagName("input");
            for(var i=0;i

例：Tab栏切换

    
    
    
    


    

        

            
        
        

            
首页
            
新闻时事
            
体育
            
明星八卦
            
城市服务
        
    

优化之后，通过函数封装，多个tab互不影响

    
    
    
    


    

        

            

                
首页
                
新闻时事
                
体育
                
购物
                
游戏
            
        
        

            
首页
            
新闻时事
            
体育
            
购物
            
游戏
        
    
    

        

            

                
首页
                
新闻时事
                
体育
                
购物
                
游戏
            
        
        

            
首页
            
新闻时事
            
体育
            
购物
            
游戏