jQuery基础自学笔记DAY3

最新推荐文章于 2024-06-14 15:02:13 发布

大饼阿呆

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量102

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_30987517/article/details/124116926

版权

jQuery基础自学笔记DAY3

jQuery元素操作
jQuery尺寸操作
jQuery位置操作
练习：品优购电梯导航

文章目录

jQuery基础自学笔记DAY3
一、jQuery元素操作
三、jQuery尺寸操作
三、jQuery位置操作
四、练习：品优购电梯导航

一、jQuery元素操作

遍历，创建，添加，删除元素操作。

1.1 遍历元素

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

1.1.1 each() 方法遍历元素

语法1：$(“div”.each(function (index , domEle){ }))
1.each()方法遍历匹配的每个元素。主要用DOM处理。each每一个。
2.里面的回调函数有2个参数：index 是每个元素的索引号，domEle 是每个DOM元素对象，不是jQuery对象。
3.所以想使用jQuery方法，需要给这个dom元素转换为jQuery对象$(domEle)

1.1.2 $.each() 方法遍历元素

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

<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>

品优购里面的结算修改为，点选中的才结算总价，和遍历元素有关放这里

  function getSum() {
    var count = 0; // 计算选中了的总件数
    var money = 0; // 计算选中了的总价钱
    // console.log($(".j-checkbox:checked"));
    $(".j-checkbox:checked")
      .parents(".p-checkbox")
      .siblings(".p-num")
      .find(".itxt")
      .each(function (i, ele) {
        count += parseInt($(ele).val());
      });
    $(".amount-sum em").text(count);

    $(".j-checkbox:checked")
      .parents(".p-checkbox")
      .siblings(".p-sum")
      .each(function (i, ele) {
        money += parseFloat($(ele).text().substr(1));
      });
    $(".price-sum em").text("￥" + money.toFixed(2));
  }

1.2 创建元素

语法：$(“<li></li>”);

1.3 添加元素

创建后要添加元素
(1) 内部添加：
element.append(“内容”);
内部添加并且放到内容的最后面，类似原生的appendChild
element.prepend(“内容”);
内部添加并且放到内容的最前面，类似原生的appendChild
(2) 外部添加：
element.after(“内容”); //把内容放入目标元素后面
element.before(“内容”); //把内容放入目标元素前面
(3)注意：
内部添加元素，生成后，它们是父子关系
外部添加元素，生成后，它们是兄弟关系

1.4 删除元素

语法：
(1).element.remove(); //删除匹配的元素（本身）
(2).element.empty(); // 可以删除匹配的元素里面的子节点孩子 (清空子节点)
(3).element.html(“”); //清空匹配的元素内容同上

<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>

1.5 练习:品优购删除商品模块

// 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();
  });

三、jQuery尺寸操作

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

注意：

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

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 15px solid red;
            margin: 20px;
        }

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

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

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

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


        })

三、jQuery位置操作

位置主要函数：offset()、position()、scrollTop()/scrollLeft()

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

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

            // 1. 获取设置距离文档的位置（偏移） offset
            console.log($(".son").offset());
            console.log($(".son").offset().top);//这个属性中的top值
            $(".son").offset({
                 top: 200,
                 left: 200
            });

3.2 position()获取元素偏移

获取距离带有定位父级位置（偏移），如果没有带有定位的父级，则以文档为准。
这个方法只能获取不能设置偏移。

            // 这个方法只能获取不能设置偏移
            console.log($(".son").position());
            // $(".son").position({
            //     top: 200,
            //     left: 200
            // });

3.3 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>
        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(300);//每次刷新让盒子位置固定
            // 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()
            // 页面滚动事件
            var boxTop = $(".container").offset().top;
            $(window).scroll(function () {
                // console.log(11);
                console.log($(document).scrollTop());//文档top被卷去了多少
                // console.log(boxTop);
                // 当盒子被卷
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").stop().fadeIn();
                } else {
                    $(".back").stop().fadeOut();
                }
            });
            // 返回顶部
            $(".back").click(function () {
                // $(document).scrollTop(0); 返回顶部
                // 用动画滚动到顶部
                $("body, html").stop().animate({
                    scrollTop: 0
                });
                // $(document).stop().animate({
                //     scrollTop: 0
                // }); 不能是文档而是 html和body元素做动画
            })
        })
    </script>
</body>

</html>

四、练习：品优购电梯导航

$(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();
    })
})

大饼阿呆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础自学笔记DAY3

jQuery基础自学笔记DAY3jQuery元素操作jQuery尺寸操作jQuery位置操作练习：品优购电梯导航文章目录jQuery基础自学笔记DAY3一、jQuery元素操作1.1 遍历元素1.1.1 each() 方法遍历元素1.1.2 \$.each() 方法遍历元素1.2 创建元素1.3 添加元素1.4 删除元素1.5 练习:品优购删除商品模块三、jQuery尺寸操作三、jQuery位置操作3.1 offset()设置或获取元素偏移3.2 position()获取元素偏移3.3
复制链接

扫一扫