jQuery节点操作和元素尺寸


前言

这部分学习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的事件操作和插件。每天坚持学习前端~
在这里插入图片描述

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值