【jQuery笔记Part4】01-jQuery-节点操作-添加节点-删除节点-复制节点

最新推荐文章于 2023-03-23 10:17:49 发布

萌宅鹿同学

最新推荐文章于 2023-03-23 10:17:49 发布

阅读量447

点赞数

分类专栏： # jQuery笔记文章标签： jQuery节点操作 JavaScript jQuery添加节点 jQuery删除节点

本文链接：https://blog.csdn.net/weixin_43734095/article/details/100097480

版权

jQuery笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

节点操作

添加节点
删除节点
替换&复制节点

jQuery笔记目录

添加节点

静态页面

html 小技巧：ul.green>li{green$}*10
可以快速实现：

<ul class="green">
        <li>green1</li>
        <li>green2</li>
        <li>green3</li>
        <li>green4</li>
        <li>green5</li>
        <li>green6</li>
        <li>green7</li>
        <li>green8</li>
        <li>green9</li>
        <li>green10</li>
</ul>

首先搭建示例页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;
            margin: 100px auto;
            border: 1px solid orange;
        }
        .red{
            background-color: red;
        }
        .green{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul class="red">
            <li>red1</li>
            <li>red2</li>
            <li>red3</li>
            <li>red4</li>
            <li>red5</li>
            <li>red6</li>
            <li>red7</li>
            <li>red8</li>
            <li>red9</li>
            <li>red10</li>
        </ul>
        <ul class="green">
            <li>green1</li>
            <li>green2</li>
            <li>green3</li>
            <li>green4</li>
            <li>green5</li>
            <li>green6</li>
            <li>green7</li>
            <li>green8</li>
            <li>green9</li>
            <li>green10</li>
        </ul>
    </div>
</body>
</html>

运行效果：
在这里插入图片描述

内部添加（父子关系）

append(): 添加节点->追加到最后 (父子关系)

语法格式：$('ul').append(tag);

var $newTag = $('<li>新增节点</li>');
$('.red').append($newTag); // 父子关系

运行效果：
在这里插入图片描述

appendTo(tag): 把创建的节点添加到指定节点之后(父子关系)

语法格式：$(tag).appendTo('li');

var $newTag = $('<li>新增节点</li>');
$newTag.appendTo('.red'); // 父子关系

运行效果：与上面 append() 运行效果相同。

prepend() 添加结点->追加到最前面 (父子关系)

语法格式：$('ul').prepend(tag);

var $newTag = $('<li>新增节点</li>');
$('.red').prepend($newTag);

运行效果：
在这里插入图片描述

prependTo(tag) 把创建的结点添加到指定结点之前(父子关系)

语法格式：$(tag).prependTo('li');

var $newTag = $('<li>新增标签</li>');
$newTag.prependTo('.red');

运行效果：与上面 prepend() 运行效果相同。

外部添加（兄弟关系）

after() 把指定结点添加到指定元素之后(属于兄弟关系)

语法格式：$('ul').after(tag);

var $newTag = $('<li>新增节点</li>');
$('.red').after($newTag);

运行效果：
在这里插入图片描述

insertAfter(tag) 把指定元素添加到指定元素之前(兄弟关系)

语法格式：$('li:first').insertAfter($('li:last'));

var $newTag = $('<li>新增节点</li>');
$newTag.insertAfter($('.red'));

运行效果：与上面 after() 运行效果相同。

before() 把指定结点添加到指定元素之前(兄弟关系)

语法格式：$('ul').before(tag);

var $newTag = $('<li>新增节点</li>');
$('.red').before($newTag);

运行效果：
在这里插入图片描述

insertBefore(tag) 把指定元素添加到指定元素之后(兄弟关系)

语法格式：$('li:last').insertBefore($('li:first'));

var $newTag = $('<li>新增节点</li>');
$newTag.insertBefore($('.red'));

运行效果：与上面的 before() 运行效果相同。

注意点

一个节点对象只能被添加到一个地方

如果对一个节点对象执行多次操作，后面的操作会把前面的操作覆盖掉。

var $newTag = $('<li>新增节点</li>');
$('.red').append($newTag); // 添加到红色区域后面
// 由于操作的是同一个对象 $newTag，所以下面的操作会把上面的给覆盖掉
$('.red').prepend($newTag); // 添加到红色区域前面

运行效果：
在这里插入图片描述

节点对象可以是 js 对象也可以是 jQuery 对象

var $newTag = $('<li>新增节点</li>');
$newTag.insertBefore('.red'); // js对象
$newTag.insertBefore($('.red')); // jq对象

以上两种写法都可以运行，且效果相同：
在这里插入图片描述

删除节点

静态页面

搭建示例页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;
            margin: 100px auto;
            border: 1px solid orange;
        }
        .red{
            background-color: red;
        }
        .green{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul class="red">
            <li>
                red1
                <input type="date">
                <span>撩课学院</span>
            </li>
            <li>red2</li>
            <li>red3</li>
            <li>red4</li>
            <li>red5</li>
            <li>red6</li>
            <li>red7</li>
            <li>red8</li>
            <li>red9</li>
            <li>red10</li>
        </ul>
        <ul class="green">
            <li>green1</li>
            <li>green2</li>
            <li>green3</li>
            <li>green4</li>
            <li>green5</li>
            <li>green6</li>
            <li>green7</li>
            <li>green8</li>
            <li>green9</li>
            <li>green10</li>
        </ul>
    </div>
</body>
</html>

运行效果：
在这里插入图片描述

remove() 把指定的节点删除

将选择的标签包括本身全部删除。

语法格式：$(tag).remove()

$('.red>li:first').remove(); // 连 li 标签一起删除

运行效果：
在这里插入图片描述

empty() 清空选择元素当中的所有内容

内部有标签就连标签一起清空；没有标签，直接清空文字。但是会留下选择的标签。

语法格式：$(tag).empty()

$('.red>li:first').empty() // 清空标签内容，留下 li 标签

运行效果：
在这里插入图片描述

利用 html(’’) 清空内容

同样也可以达到清空内容的效果，与 empty() 相同

语法格式：$(tag).html('')

$('.red>li:first').html(''); // 与 empty() 效果相同

运行效果：与上面的 empty() 运行效果相同。

替换&复制节点

静态页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            height: 40px;
            background: green;
            margin: 10px;
        }
    </style>
