jQuery中获取尺寸、位置和被卷去的距离

最新推荐文章于 2023-03-23 18:27:44 发布

靓仔觉得你很棒

最新推荐文章于 2023-03-23 18:27:44 发布

阅读量1.3k

点赞数

文章标签： js jquery

本文链接：https://blog.csdn.net/weixin_47544559/article/details/111111992

版权

jQuery_03

- 一、获取元素的尺寸、位置和被卷去的距离
- 二、新的绑定事件的方式

一、获取元素的尺寸、位置和被卷去的距离

获取元素的尺寸

<body>
    <div class="box"></div>
    <script>
        // 1. 获取元素宽高（不包括 padding 和 border）
        console.log($('.box').width());
        console.log($('.box').height());

        // 2. 获取元素宽高 （包括 padding, 不包括 border）
        console.log($('.box').innerWidth());

        // 3. 获取元素宽高 （包括 padding, 包括 border）
        console.log($('.box').outerWidth());

        // 4. (了解)获取元素宽高 （包括 padding, 包括 border, 包括 margin）
        console.log($('.box').outerWidth(true));

        // 5. 设置元素的宽高, 直接在方法中添加要设置的数值
        // $('.box').width(300)
        // $('.box').innerWidth(300)
        $('.box').outerWidth(300)
    </script>
</body>

宽高都是同理，记忆方法可以由内向外去记
盒子的宽度由 content、padding、border组成，包含关系由内向外就是，width、innerWidth、outerWidth
包含margin的话只需要在 outerWidth 方法中加上 true 即可

获取元素的位置

        // 1. 获取元素距离页面左侧和顶部的距离
        console.log($('.father').offset()); // 结果是一个对象
        console.log($('.father').offset()['left']);
        console.log($('.father').offset()['top']);
        console.log($('.father').offset().left);
        console.log($('.father').offset().top);

        // 2. 设置元素在文档中的偏移位置

        $('.father').offset({
            left: 400,
            top: 200s
        })

        // 3. 获取元素相对定位父级元素的左侧和顶部的距离 
        console.log($('.son').position());
        console.log($('.son').position().left);
        console.log($('.son').position().top);

        // 3.1 上述 position 方法不能设置元素的偏移位置

获取元素被卷去的头部

        // 1. 获取元素中内容被卷去的距离
        // 给 .box 注册滚动事件
        $('.box').scroll(function() {
            console.log($(this).scrollTop());
        })

        // 2. 给浏览器 window 绑定滚动事件
        $(window).scroll(function() {
            console.log($(this).scrollTop());
        })

想要获取整个页面被卷去的头部，固定使用 $(‘html, body’).scrollTop()

二、新的绑定事件的方式


        $(function() {
            // 1. 绑定单个事件类型 ele.type(fn)
            // $('.box').click(function() {
            //     console.log(123);
            // })

            // 2. 给元素绑定多种事件类型 e;e.on({type1: fn1,type2: fn2})
            // $('.box').on({
            //     click: function() {
            //         console.log(456);
            //     },
            //     mouseover: function() {
            //         console.log(123);
            //     }
            // })

            // 2.1 多个事件类型的事件处理函数相同    ele.on('type1 type2', fn)
            $('.box').on('click mouseover', function() {
                console.log(123);
            })
        })

jQuery中的事件委托

语法：ele.on(‘type’, ‘target-selector’, fn)

举例：

     $('ul').on('click', 'li', function() {
            console.log(123);
        })
	// 利用事件冒泡，将事件处理程序绑定到父元素身上，具体的触发元素还是当前点击的 元素

	// 我们希望点击 li 打印出 123 ，但是 li 是可以动态创建的，所以将点击事件绑定到父元素 ul 身上，即使有新的 li 出现，
	// 也会通过冒泡触发 ul 的点击事件（this 指向当前点击的元素： li）

有绑定肯定有解除啦（解除事件绑定和事件委托）

就直接使用 off() 方法，要解除谁的，就ele.off()

        // // 1. 移除当前元素身上绑定的所有事件： off()
        // $('div').on('click mouseover', function() {
        //     console.log(123);
        // })

        // 移除所有事件
        // $('div').off()

        // // 2. 移除元素身上绑定的某个事件: off(type)
        // 移除单个事件
        // $('div').off('click')

        // // 3. 解除事件委托的绑定：off(type, target) 
        // $('ul').on('click mouseover', 'li', function() {
        //     console.log(456);
        // })

        // 解除事件委托
        // $('ul').off('click', 'li')

        // // 4. 为某个元素只绑定一次事件：one()

        // 事件处理函数只会执行一次
        $('div').one('dblclick', function() {
            console.log('双击事件触发');
        })