jQuery第二天学习总结—— jQuery 尺寸、位置操作

最新推荐文章于 2022-05-16 01:04:35 发布
最新推荐文章于 2022-05-16 01:04:35 发布
阅读量150 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52819925/article/details/119820404
版权

jQuery 尺寸、位置操作

jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便易用，内容如下。

jQuery 尺寸操作

jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型。

语法用法
width()/height()取得匹配元素宽度和高度值 只算width/height
innerWidth()/innerHeight()取得匹配元素宽度和高度值 包含padding
outerWidth()/outHeight()取得匹配元素宽度和高度值 包含padding、border
outerWidth(true)/outerHeight(true)取得匹配元素宽度和高度值 包含padding、border、margin
  • 以上参数为空，则是获取相应值，返回的是数字型。
  • 如果参数为数字，则是修改相应值。
  • 参数可以不必写单位。

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 15px solid red;
            margin: 20px;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div></div>
    <script>
        $(function() {
            // 1. width() / height() 获取设置元素 width和height大小 
            console.log($("div").width());
            // $("div").width(300);

            // 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小 
            console.log($("div").innerWidth());

            // 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小 
            console.log($("div").outerWidth());

            // 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
            console.log($("div").outerWidth(true));
        })
    </script>
</body>

</html>

注意：有了这套 API 我们将可以快速获取和子的宽高，至于其他属性想要获取和设置，还要使用 css() 等方法配合。

jQuery 位置操作

jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft() , 具体介绍如下:

offset() 设置或获取元素偏移

  • offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
  • 该方法有2个属性left、top 。offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离。
  • 可以设置元素的偏移：offset({ top: 10, left: 30 });

position() 获取元素偏移

  • position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
  • 该方法有2个属性left、top。position().top用于获取距离定位父级顶部的距离，position().left用于获取距离定位父级左侧的距离。
  • 该方法只能获取。
  • 注意: 这个方法的特点与offsetLeft和offsetTop一致

scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧

  • scrollTop()方法设置或返回被选元素被卷去的头部。
  • 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .father {
            width: 400px;
            height: 400px;
            background-color: pink;
            margin: 100px;
            overflow: hidden;
            position: relative;
        }
        
        .son {
            width: 150px;
            height: 150px;
            background-color: purple;
            position: absolute;
            left: 10px;
            top: 10px;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        $(function() {
            // 1. 获取设置距离文档的位置（偏移） offset
            console.log($(".son").offset());
            console.log($(".son").offset().top);
            // $(".son").offset({
            //     top: 200,
            //     left: 200
            // });
            // 2. 获取距离带有定位父级位置（偏移） position   如果没有带有定位的父级，则以文档为准
            // 这个方法只能获取不能设置偏移
            // 与offsetLeft和offsetTop一致
            console.log($(".son").position());
            // $(".son").position({
            //     top: 200,
            //     left: 200
            // });
        })
    </script>
</body>

</html>

案例：带有动画的返回顶部

1.核心原理： 使用animate动画返回顶部。
2.animate动画函数里面有个scrollTop 属性，可以设置位置
3.但是是元素做动画，因此 $(“body,html”).animate({scrollTop: 0})

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            height: 2000px;
        }
        
        .back {
            position: fixed;
            width: 50px;
            height: 50px;
            background-color: pink;
            right: 30px;
            bottom: 100px;
            display: none;
        }
        
        .container {
            width: 900px;
            height: 500px;
            background-color: skyblue;
            margin: 400px auto;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="back">返回顶部</div>
    <div class="container">
    </div>
    <script>
        $(function() {
            $(document).scrollTop(100);
            // 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()
            // 页面滚动事件
            var boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                // console.log(11);
                console.log($(document).scrollTop());
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });
            // 返回顶部
            $(".back").click(function() {
                // $(document).scrollTop(0);
                $("body, html").stop().animate({
                    scrollTop: 0
                });
                // $(document).stop().animate({
                //     scrollTop: 0
                // }); 不能是文档而是 html和body元素做动画
            })
        })
    </script>
