2020-12-17

day04笔记

***document.write和innerHTML的区别？

共同点：都可以识别标签，都可以改变body标签的内容

• 区别：

  • innerHTML会覆盖

  • document.write：写入的时候文档已经加载完成，会重绘文档-- 覆盖之前的内容。写入的时候文档没有加载完，不会覆盖原有的内容

• for循环：可以让特定代码执行指定的次数

  语法：for(初始化循环变量;循环条件;更新循环变量){ 循环体 }

2.循环

2.1 for循环嵌套

• 图形

   //外循环控制行
   for(var i = 1;i<=9;i++){
       //内循环控制列
       for(var j = 1;j<=i;j++){
           document.write(j+" * " + i +" = "+i*j+"&nbsp;&nbsp;&nbsp;");
       } 
       document.write("<br>");
   }

   

• 操作标签

   //二维数组
   var arr = [
       ["我和我的家乡","八佰"],
       ["一人之下","大鱼海棠","秦时明月","柯南"],
       ["喜羊羊","熊出没","猪猪侠","巴拉巴拉小魔仙","海绵宝宝"]
   ];
   ​
   var oUl = document.getElementsByTagName("ul");
   ​
   //外循环控制父元素，内循环控制子元素
   for(var i = 0;i<oUl.length;i++){
       var array = arr[i];
       //内循环控制子元素,根据数据生成对应个的li
       for(var j = 0;j<array.length;j++){
           oUl[i].innerHTML += "<li>"+array[j]+"</li>";
       }
   }

  2.2 while、do-while

  for循环的不同写法

   //for:打印1-10
   var i = 1;
   for(;i<=10;){
       console.log("for"+i);
       i++;
   }

  while

   ​
   //while
   //1.初始化循环变量
   var j = 1;
   while(j>10){//循环条件
       //循环体
       console.log("while"+j);
       //更新循环变量
       j++;
   }

  do-while

   //do-while
   //1.初始化循环变量
   var k = 1;
   do{
       //循环体
       console.log("dowhile"+k);
       k++;
   }while(k>10);

   

  2.3 跳出循环

  break：结束循环

  continue：跳出本次循环

    var arr = [
        {"name":"小夏","c":101},
        {"name":"老夏","c":80},
        {"name":"小唐","c":30},
        {"name":"小芳","c":80},
        {"name":"过来一下","c":40}
    ]
    //遍历数组，找到第一个人不及格的人，循环结束
    for(var i = 0;i<arr.length;i++){
        if(arr[i].c < 60){
            break; //结束循环,后面所有的操作都不会再执行
        }
        console.log(arr[i]);
    }
   ​
   //1.遍历数组，跳过所有不及格的人
   for(var i = 0;i<arr.length;i++){
       if(arr[i].c < 60){
           continue;//跳出本次循环，本次循环后面的代码不执行，直接进行下一次循环
       }
       console.log(arr[i]);
   }

  2.4 for-in

   var obj = {
       "name":"羊振疼",
       "age":5,
       "sex":"男",
       "height":180
   }
   //1.循环对象
   console.log(obj.length);//对象没有length，不能使用for循环进行遍历

  对象没有length，不能使用for循环进行遍历，js专门提供了一个遍历对象的方法for-in

  语法：for（变量 in 循环对象）{}

   

  3.this

  this：这个

  this：特殊对象，指向当前当用函数的对象（this没有一个固定的指向，所处的位置不同，代表的值不一样，取决于当前调用函数的对象）

  在事件函数中this指向触发事件的对象(点谁就是谁)

   var  oBtns = document.getElementsByTagName("button");
           
   //循环给button添加点击事件
   for(var i = 0;i<oBtns.length;i++){
       oBtns[i].onclick = function(){
           console.log(this.innerHTML); //this--当前被点击的标签
       }
   }

  4.自定义属性

   // 自定义属性：自己定义
   // 固有属性：系统提供的
   var oDiv = document.getElementsByTagName("div");
   ​
   console.log(oDiv[0].tag); //unfined  暂时获取不到直接写在标签上的自定义属性
   ​
   //1.在js中添加自定义属性 标签.属性名
   oDiv[0].tag = true;
   console.log(oDiv[0].tag);

  自定义属性应用场景

• 多个开关效果

   //1.获取元素
   var oDiv = document.getElementsByTagName("div");
   ​
   for(var i = 0;i<oDiv.length;i++){
       //给每一个标签都添加一个属于自己的标识
       oDiv[i].tag = true;
       oDiv[i].onclick = function(){
           if(this.tag == true){ //被点击的标签的标识
               //被点击标签的高度
               this.style.height = "100px";
               this.tag = false;
           }else{
               //被点击标签的高度
               this.style.height = "40px";
               this.tag = true;
           }
       }
   }

   

下标对应效果

<script>
 var arr = ["pink","skyblue","red","green"];
//[button button   button button]  下标对应
var oBtns = document.getElementsByTagName("button");

// oBtns[0].index = 0;
// oBtns[1].index = 1;
// oBtns[2].index = 2;
// oBtns[3].index = 3;


//1.点击对应的按钮，切换对应的皮肤
for(var i=0;i<oBtns.length;i++){
    oBtns[i].index = i; //把标签的下标作为属性存储在标签上
    oBtns[i].onclick = function(){
        console.log(this.index); //对应的标签，通过this.index获取对应的下标
        document.body.style.background = arr[this.index]; //下标
    }
}
</script>