[JavaScript知识库] 从0开始学web-day33-js进阶03

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 从0开始学web-day33-js进阶03 -> 正文阅读

[JavaScript知识库]从0开始学web-day33-js进阶03

1.快捷尺寸获取方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 150px;
            height: 150px;
            background-color: pink;
            padding: 10px;
            border: 10px solid red;
            border-left-width: 30px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
    // 在js中 对于元素的宽高都是要经常使用的值 所以在dom中提供了相应的快捷获取方式

    // clientWidth clientHeight
        // 包含的是content + padding
    console.log('包含的是content + padding:', box.clientWidth, box.clientHeight);



    // offsetWidth offsetHeight
        // 包含的是content + padding + border
    console.log('包含的是content + padding + border:', box.offsetWidth, box.offsetHeight);

    

    // clientLeft clientTop
        // 这两个属性标记的是元素边框的厚度
    console.log('元素边框的厚度是:', box.clientLeft, box.clientTop);
    </script>
</body>
</html>

2.jquery中快捷尺寸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 150px;
            height: 150px;
            background-color: pink;
            padding: 10px;
            border: 10px solid red;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script src="./js/jquery.js"></script>
    <script>
    // 获取元素
    var $box = $('#box');

    // 获取content尺寸
        // width()，height()
    console.log('获取content尺寸:', $box.width(), $box.height());
    
    
    // 获取content + padding尺寸
        // innerWidth()，innerHeight()
    console.log('获取content + padding尺寸:', $box.innerWidth(), $box.innerHeight());
    
    
    // 获取content + padding + border尺寸
        // outerWidth()，outerHeight()
    console.log('获取content + padding + border尺寸:', $box.outerWidth(), $box.outerHeight());


    // 获取content + padding + border + margin尺寸
        // outerWidth(true)，outerHeight(true)
    console.log('获取content + padding + border + margin尺寸:', $box.outerWidth(true), $box.outerHeight(true));

    </script>
</body>
</html>

3.定位父元素和定位值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
            margin: 0 auto;
            border: 10px solid blue;
        }
        #box1 {
            width: 350px;
            height: 350px;
            background-color: green;
            margin: 0 auto;
        }
        #box2 {
            position: absolute;
            width: 150px;
            height: 150px;
            margin: 0 auto;
            left: 30px;
            top: 50px;
            background-color: skyblue;
        }

    </style>
</head>
<body>
    <div id="box">
        box
        <div id="box1">
            box1
            <!-- 此时box2相对于box进行定位值  但是box2的parentNode是box1 -->
            <div id="box2"></div>
        </div>
    </div>
    <script>
    // 快速获取元素的定位父元素
    // console.log(box2.offsetParent);
    // box1的定位父元素 也是box
    // console.log(box1.offsetParent);
    // box的定位父元素是body
    // console.log(box.offsetParent);



    // 元素的定位值也是经常要使用的值，因此，在DOM中提供了相应的快捷方式
    // dom.offsetLeft: 距离自己定位父元素的左边的距离
    // dom.offsetTop: 距离自己定位父元素的上边的距离
    console.log(box2.offsetLeft);
    console.log(box2.offsetTop);


    </script>
</body>
</html>

4.jQuery中定位值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
            margin: 0 auto;
            border: 10px solid blue;
        }
        #box1 {
            width: 350px;
            height: 350px;
            background-color: green;
            margin: 0 auto;
        }
        #box2 {
            position: absolute;
            width: 150px;
            height: 150px;
            margin: 0 auto;
            left: 30px;
            top: 50px;
            background-color: skyblue;
        }

    </style>
</head>
<body>
    <div id="box">
        box
        <div id="box1">
            box1
            <!-- 此时box2相对于box进行定位值  但是box2的parentNode是box1 -->
            <div id="box2"></div>
        </div>
    </div>
    <script src="./js/jquery.js"></script>
    <script>
    console.log(box2.offsetLeft);
    console.log(box2.offsetTop);

    // jquery中获取元素的定位值 返回值是一个对象
    console.log($('#box2').position());


    </script>