</body>

</html>

案例： 品优购电梯导航（上）

1.当我们滚动到 今日推荐 模块，就让电梯导航显示出来
2.点击电梯导航页面可以滚动到相应内容区域
3.核心算法：因为电梯导航模块和内容区模块一一对应的
4.当我们点击电梯导航某个小模块，就可以拿到当前小模块的索引号
5.就可以把animate要移动的距离求出来：当前索引号内容区模块它的offset().top
6.然后执行动画即可

案例：品优购电梯导航（下）

1.当我们点击电梯导航某个小li， 当前小li 添加current类，兄弟移除类名
2.当我们页面滚动到内容区域某个模块， 左侧电梯导航，相对应的小li模块，也会添加current类， 兄弟移除current类。
3.触发的事件是页面滚动，因此这个功能要写到页面滚动事件里面。
4.需要用到each，遍历内容区域大模块。 each里面能拿到内容区域每一个模块元素和索引号
5.判断的条件： 被卷去的头部 大于等于 内容区域里面每个模块的offset().top
6.就利用这个索引号找到相应的电梯导航小li添加类。

完整代码：

index.html

<!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>
      <!-- 楼层区 start -->
      <div class="floor">
        <div class="jiadian w">
            <div class="box-hd">
                <h3>家用电器</h3>
                <div class="tab-list">
                    <ul>
                        <li><a href="#" class="style-red">热门</a>|</li>
                        <li><a href="#">大家电</a>|</li>
                        <li><a href="#">生活电器</a>|</li>
                        <li><a href="#">厨房电器</a>|</li>
                        <li><a href="#">个护健康</a>|</li>
                        <li><a href="#">应季电器</a>|</li>
                        <li><a href="#">空气/净水</a>|</li>
                        <li><a href="#">新奇特</a>|</li>
                        <li><a href="#">高端电器</a></li>
                    </ul>
                </div>
            </div>
            <div class="box-bd">
                <ul class="tab-con">
                    <li class="w209">
                        <ul class="tab-con-list">
                            <li>
                                <a href="#">节能补贴</a>
                            </li>
                            <li>
                                <a href="#">4K电视</a>
                            </li>
                            <li>
                                <a href="#">空气净化器</a>
                            </li>
                            <li>
                                <a href="#">IH电饭煲</a>
                            </li>
                            <li>
                                <a href="#">滚筒洗衣机</a>
                            </li>
                            <li>
                                <a href="#">电热水器</a>
                            </li>
                        </ul>
                        <img src="upload/floor-1-1.png" alt="">
                    </li>
                    <li class="w329">
                        <img src="upload/pic1.jpg" alt="">
                    </li>
                    <li class="w219">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-2.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-3.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-4.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-5.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-6.png" alt="">
                            </a>
                        </div>
                    </li>
                </ul>
                <!-- <ul class="tab-con">
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
				</ul> -->
            </div>
        </div>
        <div class="shouji w">
            <div class="box-hd">
                <h3>手机通讯</h3>
                <div class="tab-list">
                    <ul>
                        <li><a href="#" class="style-red">热门</a>|</li>
                        <li><a href="#">大家电</a>|</li>
                        <li><a href="#">生活电器</a>|</li>
                        <li><a href="#">厨房电器</a>|</li>
                        <li><a href="#">个护健康</a>|</li>
                        <li><a href="#">应季电器</a>|</li>
                        <li><a href="#">空气/净水</a>|</li>
                        <li><a href="#">新奇特</a>|</li>
                        <li><a href="#">高端电器</a></li>
                    </ul>
                </div>
            </div>
            <div class="box-bd">
                <ul class="tab-con">
                    <li class="w209">
                        <ul class="tab-con-list">
                            <li>
                                <a href="#">节能补贴</a>
                            </li>
                            <li>
                                <a href="#">4K电视</a>
                            </li>
                            <li>
                                <a href="#">空气净化器</a>
                            </li>
                            <li>
                                <a href="#">IH电饭煲</a>
                            </li>
                            <li>
                                <a href="#">滚筒洗衣机</a>
                            </li>
                            <li>
                                <a href="#">电热水器</a>
                            </li>
                        </ul>
                        <img src="upload/floor-1-1.png" alt="">
                    </li>
                    <li class="w329">
                        <img src="upload/pic1.jpg" alt="">
                    </li>
                    <li class="w219">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-2.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-3.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-4.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-5.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-6.png" alt="">
                            </a>
                        </div>
                    </li>
                </ul>
                <!-- <ul class="tab-con">
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
				</ul> -->
            </div>
        </div>
        <div class="diannao w">
            <div class="box-hd">
                <h3>电脑办公</h3>
                <div class="tab-list">
                    <ul>
                        <li><a href="#" class="style-red">热门</a>|</li>
                        <li><a href="#">大家电</a>|</li>
                        <li><a href="#">生活电器</a>|</li>
                        <li><a href="#">厨房电器</a>|</li>
                        <li><a href="#">个护健康</a>|</li>
                        <li><a href="#">应季电器</a>|</li>
                        <li><a href="#">空气/净水</a>|</li>
                        <li><a href="#">新奇特</a>|</li>
                        <li><a href="#">高端电器</a></li>
                    </ul>
                </div>
            </div>
            <div class="box-bd">
                <ul class="tab-con">
                    <li class="w209">
                        <ul class="tab-con-list">
                            <li>
                                <a href="#">节能补贴</a>
                            </li>
                            <li>
                                <a href="#">4K电视</a>
                            </li>
                            <li>
                                <a href="#">空气净化器</a>
                            </li>
                            <li>
                                <a href="#">IH电饭煲</a>
                            </li>
                            <li>
                                <a href="#">滚筒洗衣机</a>
                            </li>
                            <li>
                                <a href="#">电热水器</a>
                            </li>
                        </ul>
                        <img src="upload/floor-1-1.png" alt="">
                    </li>
                    <li class="w329">
                        <img src="upload/pic1.jpg" alt="">
                    </li>
                    <li class="w219">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-2.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-3.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-4.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-5.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-6.png" alt="">
                            </a>
                        </div>
                    </li>
                </ul>
                <!-- <ul class="tab-con">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ul> -->
            </div>
        </div>
        <div class="jiaju w">
            <div class="box-hd">
                <h3>精品家具</h3>
                <div class="tab-list">
                    <ul>
                        <li><a href="#" class="style-red">热门</a>|</li>
                        <li><a href="#">大家电</a>|</li>
                        <li><a href="#">生活电器</a>|</li>
                        <li><a href="#">厨房电器</a>|</li>
                        <li><a href="#">个护健康</a>|</li>
                        <li><a href="#">应季电器</a>|</li>
                        <li><a href="#">空气/净水</a>|</li>
                        <li><a href="#">新奇特</a>|</li>
                        <li><a href="#">高端电器</a></li>
                    </ul>
                </div>
            </div>
            <div class="box-bd">
                <ul class="tab-con">
                    <li class="w209">
                        <ul class="tab-con-list">
                            <li>
                                <a href="#">节能补贴</a>
                            </li>
                            <li>
                                <a href="#">4K电视</a>
                            </li>
                            <li>
                                <a href="#">空气净化器</a>
                            </li>
                            <li>
                                <a href="#">IH电饭煲</a>
                            </li>
                            <li>
                                <a href="#">滚筒洗衣机</a>
                            </li>
                            <li>
                                <a href="#">电热水器</a>
                            </li>
                        </ul>
                        <img src="upload/floor-1-1.png" alt="">
                    </li>
                    <li class="w329">
                        <img src="upload/pic1.jpg" alt="">
                    </li>
                    <li class="w219">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-2.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-3.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-4.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-5.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-6.png" alt="">
                            </a>
                        </div>
                    </li>
                </ul>
                <!-- <ul class="tab-con">
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                    </ul> -->
            </div>
        </div>
    </div>
    <!-- 楼层区 end -->
    <!-- 固定电梯导航 -->
    <div class="fixedtool">
        <ul>
            <li class="current">家用电器</li>
            <li>手机通讯</li>
            <li>电脑办公</li>
            <li>精品家具</li>
        </ul>
    </div>
