第四周第四天笔记

1.复习基础知识

• 循环
  • for循环：循环次数确定
    • 选项卡
    • 随机验证码
    • 去重
    • 获取当前元素下面的所有子元素
    • 隔行换色的九九乘法表
  • for..in循环：遍历普通对象的属性；
  • while循环：循环次数不确定
    • 随机验证码
    • 封装上一个哥哥元素
  • do...while循环，基本不用
  • 跟循环有关的：break, continue;
    • break:阻断循环执行；

    for(var i=0; i<=7; i++){
            alert(i);
            if(i==3){
                break;//当执行此次循环时，阻断循环执行，即i=4以后的都不执行；
            }
        }
    

    • continue:只跳过该次循环，其他循环正常运行；

    for(var i=0; i<=7; i++){
            if(i==3){
                continue;//当i=3时，执行continue，此次循环停止，直接执行i=4的循环；后面的语句不再执行；
            }
            alert(i);
        }
    

• 注意点：
  • 函数中，阻断程序执行，用的是return；
  • 循环中，阻断循环执行，用的是break；
  • 循环中，阻断该次循环，其他循环继续，用的是continue;
• 判断
  • if判断：
    • if...elseif...

      if(2)
          alert("true")
      else
          alert("false")
    

    • if(3) alert("true"); else alert("false");
    • if(x) alert(xxx)
  • 三目：条件?语句1：语句2；
  • switch中用的是===，属于严格比较；

    var n=3;
    seitch(n){
        case 1:
        alert(1);
        break;
        case 2:
        alert(2);
        break;
        case 3:
        alert(3);
        break;
        default:
        alert(4);
        break;
        }
  

• 运算符
  • 算术运算符： + - * / %;
    • 除了加号以外，其他运算符，可以进行隐式数据类型转换；
    • "+"号有两个功能：1）字符串拼接 2）运算；
  • 比较运算符：> >= < <= == === != !==
  • 逻辑运算符： && || ！
    • 用&&可以写if条件；
    • 用||可以写else条件；

       if(n==2){
           alert(true);
        }else{
        alert(false);
        }
      //可以通过&&与||来实现；
       n==2 && alert(true);//&&:当前面的条件成立的时候，才会走后面的语句；
       n!=2 || alert(false);//||:当前面的条件不成立的时候，才会走后面的语句；
    

    • ！在数据类型比较中，一旦遇到！，立即或优先进行布尔值的转换；
  • 赋值运算符：= += -= *= /= %=
    • "%="用于倒计时实例中，毫秒值与时分秒的转换；
• "=="的隐式数据类型比较
  • 对象==对象 对象比较的是地址，则[]==[] false;
  • 数字与对象：0==[]:为真；[]转换为"",再转换为0；
  • 数字与布尔值： 0==![]: 为真；当使用！时，优先进行判断，[]为真，![]为假，所以0==![]为真；
  • null==undefined;
  • NaN跟任何值都不相等，包括它自己；
• 浏览器信息
  • 获取方法：window.navigator.userAgent
  • 判断：通过查找信息中的特定字符串来判断浏览器种类，用indexOf()方法；
  • Chrome:谷歌浏览器；信息为：Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36
    • 判断条件：if(u_agent.indexOf("Chrome")>-1);
  • Firefox:火狐浏览器；信息为：Mozilla/5.0 (Windows NT 6.2; WOW64; rv:22.0) Gecko/20100101 Firefox/22.0
    • 判断条件：if(u_agent.indexOf("Firefox")>-1);
  • IE8:IE浏览器；
    • 判断条件：if(u_agent.indexOf("MSIE 8.0")>-1);
• DOM节点关系
  • elementnode.childNodes: 元素节点下的所有子节点，包括元素节点，空白节点，注释节点等；
  • elementnode.children: 元素节点下的所有元素子节点，只包括元素节点；
    • 兼容性问题：在IE8浏览器下，会包含注释节点，不兼容，若使用此方法，必须保证在所有子节点中不能包含注释；
  • 实例：目的获得一个元素节点下的所有元素子节点，首先判断浏览器种类，如果不是IE8浏览器时，使用children，如果是，则遍历所有子节点，判断其节点类型来排除掉除了元素节点以外，其他的节点；
  • nodeObject.previousSibling返回给定子节点的上一个哥哥子节点(包括空白节点，注释节点等)； 若不存在,则返回null;
  • nodeObject.previousElementSibling: 返回给定子节点的上一个元素子节点，兼容性不好，IE浏览器不支持；
  • 实例：1）封装一个函数，获取当前元素上一个哥哥元素；2）获取当前元素所有的哥哥元素组成的数组集合；

  
  内容1
  内容2
  内容3
  内容4
  内容5
  
  
  