</body>
</html>

5.获取元素到页面之间的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box {
            height: 400px;
        }
        #box2 {
            position: relative;
            border-top: 10px solid skyblue;
            margin-bottom: 100px;
        }
        #box3 {
            position: absolute;
            left: 100px;
            top: 100px;
            width: 100px;
            height: 100px;
            background-color: green;
            border: 10px solid blue;
        }
     

    </style>
</head>
<body>
    <div id="box"></div>
    <div id="box2">
        <div id="box3"></div>
    </div>
    <script src="./js/jquery.js"></script>
    <script>

    // 封装一个方法获取某个元素 到页面之间的距离: 包含元素顶部间距 和 左侧间距
    function offset(dom) {
        // 实现的思路: 
            // 不断获取dom元素的定位父元素 再获取它们之间的距离 最终相累加

        // 获取浏览器相关信息
        var str = window.navigator.userAgent;
        // 查找是否包含某个字段
        var isIE = null;

        // if (str.indexOf('MSIE 8.0') >= 0) {
        //     // console.log('说明是IE浏览器');
        //     isIE = true;
        // } else {
        //     // console.log('非IE');
        //     isIE = false;
        // }

        // 利用三目运算简写:
        isIE = str.indexOf('MSIE 8.0') >= 0 ? true : false;


        // 定义对象
            // 在定义的时候加上自身的定位值
        var result = {
            top: dom.offsetLeft,
            left: dom.offsetTop
        }


        // 使用while循环
        while (dom !== document.body) {
            // 定义终止条件
            dom = dom.offsetParent;
            // console.log(dom); 

            // 判断浏览器的信息
            if (isIE) {
                // 在IE中，从子元素的边框外到定位父元素的边框外 （多算了一条父元素的边框）
                result.left += dom.offsetLeft;
                result.top += dom.offsetTop;   
            } else {
                // 在高级浏览器中，从子元素的边框外到定位父元素的边框内 (因该额外加上定位父元素的边框)
                result.left += dom.offsetLeft + dom.clientLeft;
                result.top += dom.offsetTop + dom.clientTop;
            }

        }
        // 返回结果
        return result;
    }





    // 元素到页面之间的距离：$(dom).offset(): 
    console.log(111, $('#box3').offset());
    console.log(222, offset(box3));

    </script>
</body>
</html>

6.onscroll事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>1 1 1</h1>
    <h1>2 2 2</h1>
    <h1>3 3 3</h1>
    <h1>4 4 4</h1>
    <h1>5 5 5</h1>
    <h1>6 6 6</h1>
    <h1>7 7 7</h1>
    <h1>8 8 8</h1>
    <h1>9 9 9</h1>
    <h1>10 10 10</h1>
    <h1>11 11 11</h1>
    <h1>12 12 12</h1>
    <h1>13 13 13</h1>
    <h1>14 14 14</h1>
    <h1>15 15 15</h1>
    <h1>16 16 16</h1>
    <h1>17 17 17</h1>
    <h1>18 18 18</h1>
    <h1>19 19 19</h1>
    <h1>20 20 20</h1>
    <h1>21 21 21</h1>
    <h1>22 22 22</h1>
    <h1>23 23 23</h1>
    <h1>24 24 24</h1>
    <h1>25 25 25</h1>
    <h1>26 26 26</h1>
    <h1>27 27 27</h1>
    <h1>28 28 28</h1>
    <h1>29 29 29</h1>
    <h1>30 30 30</h1>
    <script>
    // 监听页面滚动
    document.onscroll = function() {
        console.log(123);
    }

    // 触发该事件的方式有很多：
	    // 滚动鼠标滚轮， 键盘上的空格键 ， 键盘上的上下箭头， 键盘上的PgUp、PgDn都会触发该事件


    // 注意：scroll事件是一个高频事件
    </script>
</body>
</html>

