jQuery节点操作和元素尺寸

最新推荐文章于 2021-09-18 08:47:15 发布

程序媛Render

最新推荐文章于 2021-09-18 08:47:15 发布

阅读量243

点赞数 3

分类专栏： jQuery JavaScript jQuery节点操作和元素尺寸文章标签： js jquery

本文链接：https://blog.csdn.net/qq_46492364/article/details/118497251

版权

JavaScript 同时被 3 个专栏收录

18 篇文章 1 订阅

订阅专栏

jQuery

4 篇文章 0 订阅

订阅专栏

jQuery节点操作和元素尺寸

1 篇文章 0 订阅

订阅专栏

前言

这部分学习jQuery节点操作和元素尺寸，同样也有相关案例，能更好的体会这部分内容。

一、节点操作

1.创建、追加元素方法

创建节点：$("<li></li>")
追加节点：
1.向父元素最后追加
（1）父元素jq对象.append（新创建的jq对象）
（2）新创建的jq对象.appendTo（父元素jq对象或选择器）
2.向父元素前面追加
（1）父元素jq对象.prepend（新创建的jq对象）
（2）新创建的jq对象.prependTo（父元素jq对象或选择器）
3.向元素后面追加新的兄弟
（1）jq对象.after（新创建的jq对象）
（2）新创建的jq对象.insertAfter（jq对象或选择器）
4.向元素前面追加新的兄弟
（1）jq对象.before（新创建的jq对象）
（2）新创建的jq对象.insertBefore（jq对象或选择器）

<!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>
</head>
<body>
    <div class="box">
        <h2>标题</h2>
        <p>段落</p>
    </div>
    <ul>
        <li>这是原有的标签</li>
    </ul>    
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        //获取元素
        var $ul = $("ul")
        var $lis = $("ul li")
        //创建元素
        var $li = $("<li>(1)新增的li标签</li>")
        //向父元素最后追加
        // $ul.append($li)
        // $li.appendTo("ul")
        // $li.appendTo($ul)

        //向父元素前面追加
        // $ul.prepend($li)
        // $li.prependTo($ul)

        //向元素后面追加
        // $li.insertAfter($lis)
        // $lis.after($li)

        //向元素前面追加
        $li.insertBefore($lis)
        // $lis.after($li)
    </script>
</body>
</html>

2.删除、清空元素

1.使用要删除的jq对象.remove()方法就可以将元素删除
2.清空元素
（1）empty（）方法，可以删除内部元素，也可以删除相关此元素的事件，推荐使用。
（2）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>Document</title>
</head>

<body>
  <div class="box">
    <p>段落</p>
    <h2>标题</h2>
  </div>
  <ul>
    <li>这是第 1 个标签</li>
    <li>这是第 2 个标签</li>
    <li class="third">这是第 3 个标签</li>
    <li>这是第 4 个标签</li>
    <li>这是第 5 个标签</li>
  </ul>

  <script src="js/jquery-1.12.4.min.js"></script>
  <script>
    // 删除元素自己本身
    $(".third").remove()

    //清空元素
    //方法1 empty()
    // $(".box").empty()

    //方法2 html("")
    $(".box").html("")
  </script>
</body>

</html>

3.克隆元素

使用clone（）方法，参数为false表示只复制内容，不复制事件；参数为true时也复制事件。

<!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;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-bottom: 20px;
        }
        .demo {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>标题1</h2>
        <p>段落1</p>
    </div>
    <div class="demo">
        <h2>标题2</h2>
        <p>段落2</p>
    </div>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(".box").click(function(){
            alert("你好");
        });
        
        // 获取 box 元素
        var $box = $(".box")
        //克隆元素
        // $newBox = $box.clone(false)
        $newBox = $box.clone(true)
        //追加元素
        $("body").append($newBox)
    </script>
</body>
</html>

二、元素尺寸

1.操作元素尺寸的方法

width区域：width
获取：jq对象.width()
设置：jq对象.width(数字)
padding区域：
获取：jq对象.innerWidth()
设置：jq对象.innerWidth(数字)
border区域：
获取：jq对象.outerWidth()
设置：jq对象.outerWidth(数字)

<!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;
        }
        .box{            
            width: 200px;
            height: 200px;
            padding: 50px;
            border: 20px solid skyblue;
            margin: 30px;
            background: pink;
        }
    </style>
