jQuery笔记五——节点相关方法

最新推荐文章于 2022-05-31 10:10:01 发布

阿牛大牛中

最新推荐文章于 2022-05-31 10:10:01 发布

阅读量69

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_46351593/article/details/107633583

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

添加节点相关方法
删除节点相关方法
替换节点相关方法
复制节点相关方法

添加节点相关方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加节点相关方法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            $("button").click(function() {
                // 创建一个节点
                var $li = $("<li>新增的li</li>")
                    // 添加节点
                    // $("ul").append($li);//会将元素添加到指定元素内部的最后
                    // $("ul").prepend($li);//会将元素添加到指定元素内部的最前
                    // $li.appendTo("ul");//会将元素添加到指定元素内部的最后
                    // $li.prependTo("ul"); //会将元素添加到指定元素内部的最前

                // $("ul").after($li);//会将元素添加到指定元素外部的后面
                // $("ul").before($li);//会将元素添加到指定元素外部的前面
                // $li.insertAfter("ul");//会将元素添加到指定元素外部的后面
                // $li.insertBefore("ul")//会将元素添加到指定元素外部的前面
            });
        });
    </script>
</head>

<body>
    <button>添加</button>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
    </ul>

</body>

</html>

内部：添加到指定元素内部最后：$("ul").append($li);，添加到指定元素内部最前：$("ul").prepend($li);。
外部：添加到指定元素外部的后面：$("ul").after($li);，添加到指定元素外部的前面：$("ul").before($li);

删除节点相关方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除节点相关方法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            $("button").click(function() {
                // $("div").remove();//删除指定元素
                // $("div").empty();//删除指定元素的内容和子元素
                // $("li").detach(".item");//与remove类似
            });
        });
    </script>
</head>

<body>
    <button>删除节点</button>
    <ul>
        <li class="item">我是第1个li</li>
        <li>我是第2个li</li>
        <li class="item">我是第3个li</li>
        <li>我是第4个li</li>
        <li class="item">我是第5个li</li>
    </ul>
    <div>我是div
        <p>我是段落</p>
    </div>
</body>

</html>

remove()：删除指定元素。
empty()：删除指定元素的内容和子元素。

替换节点相关方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>替换节点相关方法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function() {

            $("button").click(function() {
                // 新建元素
                var $h6 = $("<h6>我是标题6</h6>");
                // 替换元素
                // $("h1").replaceWith($h6);//替换所有匹配的元素为指定的元素
                $h6.replaceAll("h1");//替换所有匹配的元素为指定的元素
            });
        });
    </script>
</head>

<body>
    <button>替换节点</button>
    <h1>我是标题1</h1>
    <h1>我是标题1</h1>
    <p>我是段落</p>
</body>

</html>

$("h1").replaceWith($h6);，$h6.replaceAll("h1");：替换所有匹配的元素为指定的元素。

复制节点相关方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复制节点相关方法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 浅复制一个元素
                var $li = $("li:first").clone(false);
                // 将复制的元素添加到ul中
                $("ul").append($li);
            });
            $("button").eq(1).click(function() {
                // 深复制一个元素
                var $li = $("li:first").clone(true);
                // 将复制的元素添加到ul中
                $("ul").append($li);
            });
            $("li").click(function() {
                alert("hello");
            });
        });
    </script>
</head>

<body>
    <button>浅复制节点</button>
    <button>深复制节点</button>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
    </ul>
</body>

</html>

clone(flase)浅复制，只会复制元素，不会复制元素的事件。
clone(true)深复制，会复制元素的事件。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lN5EDWK8-1595911483907)(/Users/mac/Desktop/MarkDown /jQuery/笔记5/1.gif)]

阿牛大牛中

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery笔记五——节点相关方法

文章目录添加节点相关方法删除节点相关方法替换节点相关方法复制节点相关方法添加节点相关方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>添加节点相关方法</title&g
复制链接

扫一扫