</body>
</html>

index.css

/*floor 楼层区*/

.box-hd {
    height: 30px;
    border-bottom: 2px solid #c81623;
    margin-top: 25px;
}

.box-hd h3 {
    float: left;
    font-size: 18px;
    color: #c81623;
}

.tab-list {
    float: right;
    line-height: 30px;
}

.tab-list li {
    float: left;
}

.tab-list li a {
    margin: 0 15px;
}

.box-bd {
    height: 360px;
}

.w209 {
    width: 209px;
    background-color: #f9f9f9;
}

.w329 {
    width: 329px;
}

.w219 {
    width: 219px;
    border-right: 1px solid #ccc;
}

.w220 {
    width: 220px;
    border-right: 1px solid #ccc;
}

.tab-con li {
    float: left;
    height: 360px;
}

.tab-con-item {
    border-bottom: 1px solid #ccc;
}

.tab-con-list {
    overflow: hidden;
    margin-bottom: 15px;
}

.tab-con-list li {
    width: 86px;
    height: 32px;
    line-height: 32px;
    border-bottom: 1px solid #ccc;
    margin-left: 10px;
    text-align: center;
}

.box-bd li {
    overflow: hidden;
}

.box-bd img {
    /*过渡写到本身上， 谁做动画，给谁加*/
    transition: all .2s;
}