</head>
<body>
    <div class="box">123</div>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        var $box = $(".box");
        //width内容区域的大小
        // console.log($box.width())
        // console.log($box.height())
        // $box.width(300)

        //padding以内区域的大小
        // console.log($box.innerWidth())
        // $box.innerWidth(400)    //设置的是width的大小 不会设置给padding

        //border以内区域的大小
        console.log($box.outerWidth())
        $box.outerWidth(500)    //设置的是width的大小，不会设置给padding和border
    </script>
</body>
</html>

2.操作元素的位置

（1）距离文档的位置
offset（）返回一个含有left和top值的对象
（2）距离上一个含有定位参考元素的位置
position（）返回一个含有left和top值的对象

<!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;
        }
        .fa {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 50px;
        }
        .son {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="fa">
        <div class="son"></div>
    </div>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        // 获取元素
        var $son = $(".son")
        //获取元素距离文档的位置
        var $offsetObj = $son.offset()
        console.log($offsetObj)
        console.log($offsetObj.left)
        console.log($offsetObj.top)

        //获取元素距离文档的位置
        var $posObj = $son.position()
        console.log($posObj)
        console.log($posObj.left)
        console.log($posObj.top)
    </script>

</body>
</html>

3.操作滚动条卷走的距离

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;
        }
        body {
            height: 4000px;
        }
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid #333;
            margin: 50px auto;
            font: 16px/32px "宋体";
            overflow: auto;
        }
        input {
            position: fixed;
            bottom: 50px;
            right: 50px;

        }
    </style>
</head>
<body>
    <div class="box">
        <p>段落内容</p>
        <p>段落内容</p>
        <p>段落内容</p>
        <p>段落内容</p>
        <p>段落内容</p>
        <p>段落内容</p>
        <p>段落内容</p>
        <p>段落内容</p>
        <p>段落内容</p>
        <p>段落内容</p>
        <p>段落内容</p>
        <p>段落内容</p>
        <p>段落内容</p>
        <p>段落内容</p>
        <p>段落内容</p>
        <p>段落内容</p>
        <p>段落内容</p>
        <p>段落内容</p>
        <p>段落内容</p>
        <p>段落内容</p>
        <p>段落内容</p>
        <p>段落内容</p>
        <p>段落内容</p>
        <p>段落内容</p>
        <p>段落内容</p>
        <p>段落内容</p>
        <p>段落内容</p>
    </div>
    <input type="button" value="返回顶部" class="backtop">
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        // 给元素添加滚动事件
        $(".box").scroll(function () {
            console.log($(this).scrollTop())
        })
        
        //给整个文档添加滚动事件
        $(document).scroll(function () {
            console.log($(this).scrollTop())
        })

        //返回顶部按钮事件
        $(".backtop").click(function () {
            $(document).scrollTop(0)
        })
    </script>
</body>
</html>

三、综合案例

1.固定导航和返回顶部

点击下载源码

2.楼梯导航

点击下载源码

总结

jQuery节点操作和元素尺寸这部分就学习到这里啦，接下来是jQuery的最后一部分jQuery的事件操作和插件。每天坚持学习前端~
在这里插入图片描述

程序媛Render

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
jQuery节点操作和元素尺寸

文章目录前言一、节点操作1.创建、追加元素方法2.删除、清空元素3.克隆元素二、元素尺寸1.操作元素尺寸的方法2.操作元素的位置3.操作滚动条卷走的距离总结前言这部分学习jQuery节点操作和元素尺寸，同样也有相关案例，能更好的体会这部分内容。一、节点操作1.创建、追加元素方法创建节点：$("<li></li>")追加节点：1.向父元素最后追加（1）父元素jq对象.append（新创建的jq对象）（2）新创建的jq对象.appendTo（父元素jq对象或选择器）
复制链接

扫一扫

专栏目录