</head>
<body>
    <p>
        <input type="date">
        <span>喜欢IT，就上撩课(itlike.com)</span>
    </p>
</body>
</html>

运行效果：
在这里插入图片描述

tag1.replaceWith(tag2) 把tag1标签替换为tag2标签

$(document).click(function () { // 点击整个页面
    // 替换节点
    var $newTag = $('<h1>哈哈哈</h1>');
    $('p').replaceWith($newTag);
})

运行效果：点击整个页面时，原本的标签被替换。
在这里插入图片描述

tag.clone(varBool) 复制tag标签

参数说明:

当参数为 false 时代表只复制标签，不包括标签绑定的事件，浅复制。
当参数为 true 时代表不仅复制标签，连同里面的事件一起复制，深复制。
如果没有传递参数，代表为false。

浅复制 false：只复制标签，不复制事件

浅复制，只复制标签，不复制事件

$(document).click(function () { // 点击整个页面
    $('p:first').click(function (event) {
        event.stopPropagation(); // 阻止冒泡，只跳出弹框，不复制标签
        alert('哈哈哈哈');
    })
    // 复制节点(浅复制)
    var $newTag = $('p:first').clone(); // 浅复制，只复制标签，不复制事件
    $('body').append($newTag);
})

运行效果：点击除了第一行标签以外的地方都会复制出一个新的标签，由于是浅复制，复制出来的标签是没有事件处理的，所以点击复制的标签不会弹框。
在这里插入图片描述
点击第一行的标签（非复制），则跳出窗口提示。

深复制 true：事件一起复制

深复制，事件一起复制。

$('p:first').click(function (event) {
    event.stopPropagation(); // 阻止冒泡，只跳出弹框，不复制标签
    alert('哈哈哈哈');
})

$(document).click(function () { // 点击整个页面
    // 复制节点(深复制)
    var $newTag = $('p:first').clone(true); // 深复制，事件一起复制
    $('body').append($newTag);
})

运行效果：
由于是深复制，复制的标签依旧有事件处理。所以点击任意一个复制的标签，都会跳出弹框。
在这里插入图片描述

萌宅鹿同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【jQuery笔记Part4】01-jQuery-节点操作-添加节点-删除节点-复制节点

节点操作添加节点静态页面内部添加（父子关系）append(): 添加节点->追加到最后 (父子关系)appendTo(): 把创建的节点添加到指定节点之后(父子关系)prepend() 添加结点->追加到最前面 (父子关系)prependTo() 把创建的结点添加到指定结点之前(父子关系)外部添加（兄弟关系）after() 把指定结点添加到指定元素之后(属于兄弟关系)insertAft...
复制链接

扫一扫