/*我们鼠标经过图片 往右走 8px*/

.box-bd img:hover {
    margin-left: 8px;
}


/*电梯导航*/

.fixedtool {
    position: fixed;
    top: 100px;
    left: 50%;
    margin-left: -676px;
    width: 66px;
    background-color: #fff;
    display: none;
}

.fixedtool li {
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 12px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
}

.fixedtool .current {
    background-color: #c81623;
    color: #fff;
}

index.js

$(function() {
    //节流阀，互斥锁
    var flag = true;
    // 1.显示隐藏电梯导航
    var toolTop = $(".recommend").offset().top;
    toggleTool();

    function toggleTool() {
        if ($(document).scrollTop() >= toolTop) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        };
    }


    // 第一种方式
    $(window).scroll(function() {
        toggleTool();
        // 3. 页面滚动到某个内容区域，左侧电梯导航小li相应添加和删除current类名
        if (flag) {
            $(".floor .w").each(function(i, ele) {
                console.log($(ele).offset().top);

                // if ($(document).scrollTop() >= $(ele).offset().top) {
                // console.log($(ele).outerHeight());

                // if (Math.ceil($(document).scrollTop()) >= Math.floor($(ele).offset().top)) {

                if ($(document).scrollTop() >= $(ele).offset().top &&
                    $(document).scrollTop() < $(ele).offset().top + $(ele).outerHeight()) {
                    console.log(i);
                    $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();

                }
            })
        }
    });

    // 第二种方式
    // var scrollIndex = 0;
    // $(window).scroll(function() {
    //     toggleTool();
    //     // $(".floor .w").each(function(i, ele) {
    //     //     if ($(document).scrollTop() >= $(ele).offset().top) {
    //     //         console.log(i);
    //     //         $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();
    //     //     }
    //     // });
    //     // 监听界面滚动距离，如果滚动距离大于等于第一块内容距离顶部的距离时，让第一个li高亮显示
    //     if ($(document).scrollTop() >= $(".floor .w").eq(0).offset().top()){
    //         $(".fixedtool li").eq(0).addClass("current").siblings().removeClass();
    //     }if($(document).scrollTop() >= $(".floor .w").eq(1).offset().top()){
    //         $(".fixedtool li").eq(1).addClass("current").siblings().removeClass();
    //     }if($(document).scrollTop() >= $(".floor .w").eq(2).offset().top()){
    //         $(".fixedtool li").eq(2).addClass("current").siblings().removeClass();
    //     }if($(document).scrollTop() >= $(".floor .w").eq(3).offset().top()){
    //         $(".fixedtool li").eq(3).addClass("current").siblings().removeClass();
    //     }
    //     // 简化版代码
    //     if ($(document).scrollTop() >= $(".floor .w").eq(0).offset().top) {
    //         scrollIndex = 0;
    //     }
    //     if ($(document).scrollTop() >= $(".floor .w").eq(1).offset().top) {
    //         scrollIndex = 1;
    //     }
    //     if ($(document).scrollTop() >= $(".floor .w").eq(2).offset().top) {
    //         scrollIndex = 2;
    //     }
    //     if ($(document).scrollTop() >= $(".floor .w").eq(3).offset().top) {
    //         scrollIndex = 3;
    //     }
    //     $(".fixedtool li").eq(scrollIndex).addClass("current").siblings().removeClass();
    // });

    // 2. 点击电梯导航页面可以滚动到相应内容区域
    $(".fixedtool li").click(function() {
        flag = false;
        console.log($(this).index());
        // 当我们每次点击小li 就需要计算出页面要去往的位置 
        // 选出对应索引号的内容区的盒子 计算它的.offset().top
        var current = $(".floor .w").eq($(this).index()).offset().top;
        // 页面动画滚动效果
        $("body, html").stop().animate({
            scrollTop: current
        }, function() {
            flag = true;
        });
        // 点击之后，让当前的小li 添加current 类名 ，姐妹移除current类名
        $(this).addClass("current").siblings().removeClass();
    })
})

