从0开始学web-day33-js进阶03

最新推荐文章于 2022-11-29 19:08:57 发布

oxygen_ls

最新推荐文章于 2022-11-29 19:08:57 发布

阅读量770

点赞数

分类专栏：前端 # js 文章标签： web学习从零开始学前端

本文链接：https://blog.csdn.net/oxygen_ls/article/details/123384855

版权

前端同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

18 篇文章 0 订阅

订阅专栏

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>