js基础（十一）{快捷尺寸 ES5 数组方法 事件}

快捷尺寸

• clientWidth 获取内容宽 + 左右padding
• clientHeight 获取内容高 + 上下padding
• offsetWidth 获取内容宽 + 左右padding + 左右border宽度
• offsetHeight 获取内容高 + 上下padding + 上下border宽度

    /* 
        #div元素
        width: 100px
        height: 50px
        padding: 20px
        border: 20px solid red;
     */
    var div = document.getElementById("div");
    console.log(div.clientWidth); // 输出 140px 
    console.log(div.clientHeight); // 输出 90px 
    console.log(div.offsetWidth); // 输出 180px  内容宽 100 + padding 40 + border 40
    console.log(div.clientWidth); // 输出 130px  内容高 50 + padding 40 + border 40

快捷位置与距离

• offsetParent 定位父元素
  • 指的是自身元素相对于的定位元素 如果一个元素自身没有定位 也会找到祖先元素中的第一个拥有定位的元素 如果都没有 就是body
• offsetLeft 自己左边框外到定位父元素的左边框内 (IE8 到定位父元素的左边框外)
• offsetTop 自己上边框外到定位父元素的上边框内 (IE8 到定位父元素的上边框外)

ES5的数组方法

• forEach

  • ES5中的迭代数组的方式 叫做迭代器方法 循环方法
    • forEach 接受一个函数作为参数 函数有三个参数
      • 第一个表示数组的成员
      • 第二个表示数组的索引
      • 第三个表示数组本身

      // 定义一个数组
      var arr = ["张三", , , , null, "李四", "王五", "赵六"];
      // for 循环
      for (var i = 0; i < arr.length; i++) {
          console.log(arr[i]);
      }
      console.log(i);
      // for in 循环
      // for in循环 只会循环数组中的非empty内容
      for (var i in arr) {
          console.log(arr[i]);
      }
      // forEach
      arr.forEach(function(value, index, selfArr) {
          console.log(value, index, selfArr, this);
      })
  

• map

  • 映射方法 会根据原数组生成一个新数组 新数组的每一个成员是map接受的函数的返回值 该函数会多次调用

      var arr = [100, 200, 300, 400];
      var arr1 = arr.map(function(value, index, selfArr) {
          return  value * 1.3;
      });
      console.log(arr); // [130, 260, 390, 520]
  

• filter

  • 过滤方法 会根据参数将符合一定条件的成员过滤出来
  • 返回的是新数组 原数组不变

      var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  
      var arr1 = arr.filter(function(value, index, selfArr) {
          return value < 8;
      });
      console.log(arr1); // [1, 2, 3, 4, 5, 6, 7]
  

• some

  • 判定方法 判定数组中是否有符合某种条件的成员 如果有就是真 如果没有就是假

      var arr = [1, 2, 3, 4, 5];
      var result = arr.some(function(value, index, selfArr) {
          // 判定是否有字符串
          return typeof value === "string";
      });
      console.log(result); // false
  

• every

  • 判定方法 判定数组中是否都符合某一个条件 如果都符合 就是真 如果有任何一个不符合 就是假

      var arr = [1, 2, "3", 4, 5];
      var result = arr.every(function(value, index, selfArr) {
          // 判定是否都是number类型
          return typeof value === "number";
      });
      console.log(result); // false
  

事件

事件的组成

• 元素
• 事件类型
• 事件处理函数

事件对象

当事件触发的时候 会产生很多的信息 这些信息被封装成一个对象 并传递到事件处理函数中

     div.onclick = function(e) {
        //  e 就是事件对象 我们可以根据它获取到许多的信息
     }

事件对象的重要属性

鼠标事件

• altKey 热键alt键

• ctrlKey 热键ctrl键

• shiftKey 热键shift键
  以上属性都是布尔值，表示是否按下，没有按下为false，按下为true

• offsetX 事件发生时鼠标位于元素内部的left位置(从鼠标位置到左边框内)

• offsetY 事件发生时鼠标位于元素内部的top位置(从鼠标位置到上边框内)

• clientX 事件发生时鼠标到视口的左边距离

• clientY 事件发生时鼠标到视口的上边距离

• pageX 事件发生时鼠标到页面的左边距离

• pageY 事件发生时鼠标到页面的上边距离

• currentTarget 绑定事件的元素

• target 触发事件的元素

键盘事件

• key 表示当前的键对应的字符
• keyCode 表示当前的键对应的字符的ASCII码

计算后样式

• window.getComputedStyle(dom)
  • dom 元素对象
  • 返回值是该元素对象的CSS样式对象

    // 获取元素
    var div = document.querySelector("div");
    // 获取它的样式
    var cssStyleObject = window.getComputedStyle(div);
    console.log(cssStyleObject["width"]);
    console.log(cssStyleObject.width);
    console.log(cssStyleObject.backgroundColor);
    console.log(cssStyleObject["background-color"]);

如果在IE7 8中 不能使用getComputedStyle 要使用currentStyle属性

    // IE 7 8 中
    元素.currentStyle["width"] 
    元素.currentStyle["height"]