电梯导航-菜单乱跳问题分析：

在这里插入图片描述

总结

尺寸

语法用法
width()/height()取得匹配元素宽度和高度值 只算width/height
innerWidth()/innerHeight()取得匹配元素宽度和高度值 包含padding
outerWidth()/outHeight()取得匹配元素宽度和高度值 包含padding、border
outerWidth(true)/outerHeight(true)取得匹配元素宽度和高度值 包含padding、border、margin

位置：offset()、position()、scrollTop()、scrollLeft()

李穩钰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery简单操作④
军火库
05-31 392
jQuery简单操作 嗨嗨害！我又来水文章了 1. jQuery元素大小 公共样式 div { width: 200px; height: 200px; background-color: black; padding: 10px; border: 15px solid red; margin: 20px; } ① width() / heig
jQuery 修改样式
weixin_45129218的博客
03-31 1310
修改样式属性 <!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"> <titl
成为优秀程序员就要学会 jQuery 尺寸操作 与 位置操作 【后附本章案例】
segegefe的博客
05-16 1005
??? 原生 JS 学习中，我们学会了使用 offset 来获取元素距离 父元素（有定位的父元素） 或 文档元素 上（offsetLeft）左（offsetTop）的距离，还学会了使用 offsetWidth 来获取元素的尺寸，以及 scroll 事件中的scrollTop 卷上去头部尺寸的方法等等。jQuery 里也封装了一系列方法来完成 元素尺寸 以及 位置 的操作，学会了这个，我们便可以使用 jQuery 来完成以前用原生 JS 写过的京东放大镜，以及电梯导航等案例啦，大家下面跟我一起学习看看吧！！.
jquery用法--jquery盒子模型
qq_36545656的博客
01-17 1171
jquery的盒子模型主要是用来区分jQuery中所定义的宽高方法在盒子模型中的具体的大小以及它所包含哪几个部分。 例如定义一个div样式如下： #dvi{ width: 100px; height: 100px; margin:50px; padding:50px; bor
05jQuery问题
djh8824的博客
03-23 202
1.jQuery 的两大特点 链式编程：比如.show()和.html()可以连写成.show().html()。 链式编程原理：return this。 通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。 隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。 2.
jquery插件推荐 jquery.cookie
10-25
今天我们要介绍的是一个专门用来处理Cookie的jQuery插件——jQuery.cookie。 jQuery.cookie插件是一个轻量级的库，它能够在各个主流浏览器中保持良好的兼容性。使用这个插件可以非常方便地读取、写入和删除Cookie。...
jquery 学习笔记
07-26
### 第二天：DOM操作 - **获取元素**：学习`$()`函数，用于选取DOM元素，以及如何通过CSS选择器选取多个元素。 - **属性操作**：了解如何设置和获取元素的属性，如`attr()`和`removeAttr()`方法。 - **内容操作**：...
可自动播放和暂停的jQuery相册
05-12
可自动播放和暂停的jQuery相册
jQuery：css操作及jQuery盒子模型
willard_cui的博客
08-01 420
1、jQuery css()方法：设置或返回指定的css属性的值 $("div").css("width");//返回div元素的宽度 使用css()方法设置元素div的样式 方法一： $("div").css("width","100px"); $("div").css("height","100px"); $("div&quot
jQuery – 尺寸
独行者
10-18 168
通过 jQuery，很容易处理元素和浏览器窗口的尺寸。 jQuery 尺寸 方法 jQuery 提供多个处理尺寸的重要方法： width() height() innerWidth() innerHeight() outerWidth() outerHeight() jQuery width() 和 height() 方法 width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。 height() 方法设置或返回元素的高度（不包括内边距、边框或外边..
jQuery--盒子尺寸、盒子位置
Amy的博客
08-29 3000
盒子尺寸（重点） width()//这里获得的宽高跟css()数据类型不一样==内容的宽度 innerWidth()=width()+padding outerWidth()=innerwidth()+border outerWidth(true)==outerwidth +margin height() innerHeight() outer
jQuery获取盒子尺寸
lipeiwen1998的博客
07-23 945
height() height() 取得匹配元素当前计算的高度值（px） 参数height([val|fn]) 设定CSS中 ‘height’ 的值，方法中有一个参数，可以是字符串或者数字，还可以是一个函数 当参数为函数时，函数接受两个参数，第一个参数是元素在原先集合中的索引位置，第二个参数为原先的高度 //height()中没有参数时则获取该元素的height值 var div1 = $("div").height(); console.log(div1);//输出div的height //heig
jQuery尺寸，位置操作
laisy334514的博客
09-05 271
1.尺寸 width() | height() 获取宽高，只算width | height 先准备一个盒子： innerWidth() | innerHeight() 包含padding outerWidth() | outerHeight() 包含padding 和 border outerWidth(true) | outerHeight(true) 包含padding ，borde...
jQuery学习——尺寸
weixin_30347009的博客
12-15 55
.height() 获取匹配元素集合中的第一个元素的当前计算高度值 或 设置每一个匹配元素的高度值。 Contents: .height() .height() .height( value ) .height( value ) .height( function(index, height) ) .css('height')和.height...
用jQuery来改变div盒子的大小
weixin_57772827的博客
04-17 1248
开发工具与关键技术：VS 2019单词 作者：魏钦 撰写时间：2022/4/18 首先打开我们的VS软件，CTRL+ N新建一个HTML文档，在body里面放一个script作为引入jQuery插件，再body标签里放一个script标签，作为写JS的区域，想用jQuery那就必须先引入jQuery，第一个就是引入jQuery的写法，第二个script里写js代码，写法如下。 <scriptsrc="./资料/jquery-1.12.2.j...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值