jQuery二、常用API--6、元素操作、7、尺寸位置操作

李宥
141 阅读9分钟

jQuery二、常用API

6、jQuery 元素操作

（1）遍历元素

  • jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。

  • 语法1：$("div").each(function (index, domEle) { xxx; }）

    • each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
    • 里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
    • 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)

  • 语法2：$.each(object，function (index, element) { xxx; }）

    • $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
    • 里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容

案例如下：

<!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>jQuery遍历元素</title>
    <style>

    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            // $("div").css("color", "red");
            // 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
            var sum = 0;
            // 1. each() 方法遍历元素 
            var arr = ["red", "green", "blue"];
            $("div").each(function(i, domEle) {
                // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
                // console.log(index);
                // console.log(i);
                // 回调函数第二个参数一定是 dom元素对象 也是自己命名
                // console.log(domEle);
                // domEle.css("color"); dom对象没有css方法
                $(domEle).css("color", arr[i]);
                sum += parseInt($(domEle).text());
            })
            console.log(sum);
            // 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
            // $.each($("div"), function(i, ele) {
            //     console.log(i);
            //     console.log(ele);
            // });
            // $.each(arr, function(i, ele) {
            //     console.log(i);
            //     console.log(ele);
            // })
            $.each({
                name: "andy",
                age: 18
            }, function(i, ele) {
                console.log(i); // 输出的是 name age 属性名
                console.log(ele); // 输出的是 andy  18 属性值
            })
        })
    </script>
</body>

</html>

（2）创建元素

  • 语法：$(“<li></li>”); ，动态的创建了一个 <li>

（3）添加元素

  • 内部最后面添加：element.append(“内容”) ，把内容放入匹配元素内部最后面，类似原生 appendChild。
  • 内部最前面添加：element.prepend(“内容”) ，把内容放入匹配元素内部最前面。
  • 外部添加到后面：element.after(“内容”)
  • 外部添加到前面：element.before(“内容”)

（4）删除元素

  • 删除匹配的元素（本身）：element.remove()
  • 删除匹配的元素集合中所有的子节点：element.empty()
  • 清空匹配的元素内容：element.html("")

案例如下：

<!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>创建添加删除元素</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原先的div</div>
    <script>
        $(function() {
            // 1. 创建元素
            var li = $("<li>我是后来创建的li</li>");
            // 2. 添加元素
            // (1) 内部添加
            // $("ul").append(li);  内部添加并且放到内容的最后面 
            $("ul").prepend(li); // 内部添加并且放到内容的最前面
            // (2) 外部添加
            var div = $("<div>我是后妈生的</div>");
            // $(".test").after(div);
            $(".test").before(div);
            // 3. 删除元素
            // $("ul").remove(); 可以删除匹配的元素 自杀
            // $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
            $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子
        })
    </script>
</body>

</html>

（5）购物车案例

  • 全选分析

    • 全选思路：里面3个小的复选框按钮（j-checkbox）选中状态（checked）跟着全选按钮（checkall）走。
    • 因为checked 是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。
    • 把全选按钮状态赋值给3小复选框就可以了。
    • 当我们每次点击小的复选框按钮，就来判断：
    • 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
    • :checked 选择器 :checked 查找被选中的表单元素。

  • 增减商品数量分析

    • 核心思路：首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
    • 注意1： 只能增加本商品的数量， 就是当前+号的兄弟文本框（itxt）的值。
    • 修改表单的值是val() 方法
    • 注意2： 这个变量初始值应该是这个文本框的值，在这个值的基础上++。要获取表单的值
    • 减号（decrement）思路同理，但是如果文本框的值是1，就不能再减了。

  • 修改商品小计分析

    • 核心思路：每次点击+号或者-号，根据文本框的值 乘以 当前商品的价格 就是 商品的小计
    • 注意1：只能增加本商品的小计，就是当前商品的小计模块（p-sum）
    • 修改普通元素的内容是text() 方法
    • 注意2： 当前商品的价格，要把￥符号去掉再相乘 截取字符串 substr(1)
    • parents(‘选择器’) 可以返回指定祖先元素
    • 最后计算的结果如果想要保留2位小数 通过 toFixed(2) 方法
    • 用户也可以直接修改表单里面的值，同样要计算小计。 用表单change事件
    • 用最新的表单内的值 乘以 单价即可 但是还是当前商品小计

  • 删除商品模块

    • 核心思路：把商品remove() 删除元素即可
    • 有三个地方需要删除：1. 商品后面的删除按钮 2. 删除选中的商品 3. 清理购物车
    • 商品后面的删除按钮：一定是删除当前的商品，所以从 $(this) 出发
    • 删除选中的商品：先判断小的复选框按钮是否选中状态，如果是选中，则删除对应的商品
    • 清理购物车： 则是把所有的商品全部删掉

  • 选中商品添加背景

    • 核心思路：选中的商品添加背景，不选中移除背景即可
    • 全选按钮点击：如果全选是选中的，则所有的商品添加背景，否则移除背景
    • 小的复选框点击：如果是选中状态，则当前商品添加背景，否则移除背景
    • 这个背景，可以通过类名修改，添加类和删除类

