Web前端开发笔记55——jQuery的元素操作、尺寸位置操作

最新推荐文章于 2025-11-01 17:17:34 发布

原创最新推荐文章于 2025-11-01 17:17:34 发布 · 186 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

#Web前端开发入门专栏收录该内容

57 篇文章

订阅专栏

1.元素操作主要包含创建、添加、删除等操作。

创建元素

添加元素

<div class="content">
    <div>我是原本就是存在的1</div>
    <div>我是原本就是存在的2</div>
    <div>我是原本就是存在的3</div>
    <div>我是原本就是存在的4</div>
    <div>我是原本就是存在的5</div>
</div>
<script>
    var newelem = $("<div>我原本不存在</div>");
    $(".content").append(newelem);
</script>

使用append可以在内部后面进行添加。

如果想要放在最前面我们可以使用prepend方法。

$(".content").prepend(newelem1);

同样可以将元素添加在自己的前后而非子元素添加，如上所示用法。

效果图：

我是内容部分的前一个div
我原本不存在2
我原本不存在1
我是原本就是存在的1
我是原本就是存在的2
我是原本就是存在的3
我是原本就是存在的4
我是原本就是存在的5
我原本不存在
我原本不存在3
我是内容部分的后一个div

删除元素

效果如下：

2.尺寸操作

3.位置操作

但是这个方法不可以修改元素位置。

4.被卷去头部方法。

我们的写法是：$（window）.scorll(fn(){})来获取当页面滚动时执行函数。

同样也有scrollLeft（）方法。大家可以试一试。

<div class="header">
    <div>这是头部</div>
</div>
<div class="nav">这是标头</div>
<div class="body">这是正文</div>
<div class="footer">这是尾部</div>
<script>
    // 首先我们来使用一下宽度的获取
    console.log($(".header>div").width())
    // 然后我们把它宽度修改为120px
    $(".header>div").width('120px')
    // 然后我们试一下包含padding和margin的方法
    console.log($(".header>div").outerWidth(true))
    // 下面我们试一下小div对于页面的左偏移，并修改它，以及对父元素的左偏移
    console.log($(".header>div").offset().left)
    $(".header>div").offset({left: 130})
    console.log($(".header>div").offset().left)
    console.log($(".header>div").position().left)
    //下面我们来试一试页面滚动了多少
    $(window).scroll(function () {
        console.log($(document).scrollTop())
    })

</script>

上面是对尺寸及位置操作的代码。

下面有一个案例：

$(".clickback").click(function () {
        // $(document).scrollTop(0)
        //由于document不是元素，所以animate不适用于document，我们将body，html转至顶部即可
        $("html").stop().animate({
            scrollTop: 0
        })
    })