• DOM动态操作
  • 创建元素节点：createElement()
    • 语法：document.createElement("标签名");
  • 创建文本节点：createTextNode()
    • 语法：document.createTextNode("文本内容");
    • 与innerHTML的区别：
      • createTextNode()方法添加的文本，为纯文本，不带格式，html标签会被看作文本处理；
      • innerHTML赋值方法，会保留文本的格式，会保留html标签，会起作用；
  • 在末尾附加节点：appendChild()：在父级节点的最后一个子节点后面添加一个新的子节点；通常用于给新建元素节点插入文本节点；
    • 语法：parentnode.appendChild(newnode);
  • 在指定节点前面插入节点：insertBefore()
    • 语法：parentnode.insertBefore(newnode,node1);即：在父级元素下的node1节点前插入newnode节点；
  • 删除节点：removeChild():删除父级元素下的子节点；
    • 语法：parentnode.removeChild(node);即：在父级元素下删除node子节点；
    • 注意：在进行removeChild()方法删除的子节点，虽不在DOM树中，但还存在内存中，想要彻底删除此节点，给其赋值为null;
  • 替换元素节点：replaceChild()
    • 语法：parentnode.replaceChild(newnode,oldnode)；即：将某元素下的oldnode节点替换成newnode;
    • 注意：当oldnode节点被替换后，所有与之相关的属性及内容都被移出；
  • 获得body元素节点方法：document.body;
  • 获得node1节点的父级节点的方法：node1.parentnode;
  • 克隆节点：cloneNode()：原节点中的属性名及属性值，全部复制；
    • 语法：node1.cloneNode(参数)
      • node1为需要克隆的节点；
      • 参数分为false和true;其中false为只克隆表层，不克隆里面内容；true为深度克隆，即内部内容也克隆；

  
  美好的一天
  
  
  

• 属性操作
  • "odiv.属性名"：获得odiv元素的属性值，或设置属性值；当属性名为变量时，不能用此方式；
  • odiv["属性名"]:获得odiv元素的属性值，或设置属性值；当属性名为变量时，不加双引号；
  • attribute():
    • elementNode.getAttribute("属性名"):获取元素节点属性名的属性值；
    • elementNode.setAttribute("属性名","属性值"):设置或修改元素节点属性名的属性值；
    • elementNode.removeAttribute("属性名"):删除元素节点上的属性；
  • "."设置自定义属性与attribute()方法设置的区别：
    • 1）通过点来设置自定义属性，在html标签中看不到，但是通过setAttribute()设置的属性可以看到；
    • 2）通过点获取元素身上已经定义好的自定义属性，不能拿到，但是通过getAttribute()可以获取到属性值；

    
    美好的
    
    
    

    • 注意：千万不要混搭；即：通过点设置的自定义属性，不要用getAttribute()方法来获取；通过setAttribute()方法设置的属性，不能用点来获取；

    
    美好的一天
    
    
    

  • innerHTML属性：获取或设置元素节点的文本内容
    • 语法：elementnode.innerHTML="内容";其中内容为带格式添加，标签会起作用；
  • 改变元素节点的CSS样式：
    • 语法：elementnode.style.property=new style;
    • 例：
      • 设置字体颜色：mycon.style.color="red";
      • 设置字体：mycon.style.fontFamily="宋体";
      • 设置字体大小：mycon.style.fontSize="10px";
    • 作用：用于设置或修改单一的样式；
  • 设置显示和隐藏
    • 语法：elementnode.style.display="value";如：mycon.style.display="block/none";
  • 设置或获得元素节点的class名
    • 语法：elementnode.className="类选择器名";
    • 作用：可以通过修改class名，来改变元素的所有样式类型；
• 打印
  • 打印对象身上的属性和方法：console.dir(对象)；
• 数据类型检测
  • typeof 用于基本数据类型检测；
  • obj1 instanceOf Object 前面的对象是否属于后面的类（类首字母大写）
  • obj.constructor 可以拿到所属的构造函数；
  • Object.prototype.toString.call(arg) 打印arg类的详细信息；
• NaN出现的情况：
  • Number()数据类型转换失败
  • 无效运算的时候；如：null+undefined undefined+undefined;
• undefined出现的情况：
  • 函数定义了形参，但没有赋值实参，获得的形参值为undefined;
  • 函数没有写return，或是写了return，但是未赋值；函数获得的值为undefined;
  • 当一个对象上的属性名不存在的时候，不会报错，会返回undefined;