index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>我的购物车-品优购</title>
    <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />
    <!-- 引入facicon.ico网页图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- 引入css 初始化的css 文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共样式的css 文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入car css -->
    <link rel="stylesheet" href="css/car.css">
    <!-- 先引入jquery  -->
    <script src="js/jquery.min.js"></script>
    <!-- 在引入我们自己的js文件 -->
    <script src="js/car.js"></script>
</head>

<body>
    <!-- 顶部快捷导航start -->
    <div class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎您！ </li>
                    <li>
                        <a href="#">请登录</a>
                        <a href="#" class="style-red">免费注册</a>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li><a href="#">我的订单</a></li>
                    <li class="spacer"></li>
                    <li>
                        <a href="#">我的品优购</a>
                        <i class="icomoon"></i>
                    </li>
                    <li class="spacer"></li>
                    <li><a href="#">品优购会员</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">企业采购</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">关注品优购</a> <i class="icomoon"></i></li>
                    <li class="spacer"></li>
                    <li><a href="#">客户服务</a> <i class="icomoon"></i></li>
                    <li class="spacer"></li>
                    <li><a href="#">网站导航</a> <i class="icomoon"></i></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 顶部快捷导航end  -->


    <div class="car-header">
        <div class="w">
            <div class="car-logo">
                <img src="img/logo.png" alt=""> <b>购物车</b>
            </div>
        </div>
    </div>

    </div>
    <div class="c-container">
        <div class="w">
            <div class="cart-filter-bar">
                <em>全部商品</em>
            </div>
            <!-- 购物车主要核心区域 -->
            <div class="cart-warp">
                <!-- 头部全选模块 -->
                <div class="cart-thead">
                    <div class="t-checkbox">
                        <input type="checkbox" name="" id="" class="checkall"> 全选
                    </div>
                    <div class="t-goods">商品</div>
                    <div class="t-price">单价</div>
                    <div class="t-num">数量</div>
                    <div class="t-sum">小计</div>
                    <div class="t-action">操作</div>
                </div>
                <!-- 商品详细模块 -->
                <div class="cart-item-list">
                    <div class="cart-item check-cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" checked class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p1.jpg" alt="">
                            </div>
                            <div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>
                        </div>
                        <div class="p-price">￥12.60</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥12.60</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                    <div class="cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p2.jpg" alt="">
                            </div>
                            <div class="p-msg">【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽</div>
                        </div>
                        <div class="p-price">￥24.80</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥24.80</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                    <div class="cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p3.jpg" alt="">
                            </div>
                            <div class="p-msg">唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍</div>
                        </div>
                        <div class="p-price">￥29.80</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥29.80</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                </div>

                <!-- 结算模块 -->
                <div class="cart-floatbar">
                    <div class="select-all">
                        <input type="checkbox" name="" id="" class="checkall">全选
                    </div>
                    <div class="operation">
                        <a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
                        <a href="javascript:;" class="clear-all">清理购物车</a>
                    </div>
                    <div class="toolbar-right">
                        <div class="amount-sum">已经选<em>1</em>件商品</div>
                        <div class="price-sum">总价： <em>￥12.60</em></div>
                        <div class="btn-area">去结算</div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- footer start -->
    <div class="footer">
        <div class="w">
            <!-- mod_service -->
            <div class="mod_service">
                <ul>
                    <li>
                        <i class="mod-service-icon mod_service_zheng"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_kuai"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- mod_help -->
            <div class="mod_help">
                <dl class="mod_help_item">
                    <dt>购物指南</dt>
                    <dd> <a href="#">购物流程 </a></dd>
                    <dd> <a href="#">会员介绍 </a></dd>
                    <dd> <a href="#">生活旅行/团购 </a></dd>
                    <dd> <a href="#">常见问题 </a></dd>
                    <dd> <a href="#">大家电 </a></dd>
                    <dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>购物指南</dt>
                    <dd> <a href="#">购物流程 </a></dd>
                    <dd> <a href="#">会员介绍 </a></dd>
                    <dd> <a href="#">生活旅行/团购 </a></dd>
                    <dd> <a href="#">常见问题 </a></dd>
                    <dd> <a href="#">大家电 </a></dd>
                    <dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>购物指南</dt>
                    <dd> <a href="#">购物流程 </a></dd>
                    <dd> <a href="#">会员介绍 </a></dd>
                    <dd> <a href="#">生活旅行/团购 </a></dd>
                    <dd> <a href="#">常见问题 </a></dd>
                    <dd> <a href="#">大家电 </a></dd>
                    <dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>购物指南</dt>
                    <dd> <a href="#">购物流程 </a></dd>
                    <dd> <a href="#">会员介绍 </a></dd>
                    <dd> <a href="#">生活旅行/团购 </a></dd>
                    <dd> <a href="#">常见问题 </a></dd>
                    <dd> <a href="#">大家电 </a></dd>
                    <dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>购物指南</dt>
                    <dd> <a href="#">购物流程 </a></dd>
                    <dd> <a href="#">会员介绍 </a></dd>
                    <dd> <a href="#">生活旅行/团购 </a></dd>
                    <dd> <a href="#">常见问题 </a></dd>
                    <dd> <a href="#">大家电 </a></dd>
                    <dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl class="mod_help_item mod_help_app">
                    <dt>帮助中心</dt>
                    <dd>
                        <img src="upload/erweima.png" alt="">
                        <p>品优购客户端</p>
                    </dd>
                </dl>
            </div>

            <!-- mod_copyright  -->
            <div class="mod_copyright">
                <p class="mod_copyright_links">
                    关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U
                </p>
                <p class="mod_copyright_info">
                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702
                </p>
            </div>
        </div>
    </div>
    <!-- footer end -->