7.页面卷动值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>1 1 1</h1>
    <h1>2 2 2</h1>
    <h1>3 3 3</h1>
    <h1>4 4 4</h1>
    <h1>5 5 5</h1>
    <h1>6 6 6</h1>
    <h1>7 7 7</h1>
    <h1>8 8 8</h1>
    <h1>9 9 9</h1>
    <h1>10 10 10</h1>
    <h1>11 11 11</h1>
    <h1>12 12 12</h1>
    <h1>13 13 13</h1>
    <h1>14 14 14</h1>
    <!-- <h1 style="width: 2000px;">15 15 15</h1> -->
    <h1>15 15 15</h1>
    <h1>16 16 16</h1>
    <h1>17 17 17</h1>
    <h1>18 18 18</h1>
    <h1>19 19 19</h1>
    <h1>20 20 20</h1>
    <h1>21 21 21</h1>
    <h1>22 22 22</h1>
    <h1>23 23 23</h1>
    <h1>24 24 24</h1>
    <h1>25 25 25</h1>
    <h1>26 26 26</h1>
    <h1>27 27 27</h1>
    <h1>28 28 28</h1>
    <h1>29 29 29</h1>
    <h1>30 30 30</h1>
    <script>
    // 获取html元素
    // console.log(document.documentElement);

    // 监听页面滚动
    document.onscroll = function() {
        // 获取页面卷动值
        // 在旧版本chrome中，获取页面卷动值的: document.body.scrollTop
        // console.log(document.body.scrollTop);
		// 新版的chrome、火狐、IE, 获取页面卷动值的方式： document.documentElement.scrollTop
        // console.log(document.documentElement.scrollTop);

        // 在BOM中也提供了相应的属性 获取页面卷动值
        // console.log(window.scrollY);
        // console.log(window.scrollX);

        // 不但可以获取也可以设置
        // document.documentElement.scrollTop = 1000;

        // 兼容页面的卷动值
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop || scrollY;
        // console.log(scrollTop);


        // 获取视口的宽度： document.documentElement.clientWidth
        console.log(document.documentElement.clientWidth);
        // 获取视口的高度： document.documentElement.clientHeight
        console.log(document.documentElement.clientHeight);
        // 获取整个页面的高度
        console.log(document.documentElement.offsetHeight);
    }
   
    </script>
</body>
</html>

8.返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #goBack {
            position: fixed;
            width: 100px;
            height: 100px;
            right: 100px;
            bottom: 100px;
            background-color: pink;
            font-size: 20px;
            text-align: center;
            line-height: 100px;
            opacity: 0;
        }
    </style>
</head>
<body>
    <h1>1 1 1</h1>
    <h1>2 2 2</h1>
    <h1>3 3 3</h1>
    <h1>4 4 4</h1>
    <h1>5 5 5</h1>
    <h1>6 6 6</h1>
    <h1>7 7 7</h1>
    <h1>8 8 8</h1>
    <h1>9 9 9</h1>
    <h1>10 10 10</h1>
    <h1>11 11 11</h1>
    <h1>12 12 12</h1>
    <h1>13 13 13</h1>
    <h1>14 14 14</h1>
    <h1>15 15 15</h1>
    <h1>16 16 16</h1>
    <h1>17 17 17</h1>
    <h1>18 18 18</h1>
    <h1>19 19 19</h1>
    <h1>20 20 20</h1>
    <h1>21 21 21</h1>
    <h1>22 22 22</h1>
    <h1>23 23 23</h1>
    <h1>24 24 24</h1>
    <h1>25 25 25</h1>
    <h1>26 26 26</h1>
    <h1>27 27 27</h1>
    <h1>28 28 28</h1>
    <h1>29 29 29</h1>
    <h1>30 30 30</h1>
    <h1>31 31 31</h1>
    <h1>32 32 32</h1>
    <h1>33 33 33</h1>
    <h1>34 34 34</h1>
    <h1>35 35 35</h1>
    <h1>36 36 36</h1>
    <h1>37 37 37</h1>
    <h1>38 38 38</h1>
    <h1>39 39 39</h1>
    <h1>40 40 40</h1>
    <div id="goBack">返回顶部</div>
    <!-- 引入jq -->
    <script src="./js/jquery.js"></script>
    <script>
    // 初始化timer
    // var timer = null;

    // 提取为方法
    function toggle() {
        console.log('事件执行了');
        // 兼容页面的卷动值
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop || scrollY;

        // 判断页面卷动值
        if (scrollTop > 600) {
            $('#goBack').stop(true).animate({ opacity: 1 }, 600);
        } else {
            $('#goBack').stop(true).animate({ opacity: 0 }, 600);
        }
    }

    // 监听页面滚动
    document.onscroll = function() {

        // toggle();

        // 清除之前的延迟器
        // clearTimeout(timer);

        // 开启最后一个延迟器
        // timer = setTimeout(toggle, 600);

        // 使用节流函数
        throttle(toggle, 1000);
    }

    // 封装基于操作的节流函数
    function throttle(fn, time) {
        // 清除之前的延迟器
        clearTimeout(fn.__throttle);

        // 开启最后一个延迟器
        fn.__throttle = setTimeout(fn, time);
    }


    // 点击返回顶部
    $('#goBack').click(function() {
        // 改变页面卷动值
        $('html').animate({ scrollTop: 0 }, 500);
    })

   

    // 演示引用类型 添加数据
    // function demo() {}

    // demo.aaa = 'msg';
    // console.log(demo.aaa);

    </script>
