10.17前端笔记

1.数组
    
      //一维数组
        var arr = [1,2,3,4,5,6,7];
        for (var i = 0; i < arr.length;i++){
            console.log(arr[i]);
        }

        // 二维数组
        var arr = [["哈哈","小乔","孙策"], ["1" ,"2","3"] , ["周一" , "周二" , "周三"]] 
        console.log(arr[0]);//["哈哈","小乔","孙策"]
        console.log(arr[1]);//["1" ,"2","3"]
        console.log(arr[2]);//["周一" , "周二" , "周三"]
        console.log(arr[0][0]);//"哈哈"
        console.log(arr[1][1]);//"2"
        console.log(arr[2][1]);//"周二"

        // 三维数组
        var arr = [["哈哈","小乔","孙策"], ["1" ,"2","3"],["周一",[undefined , 1 , true ,false]]]
        console.log(arr);
        console.log(arr[2][1][2])

2.双重for循环

        for(var i = 0; i < 5; i++){//i=0,1,,2,3,4
            for(var j = 0; j < 3; j++){
                console.log("文字")
            }
        }

        // 双重for循环数组
        var arr = [
            ["哈哈","小乔","孙策",null],//4
             ["1" ,"2","3"],//3
             ["周一","周二","周三"],//3
             [true , false]//3

        ];
         for(var i = 0; i < 3; i++){//外层循环 i= 0 1 2
            for(var j = 0; j < 3; j++){
                console.log(arr[i][j]);
            }
        }

        // 循环次数根据lengtn确定
        for (var i = 0; i < arr.length; i++){
            for (var j = 0; j < arr[i].length; j++){
                console.log(arr[i][j]);
            }

3.while循环
      
         1.初始化循环变量
                 wnile(循环结束条件){
                    重复执行的代码（循环体）
                    更新循环条件
                 }
        // 输出1-10之间的数
        var i = 1;
        while (i <= 10){
            console.log("while" , i);
            i++

        }

4.do-while循环 
       
         1.初始化循环变量
          do{
              循环体；
              更新循环变量；
          }while（循环判断条件）
        
        // 1-10之间的数
        var i = 1;
        do{
            console.log(i);
            i++

        }while(i <= 10)

5.while和do-while的区别？
       
        while:先判断后执行，如果初始条件为false 循环体一次也不执行
        do-while：先执行后判断，如果初始条件为false 循环体至少会执行一次

6.break和continue
        
    // break 结束后面整个循环
        for(var i = 1; i <= 10; i++){
            // 吃到第五个水饺的时候 碗里掉了一个苍蝇
            if(i == 5){
                console.log("掉进去一个苍蝇");
                break;//结束后面整个循环
            }
            console.log("这是第" + i + "个水饺") 
        }
    // continue 结束本次循环
        for (var i = 1; i <= 10; i++){
            if(i == 5){
                console.log("这个水饺掉了");
                continue;//结束本次循环
            }
            console.log ("这是第" + i + "个水饺")
        }
    
7.json数据和for-in
    (1)json数据:JSON数据/object类型数据/对象类型：一组无序的，没有长度的数据;
        属性值/value/键值：可以是任意数据类型
        {
        "属性名":属性值,
        "属性名"：属性值,
        属性名:属性值,
        key:value,
        键名：键值
        }
        建议：属性名带"" 值和值之间用逗号隔开
        获取属性值:obj.属性名
        注意1:obj后面跟的就是属性名,没有变量的概念 如果跟的是变量 用[]代替 对象名[变量名]
        注意2:注意2:style中碰见变量,也是[]代替
        设置对象中的属性
        直接设置属性名 对象名.属性名 = 值;
   (2)for-in
            对象：是一组无序的 没有长度的数据
            for-in:遍历对象
            for(var 变量名 in 循环对象){
            循环体
            }
8.this
        (1)为什么使用this?
        点击谁 就将谁的文本内容输出
        i为什么输出10
        因为for循环只是添加事件,并不会执行事件中的代码
        (2)this的概念
        this:这个
        概念：在不同的地方 代表的值不同 取决于当前函数被调用时所处的环境
        事件处理函数：标签.事件类型= function(){ }
        在事件处理函数中使用this this指向当前触发事件的对象

9.自定义属性

        属性分类
        固有属性 本身自带的属性 class id style src alt等等
        操作固有属性 取赋值一体化 标签.属性名 class需要改成className
        自定义属性
        (1)如何设置自定义属性?
        直接在标签上添加属性,在结构上能看到 但是在js中无法获取
        通过js设置 在结构上看不到 但是可以在js中使用 标签.属性名 = 值

10.单组开关灯效果

        单组开关等实现步骤
        现象:一个事件中有2种状态,此时就可以使用开关灯效果
11.多组开关灯效果

        问题1:在点击事件中,可以拿到oDiv[i]吗
        解决:i的值始终都是4 所以用this代替oDiv[i]
        问题2:在交叉点击div的时候 出现bug
        解决:所有的div共用了一个判断条件tag,给每个div都单独设置一个判断条件