js自定义属性和索引值（2019-06-27）

复习

• 流程控制: 顺序结构\分支结构\循环结构
• if语句

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

• switch语句
  • switch语句中变量和case之间是绝对比较 ,相当于 "==="

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

• for循环

      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>‘;
      }
  

• 获取元素的方法
  • 1-var oBox = document.getElementById(‘box‘); // 单个元素(DOM对象)

        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‘);
• 输出方式 1-alert(); 2-console.log(); console.dir(); //打印对象详细信息 3-document.write();
  - 在body标签里写入内容,只能操作body里面的内容 - 可以写入文本和标签 - 如果先执行js就会写在已有标签之前,如果后执行就是在body末尾添加 - 如果放在事件里面会覆盖body里面已有的内容

(一)循环

• 1-while循环

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

• 2-do-while
  • 和while的区别,当条件不满足时,do-while会执行一次

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

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

(二)for in 循环

• 1- 对象操作

     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循环

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

  • for in循环会优先按升序遍历数字属性,其他属性按定义的顺序遍历

(三) 事件里的this

• 1-为什么事件里面需要用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- 怎么解决不能使用i的问题?

      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访问当前对象的索引值
          }
      }

原文地址：https://www.cnblogs.com/didamehulayou/p/11098997.html