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)

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: 上面滚动的长度左边滚动的长度

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

JS四大家族

二、scroll家族

三、JSON(转自w3cschool)

四、Client家族

五、Offset、Client、Scroll的区别

猜你喜欢