</body>
</html>

9.鼠标滚轮事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 引入tools文件 -->
    <script src="./js/tools.js"></script>
    <script>
    // 监听页面滚动
        // 注意：触发该方法的条件是改变页面卷动值
    // document.onscroll = function() {
    //     console.log('onscroll事件');
    // }

    // // 监听鼠标滚轮事件
    // document.onmousewheel = function(e) {
    //     // console.log('事件执行了', e);

    //     // 非火狐:
    //         // 指示鼠标滚轮方向的属性:  e.wheelDelta
    //         // 如果是往下滚动：-120的倍数；如果是往上滚动： 120的倍数
    //         console.log(e.wheelDelta);

    // }


    // // 该事件存在兼容性的问题，火狐不支持onmousewheel ，支持DOMMouseScroll事件
    // document.addEventListener('DOMMouseScroll', function(e) {
    //     // console.log('火狐中鼠标滚轮事件');

    //     // 在火狐中，指示鼠标滚轮方向的属性: e.detail
	// 	// 如果是往下滚动： 3的倍数；如果是往上滚动： -3的倍数
    //     console.log(e.detail);
    // })


    // 统一鼠标滚轮事件的方式
    bindEvent(document, 'mousewheel', function(e) {
        console.log('事件执行了');
    })



  
    </script>
</body>
</html>

10.键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="inp">
    <script>
    // 直接为document绑定键盘事件
    // 键盘按下
    document.onkeydown = function(e) {
        // 在键盘事件中，可以通过事件对象的keyCode属性获取键码，key表示字符 
        // console.log('onkeydown');

        // 常用的键码: 空格 32 回车13  左箭头 37 上箭头 38 右箭头 39 下箭头 40 
        // console.log(e.keyCode); 
        // 获取按下的字符
        // console.log(e.key);
    }

    // 键盘抬起
    // document.onkeyup = function() {
    //     console.log('onkeyup');
    // }

    // 又字符输入的时候
    // document.onkeypress = function() {
    //     console.log('onkeypress');
    // }

    // 当输入有效字符的时候 键盘事件执行的顺序: keydown > keypress > keyup
    </script>
    <script>
    // // 为输入框绑定键盘事件
    // inp.onkeydown = function() {
    //     console.log('onkeydown');
    // }

    // // 键盘抬起
    // inp.onkeyup = function() {
    //     console.log('onkeyup');
    // }

    // // 有字符输入的时候
    // inp.onkeypress = function() {
    //     console.log('onkeypress');
    // }

    // // 当输入框获取焦点之后可以触发键盘事件
    </script>
</body>
</html>