</body>

</html>

car.js

$(function() {
    // 1. 全选 全不选功能模块
    // 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了
    // 事件可以使用change
    $(".checkall").change(function() {
        // console.log($(this).prop("checked"));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
        if ($(this).prop("checked")) {
            // 让所有的商品添加 check-cart-item 类名
            $(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(".cart-item").removeClass("check-cart-item");
        }
    });
    // 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
    $(".j-checkbox").change(function() {
        // if(被选中的小的复选框的个数 === 3) {
        //     就要选中全选按钮
        // } else {
        //     不要选中全选按钮
        // }
        // console.log($(".j-checkbox:checked").length);
        // $(".j-checkbox").length 这个是所有的小复选框的个数
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
        if ($(this).prop("checked")) {
            // 让当前的商品添加 check-cart-item 类名
            $(this).parents(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(this).parents(".cart-item").removeClass("check-cart-item");
        }
    });
    // 3. 增减商品数量模块 首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
    $(".increment").click(function() {
        // 得到当前兄弟文本框的值
        var n = $(this).siblings(".itxt").val();
        // console.log(n);
        n++;
        $(this).siblings(".itxt").val(n);
        // 3. 计算小计模块 根据文本框的值 乘以 当前商品的价格  就是 商品的小计
        // 当前商品的价格 p  
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1);
        console.log(p);
        var price = (p * n).toFixed(2);
        // 小计模块 
        // toFixed(2) 可以让我们保留2位小数
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
        getSum();
    });
    $(".decrement").click(function() {
        // 得到当前兄弟文本框的值
        var n = $(this).siblings(".itxt").val();
        if (n == 1) {
            return false;
        }
        // console.log(n);
        n--;
        $(this).siblings(".itxt").val(n);
        // var p = $(this).parent().parent().siblings(".p-price").html();
        // parents(".p-num") 返回指定的祖先元素
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1);
        console.log(p);
        // 小计模块 
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
        getSum();
    });
    //  4. 用户修改文本框的值 计算 小计模块  
    $(".itxt").change(function() {
        // 先得到文本框的里面的值 乘以 当前商品的单价 
        var n = $(this).val();
        // 当前商品的单价
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1);
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
        getSum();
    });
    // 5. 计算总计和总额模块
    getSum();

    function getSum() {
        var count = 0; // 计算总件数 
        var money = 0; // 计算总价钱
        $(".itxt").each(function(i, ele) {
            count += parseInt($(ele).val());
        });
        $(".amount-sum em").text(count);
        $(".p-sum").each(function(i, ele) {
            money += parseFloat($(ele).text().substr(1));
        });
        $(".price-sum em").text("￥" + money.toFixed(2));
    }
    // 6. 删除商品模块
    // (1) 商品后面的删除按钮
    $(".p-action a").click(function() {
        // 删除的是当前的商品 
        $(this).parents(".cart-item").remove();
        getSum();
    });
    // (2) 删除选中的商品
    $(".remove-batch").click(function() {
        // 删除的是小的复选框选中的商品
        $(".j-checkbox:checked").parents(".cart-item").remove();
        getSum();
    });
    // (3) 清空购物车 删除全部商品
    $(".clear-all").click(function() {
        $(".cart-item").remove();
        getSum();
    })
})