• 严格转换与非严格转换
  • 严格转换Number();转换失败为NaN
    • 在Switch()中，判断使用严格比较"==="
    • Number(null)为0；其中null+10的值为10；但是null!=0;即alert(null==0)，弹出的结果为false;
    • Number(undefined)为NaN;
    • 算术运算中的使用
      • 加号"+"：1）字符串拼接（只要不是数字间相加，其余的全部拼接）；2）加法运算:全部是数字之间的加法；3）null+10的值为10；
      • 减号"-",乘号"*",除号"/",取余"%":全部进行数学运算，会默认进行数据转换（按照严格转换Number());
      • 比较：null参与进行算术运算时，会被严格转换为0；undefined参与算术运算时，会被严格转换成NaN，结果为NaN;
      • 例：("123px"+3)=123px3；("123px"*-/%3)=NaN; (null+10)=10;(null-10)=-10;(undefined+-x/%10)=NaN;0/0=NaN;
    • false转换为0；true转换为1；
    • []转换为0；
    • isNaN(参数):验证参数是否为非有效数字NaN，若为NaN则返回true;若不为NaN则返回false;
      • 如果isNaN函数的参数不是Number类型， isNaN函数会首先尝试将这个参数严格转换为数值，然后才会对转换后的结果是否是NaN进行判断。

    isNaN(NaN);       // true
    isNaN(undefined); // true
    isNaN({});        // true
    
    isNaN(true);      // false
    isNaN(null);      // false
    isNaN(37);        // false
    
    // strings
    isNaN("37");      // false: 可以被转换成数值37
    isNaN("37.37");   // false: 可以被转换成数值37.37
    isNaN("37,5");    // true
    isNaN('123ABC');  // true:  parseInt("123ABC")的结果是 123, 但是Number("123ABC")结果是 NaN
    isNaN("");        // false: 空字符串被转换成0
    isNaN(" ");       // false: 包含空格的字符串被转换成0
    
    // dates
    isNaN(new Date());                // false
    isNaN(new Date().toString());     // true
    
    isNaN("blabla")   // true: "blabla"不能转换成数值
                      // 转换成数值失败， 返回NaN        
    

  • 非严格转换：parseInt():转化为整数；parseFloat():保留小数转化；
• 其他数据类型转为布尔数据类型
  • Boolean()
    • 假："",0,NaN,null,undefined,false
    • 真：除了假都是真；
  • if(一个值) 会转成布尔；
  • if(表达式/比较) 会默认转成布尔；
• 其他数据类型转成字符串数据类型
  • 对象转字符串：toString()；
  • 数字转字符串：""+数字；用在时钟中的0变为00；
• 函数自带的参数机制：arguments;
  • 当函数中实参的个数不确定，获取所有的实参值，用arguments;
  • arguments为类数组，不能使用数组的方法；
  • arguments的属性：
    • arguments.callee():获取函数本身；
    • arguments.length():类数组长度；
  • 实例：

• 类数组包含两种：
  • htmlCollection 元素集合：tagName className name ...
  • arguments类数组
  • 所有的类数组，都不能使用数组的方法；
• 闭包思想：在函数调用时，会形成一个私有作用域，保护里面的变量不受外界的干扰，函数的这种保护机制，叫做闭包；
  • 选项卡中的使用：在for循环中，添加点击事件，i值无法保存
    • 通过闭包函数，将i值保存在自己的私有作用域中；
    • 设置自定义属性：将i值保存在自定义属性中；
      • 用点设置，在标签中，无法看到，但必须用点获取；
      • 用setAttribute()设置，在标签中会看到，但必须用getAttribute获取；用点获取不到；
• 普通对象：
  • 当定义普通对象时，乱序定义，但对象会重新排序，纯数字属性名以升序的形式排在前面，非纯数字属性名按照定义顺序排在后面；

   var obj={
          name:"guobin",
          age:18,
          sex:"nan",
          14:34,
          13:36,
          15:25,
      };
      //当定义普通对象时，乱序定义，但是当使用时，对象会重新排序，纯数字属性名以升序的形式排在前面，非纯数字属性名按照定义顺序排在后面；即定义对象后为obj={13: 36, 14: 34, 15: 25, name: "guobin", age: 18, sex: "nan"};
  

• 函数类型
  • 有名函数
    • 1)function fn(){}
    • 2)var fn=function(){}即将函数表达式赋给变量；
    • 调用函数用fn();
  • 匿名函数
    • 添加事件函数：oBtn.onclick=function(){}即将函数表达式赋值给事件；
    • 自执行函数：四种表达方式；

    (function(){})();
    ～function(){}();
    +function(){}();
    -function(){}();