js custom property value and an index (2019-06-27)

review

• Process control: sequential structure \ branch structure \ loop structure

• The if statement

     1- if(条件){  条件成立执行的语句          }
     2- if(条件){   条件成立执行的语句    }else{   条件不成立执行的语句     }
     3- if(条件){ ... }else if( 条件 ){ ... } .... else{   ...   }
  
  

• switch statement

  • switch between variable and case statement is an absolute comparison, the equivalent of "==="

      var a = '1';
      swicth(a){  
          case 1 : 代码;break;
          case 2 : 代码;break;
          case 3 : 代码;break;
          ...
          default:代码;
      }
  

• for loop

      for(var i = 0; i < 10; i++){
          console.log(i);
      }
      console.log(i); //10
  
      //遍历数组
      var ary = [2,3,4,5];
      for(var i = 0; i < ary.length; i++){
          console.log(ary[i]);
      }
      //批量生成标签
      var str = '';
      for(var i = 0; i < 100; i++){
          str += '<div></div>';
      }
  

• Method to get the elements

  • 1-var oBox = document.getElementById ( 'box'); // single element (DOM object)

        oBox.style.width = "100px";
        oBox.onclick = function(){   }
    

  • 2-var aDiv = document.getElementsByTagName('li');

        var aDiv = oBox.getElementsByTagName('li');
        // 类数组 [li,li,li]
        for(var i = 0; i < aDiv.length; i++ ){
             aDiv[i].style.width = '100px';  
             aDiv[i].onclick = function(){
    
                 this.style.width = "100px";
    
             }
        }
    

  • 3-var aDiv = document.getElementsByClassName('red');

• Output 1-alert (); 2- console.log (); console.dir (); // print object-document.write details. 3 ();
  - write to the tag body, only the operation inside the body content - you can write text and labels - if executed first js would have been written before the label, if the execution is added at the end of body - If placed inside the event will overwrite the previous content inside body

(A) cycle

• 1-while loop

      初始化循环变量;
      while(循环条件){
          循环体;
          更新循环变量;
      }
  

• 2-do-while

  • And distinction while when the conditions are not satisfied, do-while will be executed once

```
    初始化循环变量;
    do{
        循环体;
        更新循环变量;
    }while(循环条件);

```
- 3- continue :结束本轮循环,继续下一轮循环
- 4- break : 跳出整个循环

(B) for in loop

• 1- object manipulation

     var obj = {
          name:'优就业',
          age:18,
          1:'aaaa',
      };
      //查看属性值
      console.log(obj.age);
      // 添加属性
      obj.city = "北京";
      console.log(obj);
      //修改已有的属性值
      obj.age = 19;
      console.log(obj);
      //删除属性
      delete obj.name;
      console.log(obj);
  
      //当对象属性名是数字时,需要 obj[数字]
      console.log(obj[1]);
  
     console.log( obj['age'] );
     //如果属性名使用的是变量,也需要用obj[变量名]访问
     var a = 'age';
     console.log(obj[a]); 
  

• 2- for in loop

      for(var key in obj){
          //key是一个变量,代表的是对象的属性名
          //obj代表要遍历的对象
          //obj[key] 代表属性值
      }
  

  • for in ascending priority loop traversal numeric attributes, other attributes defined sequence traversal

(C) in the event of this

• 1- Why events which need to use this?

      var aLi = document.getElementsByTagName('li'); //[li,li,li]
      for(var i = 0; i < aLi.length; i++){
          aLi[i].onclick = function(){
              console.log(i); 
              // 因为用户点击时,for循环早已执行完毕,i最终的值是3,再取i的时候永远是3,所以不能使用i
              // 在批量绑定事件的事件处理函数里面使用this代表触发事件的那个元素
              this.style.border = "1px solid black";  
          }
      }
  
  

• 2- how i can not be used to solve the problem of?

      for(var i = 0; i < aLi.length; i++){
          aLi[i].index = i;  //给每个li设置一个自定义属性index,用来存li的索引
          aLi[i].onclick = function(){
              console.log(this.index); // 事件发生时通过this.index访问当前对象的索引值
          }
      }