7、jQuery 尺寸、位置操作

（1）jQuery尺寸

image-20230328140105791

  • 以上参数为空，则是获取相应值，返回的是数字型。
  • 如果参数为数字，则是修改相应值。参数可以不必写单位。

案例如下：

<!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>jQuery元素大小</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>

（2）jQuery位置

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

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

  • 获取元素偏移：position()

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

  • 设置或获取元素被卷去的头部和左侧：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>jQuery元素位置</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   如果没有带有定位的父级，则以文档为准
            // 这个方法只能获取不能设置偏移
            console.log($(".son").position());
            // $(".son").position({
            //     top: 200,
            //     left: 200
            // });
        })
    </script>
</body>

</html>

jQuery被卷去的头部：

  • 核心原理： 使用animate动画返回顶部。
  • animate动画函数里面有个scrollTop 属性，可以设置位置
  • 但是是元素做动画，因此 $(“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>jQuery被卷去的头部</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>

（3）电梯导航案例

  • 显示导航

    • 当我们滚动到 今日推荐 模块，就让电梯导航显示出来

    • 点击电梯导航页面可以滚动到相应内容区域

    • 核心算法：因为电梯导航模块和内容区模块一一对应的

    • 当我们点击电梯导航某个小模块，就可以拿到当前小模块的索引号

    • 就可以把animate要移动的距离求出来：当前索引号内容区模块它的offset().top

    • 然后执行动画即可

  • 导航点击

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

index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
    <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />
    <!-- 引入facicon.ico网页图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- 引入css 初始化的css 文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共样式的css 文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入 首页的css文件 -->
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/index.js"></script>
</head>

<body>
    <!-- 顶部快捷导航start -->
    <div class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎您！ </li>
                    <li>
                        <a href="#">请登录</a>
                        <a href="#" class="style-red">免费注册</a>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li><a href="#">我的订单</a></li>
                    <li class="spacer"></li>
                    <li>
                        <a href="#">我的品优购</a>
                        <i class="icomoon"></i>
                    </li>
                    <li class="spacer"></li>
                    <li><a href="#">品优购会员</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">企业采购</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">关注品优购</a> <i class="icomoon"></i></li>
                    <li class="spacer"></li>
                    <li><a href="#">客户服务</a> <i class="icomoon"></i></li>
                    <li class="spacer"></li>
                    <li><a href="#">网站导航</a> <i class="icomoon"></i></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 顶部快捷导航end  -->
    <!-- header制作 -->
    <div class="header w">
        <!-- logo -->
        <div class="logo">
            <h1>
                <a href="index.html" title="品优购">品优购</a>
            </h1>
        </div>
        <!-- search -->
        <div class="search">
            <input type="text" class="text" value="请搜索内容...">
            <button class="btn">搜索</button>
        </div>
        <!-- hotwrods -->
        <div class="hotwrods">
            <a href="#" class="style-red">优惠购首发</a>
            <a href="#">亿元优惠</a>
            <a href="#">9.9元团购</a>
            <a href="#">美满99减30</a>
            <a href="#">办公用品</a>
            <a href="#">电脑</a>
            <a href="#">通信</a>
        </div>
        <div class="shopcar">
            <i class="car"></i>我的购物车 <i class="arrow"></i>
            <i class="count">80</i>
        </div>
    </div>
    <!-- header 结束 -->
    <!-- nav start -->
    <div class="nav">
        <div class="w">
            <div class="dropdown fl">
                <div class="dt"> 全部商品分类 </div>
                <div class="dd">
                    <ul>
                        <li class="menu_item"><a href="#">家用电器</a> <i></i> </li>
                        <li class="menu_item">
                            <a href="list.html">手机</a> 、
                            <a href="#">数码</a> 、
                            <a href="#">通信</a>
                            <i></i>
                        </li>
                        <li class="menu_item"><a href="#">电脑、办公</a> <i></i> </li>
                        <li class="menu_item"><a href="#">家居、家具、家装、厨具</a> <i></i> </li>
                        <li class="menu_item"><a href="#">男装、女装、童装、内衣</a> <i></i> </li>
                        <li class="menu_item"><a href="#">个户化妆、清洁用品、宠物</a> <i></i> </li>
                        <li class="menu_item"><a href="#">鞋靴、箱包、珠宝、奢侈品</a> <i></i> </li>
                        <li class="menu_item"><a href="#">运动户外、钟表</a> <i></i> </li>
                        <li class="menu_item"><a href="#">汽车、汽车用品</a> <i></i> </li>
                        <li class="menu_item"><a href="#">母婴、玩具乐器</a> <i></i> </li>
                        <li class="menu_item"><a href="#">食品、酒类、生鲜、特产</a> <i></i> </li>
                        <li class="menu_item"><a href="#">医药保健</a> <i></i> </li>
                        <li class="menu_item"><a href="#">图书、音像、电子书</a> <i></i> </li>
                        <li class="menu_item"><a href="#">彩票、旅行、充值、票务</a> <i></i> </li>
                        <li class="menu_item"><a href="#">理财、众筹、白条、保险</a> <i></i> </li>
                    </ul>
                </div>
            </div>
            <!-- 右侧导航 -->
            <div class="navitems fl">
                <ul>
                    <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>
    <!-- nav end  -->
    <!-- main 模块 -->
    <div class="w">
        <div class="main">
            <div class="focus fl">
                <!-- 左侧按钮 -->
                <a href="javascript:;" class="arrow-l">
                    &lt;
                 </a>
                <!-- 右侧按钮 -->
                <a href="javascript:;" class="arrow-r"></a>
                <!-- 核心的滚动区域 -->
                <ul>
                    <li>
                        <a href="#"><img src="upload/focus.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="upload/focus1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="upload/focus2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="upload/focus3.jpg" alt=""></a>
                    </li>
                </ul>
                <!-- 小圆圈 -->
                <ol class="circle">

                </ol>
            </div>
            <div class="newsflash fr">
                <div class="news">
                    <div class="news-hd">
                        品优购快报
                        <a href="#">更多</a>
                    </div>
                    <div class="news-bd">
                        <ul>
                            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
                            <li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>
                            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
                            <li><a href="#">【特惠】9.9元洗100张照片！</a></li>
                            <li><a href="#">【特惠】长虹智能空调立省1000</a></li>
                        </ul>
                    </div>
                </div>
                <div class="lifeservice">
                    <ul>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_huafei"></i>
                                <p>话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>机票</p>
                            </a>
                            <span class="hot"></span>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>机票</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="bargain">
                    <img src="upload/bargain.jpg" alt="">
                </div>
            </div>
        </div>
    </div>

    <!-- 推荐服务模块 start -->
    <div class="recommend w">
        <div class="recom-hd fl">
            <img src="img/clock.png" alt="">
            <h3>今日推荐</h3>
        </div>
        <div class="recom-bd fl">
            <ul>
                <li>
                    <a href="#">
                        <img src="upload/pic.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="upload/pic.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="upload/pic.jpg" alt="">
                    </a>
                </li>
                <li class="last">
                    <a href="#">
                        <img src="upload/pic.jpg" alt="">
                    </a>
                </li>

            </ul>
        </div>
    </div>
    <!-- 推荐服务模块 end -->

    <!-- 楼层区 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>
    <!-- footer start -->
    <div class="footer">
        <div class="w">
            <!-- mod_service -->
            <div class="mod_service">
                <ul>
                    <li>
                        <i class="mod-service-icon mod_service_zheng"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_kuai"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- mod_help -->
            <div class="mod_help">
                <dl class="mod_help_item">
                    <dt>购物指南</dt>
                    <dd> <a href="#">购物流程 </a></dd>
                    <dd> <a href="#">会员介绍 </a></dd>
                    <dd> <a href="#">生活旅行/团购 </a></dd>
                    <dd> <a href="#">常见问题 </a></dd>
                    <dd> <a href="#">大家电 </a></dd>
                    <dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>购物指南</dt>
                    <dd> <a href="#">购物流程 </a></dd>
                    <dd> <a href="#">会员介绍 </a></dd>
                    <dd> <a href="#">生活旅行/团购 </a></dd>
                    <dd> <a href="#">常见问题 </a></dd>
                    <dd> <a href="#">大家电 </a></dd>
                    <dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>购物指南</dt>
                    <dd> <a href="#">购物流程 </a></dd>
                    <dd> <a href="#">会员介绍 </a></dd>
                    <dd> <a href="#">生活旅行/团购 </a></dd>
                    <dd> <a href="#">常见问题 </a></dd>
                    <dd> <a href="#">大家电 </a></dd>
                    <dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>购物指南</dt>
                    <dd> <a href="#">购物流程 </a></dd>
                    <dd> <a href="#">会员介绍 </a></dd>
                    <dd> <a href="#">生活旅行/团购 </a></dd>
                    <dd> <a href="#">常见问题 </a></dd>
                    <dd> <a href="#">大家电 </a></dd>
                    <dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>购物指南</dt>
                    <dd> <a href="#">购物流程 </a></dd>
                    <dd> <a href="#">会员介绍 </a></dd>
                    <dd> <a href="#">生活旅行/团购 </a></dd>
                    <dd> <a href="#">常见问题 </a></dd>
                    <dd> <a href="#">大家电 </a></dd>
                    <dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl class="mod_help_item mod_help_app">
                    <dt>帮助中心</dt>
                    <dd>
                        <img src="upload/erweima.png" alt="">
                        <p>品优购客户端</p>
                    </dd>
                </dl>
            </div>

            <!-- mod_copyright  -->
            <div class="mod_copyright">
                <p class="mod_copyright_links">
                    关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U
                </p>
                <p class="mod_copyright_info">
                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702
                </p>
            </div>
        </div>
    </div>
    <!-- footer end -->
</body>

</html>

index.js

$(function() {
    // 当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current
    // 节流阀  互斥锁 
    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) {
                if ($(document).scrollTop() >= $(ele).offset().top) {
                    console.log(i);
                    $(".fixedtool li").eq(i).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();
    })
})
avatar
文章
阅读
粉丝