JavaScript学习笔记（二）之JS家族

JS四大家族

 

三大系列：offset、scroll、client

事件对象：event（事件被触动时，鼠标和键盘的状态）（通过属性控制）

 

三大系列都是以DOM元素节点的属性形式存在的。

类比访问关系，也是以属性形式存在。

不同点在于，访问关系是为了获取其他节点，而三大系列是为了获取元素节点更多的信息。

---

二、scroll家族

1.主要针对情况——滚动

2.对滚轮滚动的监听

//关于窗口的滚动
window.onscroll = function () {
    //由于存在不兼容的问题 将所有浏览器的对应变量名都写上 
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
    console.log(scrollTop, scrollLeft);
}

 

---

三、JSON(转自w3cschool)

1.

JSON 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据 。

JSON 有两种结构 一个是数组 一个是对象

2.语法规则

• 数据为 键/值 对。
• 数据由逗号分隔。
• 大括号保存对象
• 方括号保存数组、

3.示例

    // 1.1 数组
    var data = ["花花", 19, "女"];

    // 1.2 对象
    var person = {"name": "张三", "age": 18, "sex": "男"};

    // 1.3 组合
    var persons = [
        {"name": "张三", "age": 18, "sex": "男"},
        {"name": "张三", "age": 18, "sex": "男"},
        {"name": "张三", "age": 18, "sex": "男"},
        {"name": "张三", "age": 18, "sex": "男"},
        {"name": "张三", "age": 18, "sex": "男"},
        {"name": "张三", "age": 18, "sex": "男"},
        {"name": "张三", "age": 18, "sex": "男"},
        {"name": "张三", "age": 18, "sex": "男"},
        {"name": "张三", "age": 18, "sex": "男"}
    ];

---

四、Client家族

1.ClientWidth和clientHeight

• 获取网页可见区域宽：document.body.clientWidth
• 获取网页可见区域高：document.body.clientHeight

 

---

五、Offset、Client、Scroll的区别

1.width+Height

• offset：border+padding+内容的高度和宽度
• client：padding+内容的高度和宽度
• scroll:   能够滚动的内容的高度和宽度

2.top和left

• offset：当前元素距离有定位的父盒子上边的距离，当前元素距离有定位的父盒子左边的距离
• client：上边边框的宽度 左边边框的宽度
• scroll:   上面滚动的长度 左边滚动的长度