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

Posted 2022-02-18 didamehulayou

复习

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

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